Search code examples
google-chrome-extensionchrome-extension-manifest-v3

With a Manifest v3 Chrome Extension, is it possible to load an extension HTML resource file into a new tab?


With a Manifest v3 Chrome Extension, is it possible to load an extension HTML resource file into a new tab? I was thinking about providing a plugin with a larger, full-page user experience than what the popdown panel could provide. I created a page.html (just simple HTML for now, no JS or CSS) and put it in my extensions folder. I then added this to the manifest.json:

    "web_accessible_resources": [
      {
        "resources": ["page.html"],
        "matches": [ "*://*/*" ]
      }
    ]

I reloaded the plugin and then tried navigating to this page in my browser with:

chrome://extensions/MY-EXTENSION-ID-GOES-HERE/page.html

I get an ERR_FAILED and "This site can't be reached" message.


Solution

  • There is no need for a web_accessible_resources in this case in the v3 manifest for this action. Just use something like the following code to open it from the service-worker.js:

        chrome.tabs.create({url:chrome.runtime.getURL('page.html'),active:true});
    

    This will automatically open something akin to...

    chrome-extension://MY-EXTENSION-ID/page.html

    ...where MY-EXTENSION-ID is automatically filled in by chrome.runtime.getURL('page.html').

    You can then reference remote and local resources in your HTML tags. For local resources, just use relative pathing. For remote resources, keep an eye on Google Chrome Extension developer policies.

    Thanks goes to wOxxOm for his assistance.