Trying to redirect Chrome to new URL using Chrome extension

Question

I am just starting out writing chrome extensions. y first project: For certain sites, if you click on the extension, the extension will redirect Chrome to the current domainName/archive.

I am using chrome.tabs.update(); to redirect.
If I try to redirect to a hard-coded URL such as Yahoo.com , it works correctly.

However, if I try to redirect so what I really want, such as developer.google.com/archive (which I know does not exist), the resulting URL Chrome tries to fetch is:

chrome-extension://injepfpghgbmjnecbgiokedggknlmige/developer.chrome.com/archive

Chrome is prepending the extension's ID to the URL for some reason?

In my background.js, I have the following:

 chrome.runtime.onMessage.addListener(function(request, sender) {
chrome.tabs.update( {url: request.redirect});

I got the code above from this article .

Someone else had the same issue here (but not answered)

The full options.js is:

function createButton () {
    chrome.tabs.getSelected(null, function(tab) {
        var url = new URL(tab.url);
        var domain = url.hostname;
        archiveURL = domain + "/archive";

        let page = document.getElementById('buttonDiv');
        let button = document.createElement('button');

        button.addEventListener('click', function() {
            chrome.runtime.sendMessage({redirect: archiveURL}); // works if I send "Yahoo.com"
        });
        button.textContent = "> " + archiveURL; // So I know I am sending the right URL
        page.appendChild(button);

    })
}


createButton(); 

SUMMARY: If I set:

 archiveURL = "http://sundxwn.tumblr.com/archive";

the system correctly goes to http://sundxwn.tumblr.com/archive .

But... if I set

archiveURL = domain + "/archive";

and confirm that the button text shows: http://sundxwn.tumblr.com/archive , Chrome tries to go to: chrome-extension://injepfpghgbmjnecbgiokedggknlmige/sundxwn.tumblr.com/archive

Any help would be truly appreciated.

Answer 1

url.hostname is just that, the hostname. For the original URL https://example.com/some/path , it would be example.com .

Then, your constructed URL is example.com/archive . It does not start with a protocol (eg http:// ) or a slash, so it's interpreted as a relative URL to the current page's URL.

And you are calling this from some extension page, eg page.html or the auto-generated background page. Its URL is, for example:

chrome-extension://injepfpghgbmjnecbgiokedggknlmige/page.html

So, to construct an absolute URL from a relative URL, Chrome chops that path off at the last slash and adds your relative part.

You need to specify the protocol so that Chrome understands it's a URL that has nothing to do with the current document. And url.origin does that, it would be https://example.com , which then is properly interpreted.