How do I get the fully qualified URL for a file inside my extension?

问题

I am making my first Firefox extension using the WebExtension API and cannot find a way to redirect a website to an HTML file that is in the extension's directory.

I have already managed to redirect the website but only to other websites or other pages on the website.

manifest.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";

The current code will redirect you to another page on the website e.g. if you have reddit.com open it will take you to reddit.com/interface/redirect.html

My aim is to redirect you to a custom HTML page that I do not need to host on a website.

回答1:

You are changing the URL of the page to one that is relative to the current domain. The page in your extension is not in the reddit.com domain. If you want to the URL to be from a different domain, you have to specify the domain. In this case, you need to use runtime.getURL() to get the fully qualified URL:

Firefox or Chrome:

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

or (Firefox only):

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

You should also add:

"run_at": "document_start"

to your manifest.json content_scripts entry. Doing so will prevent the page from being displayed, even for a brief time. In other words, by using document_start, your content script will run prior to the redit.com page being rendered.

Other methods of redirecting a webpage

The approach you are taking, using a content script, is a reasonable one to use when you want to redirect a single, or a few, predefined domains. It will result in the least broad permissions being reported to the user (i.e. only the domains in your matches).

However, for redirecting a dynamic list of domains, it is not sufficient. In that case, you should use a webNavigation.onBeforeNavigate listener to perform the redirection of the navigation. You could also use a webRequest listener to redirect all traffic to one or more domains. Using webRequest can be used to block all requests to the domain, but is more resource intensive than just blocking navigation using webNavigation.onBeforeNavigate (including iframes, if you choose). Which method you use will depend on what you are desiring to do.

You could also use a tabs.onUpdated listener to perform the redirection, but that event with the new URL fires after the webNavigation.onBeforeNavigate and the entire webRequest sequence. In other words, using a tabs.onUpdated listener will still allow the request to the domain you are redirecting to have been made, the DOM for the page to have been created and potentially shown (briefly) to the user.

来源：https://stackoverflow.com/questions/45773773/how-do-i-get-the-fully-qualified-url-for-a-file-inside-my-extension

标签

javascript

firefox-webextensions