Test chrome version and fix things

package.json

@@ -29,7 +29,7 @@
     "build:prod:chrome": "BROWSER=chrome NODE_ENV=production bun scripts/builder/build.ts build",
     "serve:dev:chrome": "BROWSER=chrome NODE_ENV=development bun scripts/builder/build.ts serve",
     "serve:prod:chrome": "BROWSER=chrome NODE_ENV=production bun scripts/builder/build.ts serve",
-    "start:chrome": "web-ext --config=scripts/web-ext.chrome.cjs run"
+    "start:chrome": "web-ext --config=scripts/web-ext.chrome.cjs run --target chromium"
   },
   "dependencies": {
     "@antfu/utils": "^0.7.10",

scripts/builder/esbuild.ts

@@ -22,6 +22,9 @@ export async function createEsbuildContext(asset: AssetMain) {
     outbase: asset.opts.src,
     outdir: asset.opts.dist,
     format: asset.type === 'content_script' ? 'iife' : 'esm',
+    banner: {
+      js: `if (!('browser' in self)) { self.browser = self.chrome; }`,
+    },
 
     sourcemap: 'external',
     alias: ALIAS(asset),
@@ -103,8 +106,9 @@ function AssetPlugin(asset: AssetMain) {
           if (
             (meta.entryPoint && join(asset.opts.root, meta.entryPoint) === asset.inputPath)
             || (asset.type === 'other' && relative(asset.opts.src, asset.inputPath) === relative(asset.opts.dist, outputPath))
-          )
+          ) {
             asset.outputPath.value = join(asset.opts.root, outputPath)
+          }
         }
 
         asset.onEsbuildEnd()

scripts/builder/vite.ts

@@ -56,6 +56,7 @@ export async function createViteConfig(asset: AssetPage, inputs: ViteInput[], or
           entryFileNames: '[name].js',
           chunkFileNames: '[name].js',
           assetFileNames: '[name][extname]',
+          banner: `if (!('browser' in self)) { self.browser = self.chrome; }`,
         },
       },
     },

src/common/logger.ts

@@ -1,6 +1,6 @@
 type ConsoleFunc = (...args: unknown[]) => void
 
-const C = window.console
+const C = globalThis.console
 
 export class Logger {
   static verbose = true

src/common/toast/toast.tsx

@@ -109,11 +109,11 @@ class Toast {
 
   stop() {
     if (this.timeoutId !== null)
-      window.clearTimeout(this.timeoutId)
+      globalThis.clearTimeout(this.timeoutId)
   }
 
   start() {
-    this.timeoutId = window.setTimeout(() => this.hide(), this.timeout)
+    this.timeoutId = globalThis.setTimeout(() => this.hide(), this.timeout) as unknown as number
   }
 }
 

src/common/utils.ts

@@ -25,17 +25,17 @@ export function isPrimitive(test: unknown): boolean {
 let cachedToken: string | undefined
 
 export async function fetchAndParseDocument(
-  ...args: Parameters<typeof window.fetch>
+  ...args: Parameters<typeof globalThis.fetch>
 ): Promise<Document> {
   const res = await safeFetch(...args)
   return parseDocument(res)
 }
 
 export async function safeFetch(
-  ...args: Parameters<typeof window.fetch>
-): ReturnType<typeof window.fetch> {
+  ...args: Parameters<typeof globalThis.fetch>
+): ReturnType<typeof globalThis.fetch> {
   cachedToken = undefined
-  const res = await window.fetch(...args)
+  const res = await globalThis.fetch(...args)
   if (!res || res.status !== 200)
     throw new Error('Status was not 200 OK')
 

src/content_script/utils.tsx

@@ -42,6 +42,7 @@ export function getTagFromElement(tagElement: Element): Tag {
 }
 
 export function isDarkTheme(): boolean {
+  // TODO: Implement this
   // console.log(window.getComputedStyle(document.body).backgroundColor)
   // const bodyBG = tinycolor(
   //   window.getComputedStyle(document.body).backgroundColor,

src/manifest.ts

@@ -27,6 +27,7 @@ export default function (): PartialDeep<browser._manifest.WebExtensionManifest>
       },
       ...chrome && {
         service_worker: './background/background.ts',
+        type: 'module',
       },
     },
     options_ui: {

src/options_ui/options_ui.ts

@@ -12,8 +12,7 @@ if (process.env.NODE_ENV === 'development') {
   document.body.appendChild(document.createElement('script')).src = 'http://localhost:8098'
 
   // Allow manual testing access to the options object
-  // eslint-disable-next-line ts/no-unsafe-member-access
-  ;(window as any).options = options
+  ;(globalThis as any).options = options
 }
 
 const app = createApp(OptionsUI)