Display current URL in a chrome extension

Question

After doing some research, the code that I have come up with is this:

var outUrl;
// first get the windowid
chrome.windows.getCurrent(function(window) {
    // then get the current active tab in that window
    chrome.tabs.query({
        active: true,
        windowId: window.id
    }, function (tabs) {
        var tab = tabs[0];
        document.write(tab.url)
    });
});

This is in a javascript file which is called from my popup html file. It does not, however display the URL of the current website, instead it displays nothing.

I have found multiple posts about this on this and other websites but I haven't been able to implement any of the supposed solutions.

Any help would be greatly appreciated.

PAEz · Accepted Answer · 2020-09-23T03:24:25.283

36

Maybe this is what your looking for....

chrome.tabs.query({'active': true, 'windowId': chrome.windows.WINDOW_ID_CURRENT},
   function(tabs){
      alert(tabs[0].url);
   }
);

And the tabs permission needs to be set in the manifest...

manifest.json

"permissions": [ 
  "tabs"
]

edited Sep 23 '20 at 03:24

answered Jul 15 '12 at 19:20

PAEz

8,366
2
34
27

5

I'm getting undefined for this. :( – Mar 27 '13 at 13:13
12

Got it - had to add this: `"permissions": [ "tabs" ]` in `manifest.json` – Mar 27 '13 at 13:15
^ and then reload the extension in the chrome://extensions/ page – graemeboy Feb 23 '14 at 22:17

score 16 · Answer 2 · edited May 09 '16 at 22:45

I had the same issue. I wrote this extension to display the current URL user is browsing now in the popup.

manifest.js

"permissions": [ 
  "tabs"
]

popup.js

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

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

function renderURL(statusText) {
  document.getElementById('status').textContent = statusText;
}

document.addEventListener('DOMContentLoaded', function() {
  getCurrentTabUrl(function(url) {
    renderURL(url); 
  });
});

score 0 · Answer 3 · answered Jun 05 '20 at 09:56

Solution:

Get the URL of currently selected tab for Chrome Extension This code is to get parts of URL, because in tabs[0].url we cannot get parts of URL like host, hostname, origin, port, etc...

chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
let link = document.createElement('a');
link.href = tabs[0].url;
})

Further using basic js to get its part: link.host = "password remember.web.app" You can use other like link.hostname, link.hash, link.host, link.href, link.origin, .link.pathname, link.protocol, link.search

Hope it solves your problem!

Don't forgot to set tabs permission in Manifest.json – Sohel Shekh Jun 05 '20 at 09:58 — Sohel Shekh, Jun 05 '20 at 09:58

Display current URL in a chrome extension

3 Answers3

Linked