this commit fixes the issue with firefox's dynamic importation problem: Support Firefox #3.

- add `content_script_extension_adapter.ts`, which now takes the role of being the actual loaded `content_script`, and it dynamically imports `content_script.ts` through the use of `browser.runtime.getURL`, which is the only acceptable way of importing in firefox, as firefox does not allow the use of relative url constant string import. the imported url has to be absolute.
- make `content_script.ts` import statically, since dynamic import is no longer required by it, as it is no longer the direct entry point of the actual `content_script`.
  - this also reduces our code-splitting-chunk output files from 3 to just 1
- in `manifest.json`:
  - reduce the `web_accessible_resources` matches url to just github, since we do not want other websites to be able to fetch `GET` and sniff our `".js"` files from untrusted domains, should they somehow be able to figure out our extension's UUID.
  - add `browser_specific_settings`, which is the only way to get storage access permission in firefox when it is loaded as a development extension. I don't know if this key is necessary for publication though.

Author: omar-azmi

src/js/content_script.ts

@@ -1,17 +1,8 @@
 /// <reference types="https://esm.sh/@types/dom-navigation" />
 
-/** `content_script`s cannot import through esm module import syntax.
- * thus, we have to resort to dynamic `import()` function, which must be awaited.
- * so, for that, we have to create an async iife to execute the script.
- * furthermore, the imported script MUST have external-resource security clearance to be imported here.
- * for that, we have to specify in "manifest.json": `web_accessible_resources = [{resources: ["*.js"], matches: "<all_urls>"}]`.
- * which is basically saying: javascript within "<all_urls>" in this extension can load the resource url_pattern "*.js" (all javascript files).
-*/
-
-// dynamic imports of the following are done in `runMain()`:
-// import { getCurrentURL, parseRepoEntryPath } from "../lib/typedefs.ts"
-// import { injectDiskspaceButton, injectDownloadButton, injectSizeButton } from "../lib/modify_ui.ts"
-// { dom_setTimeout, storage } = await import("../lib/deps.ts")
+import { dom_setTimeout, storage } from "../lib/deps.ts"
+import { injectDiskspaceButton, injectDownloadButton, injectSizeButton } from "../lib/modify_ui.ts"
+import { getCurrentURL, parseRepoEntryPath } from "../lib/typedefs.ts"
 
 declare global {
 	const navigation: Navigation
@@ -29,43 +20,38 @@ const reserved_fullpaths = new Set([
 ])
 
 const runMain = async () => {
-	const
-		{ parseRepoEntryPath, getCurrentURL } = await import("../lib/typedefs.ts"),
-		{ injectDiskspaceButton, injectDownloadButton, injectSizeButton } = await import("../lib/modify_ui.ts"),
-		{ dom_setTimeout, storage } = await import("../lib/deps.ts")
-
-	const onPageReload = async () => {
-		const repo_path = parseRepoEntryPath(getCurrentURL())
-		if (
-			repo_path &&
-			!reserved_owners.has(repo_path.owner) &&
-			!reserved_repos.has(repo_path.repo) &&
-			!reserved_fullpaths.has(repo_path.fullpath?.split("/")[0])
-		) {
-			const layout = await storage.get("layout")
-			layout.forEach((layout_row, row_number) => {
-				layout_row?.forEach((layout_cell, column_number) => {
-					const { feature, span } = layout_cell ?? {}
-					switch (feature) {
-						case "size": {
-							injectSizeButton(row_number, span)
-							break
-						} case "download": {
-							injectDownloadButton(row_number, span)
-							break
-						} case "diskspace": {
-							injectDiskspaceButton(row_number, span)
-							break
-						}
-						default: { break }
+	const repo_path = parseRepoEntryPath(getCurrentURL())
+	if (
+		repo_path &&
+		!reserved_owners.has(repo_path.owner) &&
+		!reserved_repos.has(repo_path.repo) &&
+		!reserved_fullpaths.has(repo_path.fullpath?.split("/")[0])
+	) {
+		const layout = await storage.get("layout")
+		layout.forEach((layout_row, row_number) => {
+			layout_row?.forEach((layout_cell, column_number) => {
+				const { feature, span } = layout_cell ?? {}
+				switch (feature) {
+					case "size": {
+						injectSizeButton(row_number, span)
+						break
+					} case "download": {
+						injectDownloadButton(row_number, span)
+						break
+					} case "diskspace": {
+						injectDiskspaceButton(row_number, span)
+						break
 					}
-				})
+					default: { break }
+				}
 			})
-		}
+		})
 	}
+}
 
-	navigation.addEventListener("navigatesuccess ", () => dom_setTimeout(onPageReload, 300))
-	await onPageReload()
+// BUG: firefox currently does not support `Navigation API`
+if (typeof navigation !== "undefined") {
+	navigation.addEventListener("navigatesuccess ", () => dom_setTimeout(runMain, 300))
 }
 
 // all content_scripts are loaded after the `DOMContentLoaded` event. therefore, we should run the script at top level

src/js/content_script_extension_adapter.ts

@@ -0,0 +1,29 @@
+/// <reference types="npm:web-ext-types" />
+
+/** `content_script`s cannot import through esm module import syntax.
+ * thus, we have to resort to dynamic `import()` in an async context, in addition to awaiting for it.
+ * 
+ * furthermore, the imported script MUST have external-resource security clearance to be imported here.
+ * for that, we have to specify in "manifest.json": `web_accessible_resources = [{resources: ["*.js"], matches: "<all_urls>"}]`.
+ * which is basically saying: javascript within "<all_urls>" in this extension can load the resource url_pattern "*.js" (all javascript files).
+ * 
+ * finally, firefox cannot dynamically import with a relative url (relative to this script's location in the extension's root path).
+ * moreover, you cannot use `import.meta.url` to figure out this script's url, because `content_script`s are not loaded as esm modules, but rather as classical scripts.
+ * so you have to use `browser.runtime.getURL("/your/module/to_load.js")` with the absolute path of the module (relative to the extension's root url) to get its url.
+ * in chromium, this isn't an issue, and you can do relative imports and the browser will understand that it's relative to this script's location in the extension.
+ * to summarize here's what's valid:
+ * - in chromium: `import("./content_script.ts")`
+ *   - esbuild understands dynamic imports when they are a constant string expression, so `./content_script.ts` will also get bundled and transformed automatically
+ * - in firefox and chromium: `import(chrome.runtime.getURL("/js/content_script.js"))`
+ *   - esbuild cannot evaluate this kind of dynamic string expression, so it will ignore it and leave it as is.
+ *   that's why we'll have to reference it through its compiled name instead of the source file name.
+*/
+
+declare const chrome: typeof browser
+const getBrowser = () => {
+	return typeof browser !== "undefined" ? browser : chrome
+}
+
+(async () => {
+	await import(getBrowser().runtime.getURL("/js/content_script.js"))
+})()

src/manifest.json

@@ -8,7 +8,7 @@
 				"*://github.com/*"
 			],
 			"js": [
-				"./js/content_script.js"
+				"./js/content_script_extension_adapter.js"
 			]
 		}
 	],
@@ -18,10 +18,15 @@
 				"*.js"
 			],
 			"matches": [
-				"<all_urls>"
+				"*://github.com/*"
 			]
 		}
 	],
+	"browser_specific_settings": {
+		"gecko": {
+			"id": "github_aid@temp.com"
+		}
+	},
 	"icons": {
 		"16": "./icon/eldercat_16.png",
 		"32": "./icon/eldercat_32.png",