Google Chrome Plugin: How to get domain from URL (tab.url)

Question

Using the Google Chrome API's tab.url value, what is the best method to get just the domain from the entire value?

In JavaScript I would use window.location.protocol & window.location.hostname. For example something like this:

var domain = window.location.protocol + "//" + window.location.hostname;

But that gets the extension domain and not the tab so cannot use that method. So with a function similar to the one below... How would I strip just the domain from the tab.url value?

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

Ross Zurowski · Answer 1 · 2019-01-04T11:16:28.710

61

Since this question was originally answered, a better solution has appeared.

Most modern browsers now support use of the URL constructor, which provides access to href, hostname, path and all standard ways of splitting up a URL.

To get the domain, you could do the following:

chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
  var tab = tabs[0];
  var url = new URL(tab.url)
  var domain = url.hostname
  // `domain` now has a value like 'example.com'
})

edited Jan 04 '19 at 11:16

answered May 27 '16 at 15:09

Ross Zurowski

938
9
13

9

This should be the accepted answer. Just say no to crazy regexes! :-) – Perry Aug 26 '16 at 23:50
@ross-zurowski can you please check out my post about migrating from the depreciated `getSelected` method and maybe using `getCurrent` over `query`? https://stackoverflow.com/a/54029859/8023318 – kinghat Jan 03 '19 at 21:13
@kinghat thanks for the ping. I just updated this answer to use the new `query` API rather than the old `getSelected` one. – Ross Zurowski Jan 04 '19 at 11:17
thanks @RossZurowski! were you able to get `getCurrent` working in any fashion? – kinghat Jan 04 '19 at 16:58
1

@kinghat, I haven't tried. According to the [Chrome release notes](https://developer.chrome.com/extensions/whats_new#16), using `query({ active: true })` is the new recommended approach for getting the current tab — I think because `getCurrent` returns `undefined` for [background pages of extensions](https://developer.chrome.com/extensions/tabs#method-getCurrent). – Ross Zurowski Jan 06 '19 at 04:40
For some reason I'm getting `active: true audible: false autoDiscardable: true discarded: false height: 916 highlighted: true` but not the url... – Mars Robertson May 11 '19 at 18:47
@MichalStefanow, I just tested this code and it continues to work for me. You're getting the callback with an object but it doesn't have a `url` property? If that's the case, I'd wonder if might be related to extension permissions… – Ross Zurowski May 13 '19 at 03:05
I think it is solved now. Maybe I didn't properly reload the extension, maybe something else. – Mars Robertson May 13 '19 at 08:12
1

Getting an error when using this code: `Error handling response: TypeError: Cannot read property 'url' of undefined` at line 3. Update: The extension didn't have access to the site, I had to manually give it access. Fixed now! – Krishnan Shankar May 29 '21 at 21:43

Eli Grey · Answer 2 · 2016-04-11T23:22:19.323

First of all, domains don't include a protocol. I have created a regular expression for your problem. To get the hostname (you'd want to do this as IP addresses are not domains) of a URI, use the the following:

var domain = uri.match(/^[\w-]+:\/{2,}\[?([\w\.:-]+)\]?(?::[0-9]*)?/)[1];
// Given uri = "http://www.google.com/", domain == "www.google.com"

If you want the origin (protocol + host (not hostname, there's a difference) + optional port) instead of the domain, use the following:

var origin = uri.match(/^[\w-]+:\/{2,}\[?[\w\.:-]+\]?(?::[0-9]*)?/)[0];
// Given uri = "http://www.google.com/", origin == "http://www.google.com"

score 2 · Answer 3 · answered Jan 03 '19 at 21:10

chrome.tabs.query(
  {
    active: true,
    currentWindow: true
  },
  ([currentTab]) => {
    const url = new URL(currentTab.url);
    const domain = url.hostname;
    console.log(domain);
  }
);

combination of: https://stackoverflow.com/a/37486863/8023318 but not using the depreciated getSelected and https://stackoverflow.com/a/48755190/8023318. would like to see if this can be done via getCurrent.

Google Chrome Plugin: How to get domain from URL (tab.url)

3 Answers3