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 asYahoo.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.

WOW. THANK YOU !!!! Can you please explain? url.hostname seemed to give the right answer when I put it as text in the button... what is the difference? Hard to find this online... — Ed Landau, Nov 13 '18 at 02:46

score 0 · Answer 1 · answered Nov 14 '18 at 16:34

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 (e.g. 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, e.g. 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.

Trying to redirect Chrome to new URL using Chrome extension

1 Answers1