嘗試使用Chrome擴展程序將Chrome重定向到新的URL

Question

我剛開始寫Chrome擴展程序。 第一個項目：對於某些網站，如果您單擊擴展名，則該擴展名會將Chrome重定向到當前的domainName / archive。

我正在使用chrome.tabs.update(); 重定向。
如果我嘗試重定向到Yahoo.com類的硬編碼URL，它將正常工作。

但是，如果我嘗試重定向，使我真正想要的東西，例如developer.google.com/archive （我知道不存在），Chrome嘗試獲取的結果URL是：

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

Chrome是否出於某種原因在擴展名的ID之前添加了URL？

在我的background.js中，我有以下內容：

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

我從本文獲得了上面的代碼。

有人在這里有相同的問題（但未回答）

完整的options.js是：

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(); 

摘要：如果我設置：

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

系統可以正確訪問http://sundxwn.tumblr.com/archive 。

但是...如果我設置

archiveURL = domain + "/archive";

並確認按鈕文本顯示為： http://sundxwn.tumblr.com/archive chrome-extension://injepfpghgbmjnecbgiokedggknlmige/sundxwn.tumblr.com/archive嘗試轉到： chrome-extension://injepfpghgbmjnecbgiokedggknlmige/sundxwn.tumblr.com/archive

任何幫助將不勝感激。

Answer 1

url.hostname就是那個主機名。 對於原始URL https://example.com/some/path ，它將為example.com 。

然后，您構造的URL是example.com/archive 。 它不是以協議（例如http:// ）或斜杠開頭的，因此它被解釋為當前頁面URL的相對 URL。

您可以從某些擴展頁面（例如page.html或自動生成的后台頁面）調用它。 其URL例如：

chrome-extension://injepfpghgbmjnecbgiokedggknlmige/page.html

因此，要從相對URL構造絕對URL，Chrome會在最后一個斜杠處截斷該路徑，並添加您的相對部分。

您需要指定協議，以便Chrome理解它是與當前文檔無關的URL。 而url.origin做到了，那就是https://example.com ，然后對其進行正確解釋。