How to Fetch Url of Current Tab in My Chrome Extension Using JavaScript

How to fetch URL of current Tab in my chrome extension using javascript

Note you must have the tabs permission set in your manifest file

"permissions": [
    "tabs"
],

http://developer.chrome.com/extensions/tabs.html

or the activeTab permission if initiated by a click on the extension button[Xan]

https://developer.chrome.com/extensions/activeTab

Code:

chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
    console.log(tabs[0].url);
});

chrome extension code to get current active tab url and detect any url update in it as well

Below is a script which takes care of both the cases:

chrome.tabs.onActivated.addListener( function(activeInfo){
    chrome.tabs.get(activeInfo.tabId, function(tab){
        y = tab.url;
        console.log("you are here: "+y);
    });
});

chrome.tabs.onUpdated.addListener((tabId, change, tab) => {
    if (tab.active && change.url) {
        console.log("you are here: "+change.url);           
    }
});

How can I get the current tab URL for chrome extension?

The problem is in this line:

tab = tab.id;

It should be something like:

var tabId = tab.id;

Use Javascript to get current tab url

You can use chrome.tabs.query():

"permissions": [ ...
   "tabs"
]

This requires that you request access to the chrome.tabs in your extension manifest file:

chrome.tabs.query({ active: true, lastFocusedWindow: true }, tabs => {
    let url = tabs[0].url;
    // Do something with url
});

The lastFocusedWindow property is used when you want to access the current tab that the user is focused into. You can also use currentWindow: true when you want to get the window where your extension's code is currently executing.

API Reference: https://developer.chrome.com/docs/extensions/reference/tabs/#method-query

How can I get the URL of the current tab from a Google Chrome extension?

Use chrome.tabs.query() like this:

chrome.tabs.query({active: true, lastFocusedWindow: true}, tabs => {
    let url = tabs[0].url;
    // use `url` here inside the callback because it's asynchronous!
});

This requires that you request access to the chrome.tabs API in your extension manifest:

"permissions": [ ...
   "tabs"
]

It's important to note that the definition of your "current tab" may differ depending on your extension's needs.

Setting lastFocusedWindow: true in the query is appropriate when you want to access the current tab in the user's focused window (typically the topmost window).

Setting currentWindow: true allows you to get the current tab in the window where your extension's code is currently executing. For example, this might be useful if your extension creates a new window / popup (changing focus), but still wants to access tab information from the window where the extension was run.

I chose to use lastFocusedWindow: true in this example, because Google calls out cases in which currentWindow may not always be present.

You are free to further refine your tab query using any of the properties defined here: chrome.tabs.query

Chrome Extension - get current tab url and re-open it (in a new tab) not working

Thanks, moving chrome.tabs.create inside chrome.tabs.query solved it.

Move chrome.tabs.create inside chrome.tabs.query callback. This callback is asynchronous, meaning that currently chrome.tabs.create gets called before currentURL variable is updated. –

Google Chrome extension to display url of current tab by click of button

You actually can't display alerts from javascript events in chrome extension popups (see this other stack overflow post for more info). But in case you were curious what it would look like if you could, here's what it'd be (I changed a couple things in your code):

ids can't have spaces in them, so I changed the button's id to get-url
You have to register the event listener on the button, you were registering it in a function that was never called so the listener was never added
I moved the script to the end of the <body> because you're using querySelector, and script tags are executed in-line, which means that only elements that are before the script tag are rendered yet. That is to say, you have to have the script tag after the button tag
I added the tabs permission to the manifest-- you need it to query all tabs

popup.js:

function getCurrentTabUrl() {
  var queryInfo = {
    active: true,
    currentWindow: true,
  }

  chrome.tabs.query(queryInfo, function(tabs) {
    var tab = tabs[0]
    alert(tab.url)
  })
}

document.querySelector('#get-url').addEventListener('click', getCurrentTabUrl)

popup.html:

<html>
  <head>
    <title>Save URL</title>
  </head>

  <body>
    <h2> FYDP: Save Current Tab URL </h2>
    <button id="get-url"> Get the URL of this page!</button>
    <script src="popup.js"></script>
  </body>
</html>

manifest.json:

{
  "manifest_version": 2,

  "name": "Save URL",
  "description": "This extension saves the URL of the current tab in a variable",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html",
    "default_title": "Click here!"
  },

  "permissions": [
    "activeTab",
    "tabs"
  ]
}

How to Fetch Url of Current Tab in My Chrome Extension Using JavaScript