WebExtension shouldn't rename options.html

[TiagoCavalcante]

🙋 feature request

@parcel/config-webextension shouldn't rename the file options.html when it is mentioned inside the manifest.

🤔 Expected Behavior

The file options.html should keep it name in the dist folder.

😯 Current Behavior

This file (as any other file) have its name changed, in this case to options.COMMIT_SHA.html.

💁 Possible Solution

Don't rename the file from the field options_ui.page (inside manifest.json).

🔦 Context

Many extensions have some way to open that file from JS, and the mangling make that inviable/impossible as the majority of the extensions support multiple browsers, and each browser have its own options.html.

💻 Examples

The extension I was porting to Parcel uses the following code to open the options page:

window.open("/options.html", "_blank");

[101arrowz]

Hashing used to be disabled for every asset in web extensions but it caused a lot of issues with collisions, so we changed it. For options pages, you should definitely not need a static file name to open the page because you can simply do chrome.runtime.openOptionsPage() (or browser.runtime.openOptionsPage() on Firefox, etc.). If you actually need the URL for some reason, you can do the following:

import optionsPage from 'url:./path/to/options.html';

// Do anything with the URL, e.g. open it
window.open(optionsPage, "_blank");

[filips123]

Would it be possible to add some option to disable hashing (revert to previous behaviour)? It's a bit annoying having to "import" URL for such assets. Also, I have a page that is accessible both from browser action popup and normal tab, so it would be nicer if the user sees the original/unhashed URL.

[101arrowz]

It's actually probably for the best you have to import the URL because that is more robust against changes to the asset type, Parcel config, etc.

I have a page that is accessible both from browser action popup and normal tab, so it would be nicer if the user sees the original/unhashed URL

Don't extensions already show the massive, ugly extension ID before the file name? If you really need this it is possible by making a custom namer plugin. This also makes it possible to just use the original locations as URLs without importing them (though I do not recommend this).

[fregante]

openOptionsPage is definitely the correct way to open the options page. However for complex extensions you might still have multiple html pages or hash-based routing, so you really need to open options.html#/advanced

Unless window.open('foo.html') is already supported by a standard Parcel build, it should not be supported for extensions either. But if it is, then maybe *.tabs.create({url}) might have to be supported too:

• [Web Extension Transformer] doesn't support executeScript, insertCSS, contentScript.register,runtime.getURL #5758

In any case I feel that generally HTML pages should not be renamed though as they’re an app’s entry points:

• 🙋 how to keep html name #280 (comment)

[TiagoCavalcante]

@fregante I forgot to say, I found a universal (and kinda obivious) way to do this:

// @ts-expect-error: Parcel allow this
import optionsPage from "./options.html"
window.open(optionsPage, "_blank")

[fregante]

Can you reopen the issue? This is still true:

WebExtension shouldn't rename options.html

[fregante]

By the way, if you want to preserve some filenames, you can specify them as web_accessible_resources:

  "web_accessible_resources": ["options.html"]

even as globs, like:

  "web_accessible_resources": ["*.html"]

or

  "web_accessible_resources": ["**/*.html"]

This has the obvious drawback that the files are now publicly available to the websites that your users visit.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.