javascript - 如何获取扩展中文件的完全限定 URL？

Question

我正在使用 WebExtension API 制作我的第一个 Firefox 扩展并且找不到将网站重定向到扩展目录中的 HTML 文件的方法。

我已经设法重定向该网站，但只能重定向到其他网站或网站上的其他页面。

list .json:

{
    "manifest_version": 2,
    "name": "Focus",
    "version": "1.0",
    "permissions": [
        "activeTab"
    ],
    "browser_action": {
        "default_title": "Focus",
        "default_popup": "interface/main.html"
    },
    "content_scripts": [
        {
            "matches": ["*://*.reddit.com/*"],
            "js": ["redirect.js"]
        }
    ]
}

redirect.js:

window.location = "interface/redirect.html";

当前代码会将您重定向到网站上的另一个页面，例如如果你打开了 reddit.com，它将带你到 reddit.com/interface/redirect.html

我的目标是将您重定向到我不需要在网站上托管的自定义 HTML 页面。

Answer 1

您正在将页面的 URL 更改为与当前域相关的 URL。您的扩展程序中的页面不在 reddit.com 域中。如果您希望 URL 来自不同的域，则必须指定域。在这种情况下，您需要使用 runtime.getURL()获取完全限定的 URL:

Firefox 或 Chrome:

window.location = chrome.runtime.getURL("interface/redirect.html");

或(仅限 Firefox):

window.location = browser.runtime.getURL("interface/redirect.html");

您还应该添加:

"run_at": "document_start"

到您的 manifest.json content_scripts 条目。这样做会阻止页面显示，即使是很短的时间。换句话说，通过使用 document_start，您的内容脚本将在呈现 redit.com 页面之前运行。

重定向网页的其他方法

当您要重定向单个或几个预定义域时，您采用的方法(使用内容脚本)是一种合理的方法。这将导致向用户报告最不广泛的权限(即只有您的匹配中的域)。

但是，对于重定向动态域列表来说，这还不够。在这种情况下，您应该使用 webNavigation.onBeforeNavigate监听器执行导航的重定向。您也可以使用 webRequest监听器将所有流量重定向到一个或多个域。使用 webRequest 可用于阻止对域的所有请求，但比仅使用 webNavigation.onBeforeNavigate(包括 iframe，如果您选择)阻止导航需要更多资源。您使用哪种方法取决于您想要做什么。

您也可以使用 tabs.onUpdated 监听器来执行重定向，但是带有新 URL 的事件会在 webNavigation.onBeforeNavigate 和整个 之后触发webRequest 序列。换句话说，使用 tabs.onUpdated 监听器仍将允许向您重定向到的域发出请求，页面的 DOM 已创建并可能(简要地)显示给用户。