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

Viewed 253245

I'm having fun with Google Chrome extension, and I just want to know how can I store the URL of the current tab in a variable?

11 Answers

Warning! chrome.tabs.getSelected is deprecated. Please use chrome.tabs.query as shown in the other answers.


First, you've to set the permissions for the API in manifest.json:

"permissions": [
    "tabs"
]

And to store the URL :

chrome.tabs.getSelected(null,function(tab) {
    var tablink = tab.url;
});

This is a pretty simple way

window.location.toString();  

You probaly have to do this is the content script because it has all the functions that a js file on a wepage can have and more.

Hi here is an Google Chrome Sample which emails the current Site to an friend. The Basic idea behind is what you want...first of all it fetches the content of the page (not interessting for you)...afterwards it gets the URL (<-- good part)

Additionally it is a nice working code example, which i prefer motstly over reading Documents.

Can be found here: Email this page

async function getCurrentTabUrl () {
  const tabs = await chrome.tabs.query({ active: true })
  return tabs[0].url
}

You'll need to add "permissions": ["tabs"] in your manifest.

This Solution is already TESTED.

set permissions for API in manifest.json

"permissions": [ ...
   "tabs",
    "activeTab",
    "<all_urls>"
]

On first load call function. https://developer.chrome.com/extensions/tabs#event-onActivated

chrome.tabs.onActivated.addListener((activeInfo) => {  
  sendCurrentUrl()
})

On change call function. https://developer.chrome.com/extensions/tabs#event-onSelectionChanged

chrome.tabs.onSelectionChanged.addListener(() => {
  sendCurrentUrl()
})

the function to get the URL

function sendCurrentUrl() {
  chrome.tabs.getSelected(null, function(tab) {
    var tablink = tab.url
    console.log(tablink)
  })

If you want the full extension that store the URLs that opened or seen by the use via chrome extension:

use this option in your background:

openOptionsPage = function (hash) {
  chrome.tabs.query({ url: options_url }, function (tabs) {
    if (tabs.length > 0) {
      chrome.tabs.update(
        tabs[0].id,
        { active: true, highlighted: true, currentWindow: true },

        function (current_tab) {
          chrome.windows.update(current_tab.windowId, { focused: true });
        }
      );
    } else {
      window.addEventListener(hash, function () {
        //url hash # has changed
        console.log(" //url hash # has changed 3");
      });
      chrome.tabs.create({
        url: hash !== undefined ? options_url + "#" + hash : options_url,
      });
    }
  });
};

you need index.html file also. which you can find in the this Github the manifest file should be like this:

{
  "manifest_version": 2,
  "name": "ind count the Open Tabs in browser ",
  "version": "0.3.2",
  "description": "Show open tabs",
  "homepage_url": "https://github.com/sylouuu/chrome-open-tabs",
  "browser_action": {},
  "content_security_policy": "script-src 'self' https://ajax.googleapis.com https://www.google-analytics.com; object-src 'self'",

  "options_page": "options.html",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "scripts": ["background.js"]
  },

  "web_accessible_resources": ["img/*.png"],

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

All unique seen URL stored in an array depicted in browser console

The full version of simple app can be found here on this Github:

https://github.com/Farbod29/extract-and-find-the-new-tab-from-the-browser-with-chrome-extention

Related