feat: bunch of small additions. Making it more compatible with SIH

Author: BossSloth

README.md

@@ -24,6 +24,14 @@ Want to know if your favorite chrome extension is compatible with Extendium? Che
 
 Once installed it should just work out of the box.
 
+## Known features that are currently not supported
+- context menus
+- alarms
+- notifications
+- permission control
+- global keyboard shortcuts
+- anything to do with tabs
+
 ## Contributing
 
 Contributions are welcome! Please feel free to submit a Pull Request.

backend/main.py

@@ -150,34 +150,35 @@ def PrepareExtensionFiles():
     for ext_folder in os.listdir(extensions_dir):
         ext_path = os.path.join(extensions_dir, ext_folder)
         if os.path.isdir(ext_path):
+            ext_folder = ext_folder.replace('\\', '/')
+            full_dir_path = f"{extension_url}/{ext_folder}"
+            # Define file processing rules
+            processing_rules = {
+                '.css': [
+                    {'pattern': r'url\((?!")chrome-extension:\/\/__MSG_@@extension_id__\/(.+?)\)', 'replacement': f"url(\"{full_dir_path}/\\g<1>\")", 'is_regex': True},
+                    {'pattern': "url('/", 'replacement': f"url('{full_dir_path}/"},
+                    {'pattern': r"url\((['\"])chrome-extension://__MSG_@@extension_id__/", 'replacement': f"url(\g<1>{full_dir_path}/", 'is_regex': True},
+                ],
+                '.html': [
+                    {'pattern': "href=\"/", 'replacement': f"href=\"{full_dir_path}/"},
+                    {'pattern': "src=\"/", 'replacement': f"src=\"{full_dir_path}/"},
+                ],
+                '.js': [
+                    {'pattern': "globalThis.chrome", 'replacement': "chrome"},
+                ]
+            }
+
+            # Handle root folder references in JS files
+            ext_root_folders = [d for d in os.listdir(ext_path) if os.path.isdir(os.path.join(ext_path, d))]
+            for dir_name in ext_root_folders:
+                processing_rules['.js'].append({'pattern': f"(['\"])\/{re.escape(dir_name)}", 'replacement': f"\\g<1>{full_dir_path}/{dir_name}", 'is_regex': True})
+                processing_rules['.css'].append({'pattern': f"url\((['\"])\/{re.escape(dir_name)}", 'replacement': f"url(\\g<1>{full_dir_path}/{dir_name}", 'is_regex': True})
+                processing_rules['.css'].append({'pattern': f"url\((/{re.escape(dir_name)}/.+?)\)", 'replacement': f"url(\"{full_dir_path}\\g<1>\")", 'is_regex': True})
+
             for root, _, files in os.walk(ext_path):
                 for file in files:
                     file_extension = os.path.splitext(file)[1].lower()
                     file_path = os.path.join(root, file)
-                    ext_folder = ext_folder.replace('\\', '/')
-
-                    # Define file processing rules
-                    processing_rules = {
-                        '.css': [
-                            {'pattern': r'url\((?!")chrome-extension:\/\/__MSG_@@extension_id__\/(.+?)\)', 'replacement': f"url(\"{extension_url}/{ext_folder}/\\g<1>\")", 'is_regex': True},
-                            {'pattern': "url('/", 'replacement': f"url('{extension_url}/{ext_folder}/"},
-                            {'pattern': "url(\"chrome-extension://__MSG_@@extension_id__/", 'replacement': f"url(\"{extension_url}/{ext_folder}/"},
-                        ],
-                        '.html': [
-                            {'pattern': "href=\"/", 'replacement': f"href=\"{extension_url}/{ext_folder}/"},
-                            {'pattern': "src=\"/", 'replacement': f"src=\"{extension_url}/{ext_folder}/"},
-                        ],
-                        '.js': [
-                            {'pattern': "globalThis.chrome", 'replacement': "chrome"}
-                        ]
-                    }
-
-                    # Handle root folder references in JS files
-                    if file_extension == '.js':
-                        ext_root_folders = [d for d in os.listdir(ext_path) if os.path.isdir(os.path.join(ext_path, d))]
-                        for dir_name in ext_root_folders:
-                            processing_rules['.js'].append({'pattern': f"'/{dir_name}", 'replacement': f"'{extension_url}/{ext_folder}/{dir_name}"})
-
 
                     # Process file if we have rules for its extension
                     if file_extension in processing_rules:

eslint.config.mjs

@@ -8,7 +8,7 @@ import tseslint from 'typescript-eslint';
 
 export default tseslint.config(
   { files: ['**/*.{js,mjs,cjs,ts}'] },
-  globalIgnores(['.millennium/', '.venv/', '._extensions/']),
+  globalIgnores(['.millennium/', '.venv/', '._extensions/', 'webkit/chromeInjectionContent.js']),
   {
     languageOptions: {
       globals: globals.browser,
@@ -42,7 +42,7 @@ export default tseslint.config(
   }),
   {
     plugins: {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+
       perfectionist,
     },
     rules: {

frontend/browser/corsFetch.ts

@@ -18,8 +18,6 @@ export function patchFetch(window: Window): void {
   const oldFetch = window.fetch;
 
   window.fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
-    const corsCache = JSON.parse(localStorage.getItem(corsCacheKey) ?? '[]') as string[];
-
     const baseUrl = input.toString()
       .replace('https://', '')
       .replace('http://', '')
@@ -29,6 +27,8 @@ export function patchFetch(window: Window): void {
       return credentialsFetch(input, init);
     }
 
+    const corsCache = JSON.parse(localStorage.getItem(corsCacheKey) ?? '[]') as string[];
+
     if (corsCache.includes(baseUrl)) {
       return corsFetch(oldFetch, input, init);
     }

frontend/browser/createChrome.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unsafe-function-type */
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { ChromeEvent } from '../extension/ChromeEvent';
 import { Extension } from '../extension/Extension';
@@ -27,6 +28,9 @@ export function createChrome(context: string, extension: Extension): typeof wind
     extension: createExtensionType(extension, logger),
     contextMenus: createContextMenusType(extension, logger),
     commands: createCommandsType(extension, logger),
+    notifications: createNotificationsType(extension, logger),
+    webRequest: createWebRequestType(extension, logger),
+    declarativeNetRequest: createDeclarativeNetRequestType(extension, logger),
   };
 
   return chromeObj;
@@ -90,6 +94,8 @@ function createRuntimeType(extension: Extension, logger: Logger): typeof chrome.
 
       return port;
     },
+    onConnect: new ChromeEvent<(port: chrome.runtime.Port) => void>(),
+    onConnectExternal: new ChromeEvent<(port: chrome.runtime.Port) => void>(),
   };
 }
 
@@ -185,6 +191,7 @@ function createWindowsType(extension: Extension, logger: Logger): typeof chrome.
 
       return Promise.resolve([]);
     },
+    onBoundsChanged: new ChromeEvent<(window: chrome.windows.Window) => void>(),
   };
 }
 
@@ -273,3 +280,57 @@ function createCommandsType(extension: Extension, logger: Logger): typeof chrome
     },
   };
 }
+
+/**
+ * @see https://developer.chrome.com/docs/extensions/reference/api/notifications
+ */
+function createNotificationsType(extension: Extension, logger: Logger): typeof chrome.notifications {
+  // TODO: implement
+  return {
+    create: (...args: unknown[]): string | number => {
+      console.error('notifications.create not implemented', args);
+
+      return -1;
+    },
+    onClosed: new ChromeEvent<(notificationId: string) => void>(),
+    onButtonClicked: new ChromeEvent<(notificationId: string) => void>(),
+    onClicked: new ChromeEvent<(notificationId: string) => void>(),
+  };
+}
+
+/**
+ * @see https://developer.chrome.com/docs/extensions/reference/api/webRequest
+ */
+function createWebRequestType(extension: Extension, logger: Logger): typeof chrome.webRequest {
+  // TODO: implement
+  return {
+    onBeforeRequest: new ChromeEvent<(details: chrome.webRequest.WebRequestDetails) => void>(),
+    onBeforeSendHeaders: new ChromeEvent<(details: chrome.webRequest.WebRequestDetails) => void>(),
+    onHeadersReceived: new ChromeEvent<(details: chrome.webRequest.WebRequestDetails) => void>(),
+    onCompleted: new ChromeEvent<(details: chrome.webRequest.WebRequestDetails) => void>(),
+    onErrorOccurred: new ChromeEvent<(details: chrome.webRequest.WebRequestDetails) => void>(),
+  };
+}
+
+/**
+ * @see https://developer.chrome.com/docs/extensions/reference/api/declarativeNetRequest
+ */
+function createDeclarativeNetRequestType(extension: Extension, logger: Logger): typeof chrome.declarativeNetRequest {
+  // TODO: implement
+  return {
+    getDynamicRules: async (callback?: (rules: chrome.declarativeNetRequest.Rule[]) => void): Promise<chrome.declarativeNetRequest.Rule[]> => {
+      logger.log('declarativeNetRequest.getDynamicRules');
+
+      callback?.([]);
+
+      return Promise.resolve([]);
+    },
+    updateDynamicRules: async (_options: chrome.declarativeNetRequest.UpdateRuleOptions, callback?: Function): Promise<void> => {
+      logger.log('declarativeNetRequest.updateDynamicRules');
+
+      callback?.();
+
+      return Promise.resolve();
+    },
+  };
+}

frontend/browser/injectBrowser.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable func-names */
 import { ConfirmModal, showModal } from '@steambrew/client';
 import React from 'react';
+import { loadScript } from 'shared';
 import { Extension } from '../extension/Extension';
 import { patchFetch } from './corsFetch';
 import { createChrome } from './createChrome';
@@ -17,7 +18,7 @@ export function injectBrowser(context: string, window: Window, extension: Extens
   window.onerror = function (this: WindowEventHandlers, ...args: unknown[]): boolean {
     console.error(`Error in ${extension.manifest.name} - ${context}`, ...args);
 
-    extension.errors.push(`Error in "${extension.manifest.name} - ${context}": ${args.join(' ')}`);
+    extension.logger.errors.push(`Error in "${extension.manifest.name} - ${context}": ${args.join(' ')}`);
 
     // @ts-expect-error ignore
     return originalOnError?.call(this, ...args);
@@ -28,7 +29,7 @@ export function injectBrowser(context: string, window: Window, extension: Extens
   window.onunhandledrejection = function (this: WindowEventHandlers, event): unknown {
     console.error(`Error in ${extension.manifest.name} - ${context}`, event);
 
-    extension.errors.push(`Error in "${extension.manifest.name} - ${context}": ${event.reason}`);
+    extension.logger.errors.push(`Error in "${extension.manifest.name} - ${context}": ${event.reason}`);
 
     return originalOnUnhandledRejection?.call(this, event);
   };
@@ -40,23 +41,26 @@ export function injectBrowser(context: string, window: Window, extension: Extens
 
     console.error(`Error in ${extension.manifest.name} - ${context}`, ...args);
 
-    extension.errors.push(`Error in "${extension.manifest.name} - ${context}": ${args.join(' ')}`);
+    extension.logger.errors.push(`Error in "${extension.manifest.name} - ${context}": ${args.join(' ')}`);
   };
 
   window.importScripts = (...urls: string[]): void => {
-    for (const url of urls) {
-      const script = window.document.createElement('script');
-      script.src = extension.getFileUrl(url) ?? '';
-      window.document.head.appendChild(script);
+    async function asyncLoadScripts(): Promise<void> {
+      for (const url of urls) {
+        // eslint-disable-next-line no-await-in-loop
+        await loadScript(extension.getFileUrl(url) ?? '', window.document);
+      }
     }
+
+    asyncLoadScripts();
   };
 
   patchFetch(window);
 
   window.confirm = (message?: string): boolean => {
     const description = (
       <>
-        <p>Oops looks like the extension {extension.manifest.name} tried to open a confirmation dialog. Sadly, this is not supported.</p>
+        <p>Oops looks like the extension {extension.getName()} tried to open a confirmation dialog. Sadly, this is not supported.</p>
         <p>Original confirmation message was: <strong>{message}</strong></p>
       </>
     );

frontend/components/ExtensionBar/ExtensionButton.tsx

@@ -16,7 +16,7 @@ export function ExtensionButton({ extension }: { readonly extension: Extension;
   const popupContextMenuRef = useRef<ContextMenu | undefined>(undefined);
 
   const { attributes, listeners, setNodeRef, transform, transition, isDragging }
-    = useSortable({ id: extension.manifest.name });
+    = useSortable({ id: extension.getName() });
 
   const style: CSSProperties = {
     transform: CSS.Transform.toString(transform),
@@ -113,7 +113,7 @@ export function ExtensionButton({ extension }: { readonly extension: Extension;
       {...attributes}
       {...listeners}
     >
-      <img src={iconUrl ?? ''} alt={extension.manifest.name} />
+      <img src={iconUrl ?? ''} alt={extension.getName()} />
     </button>
   );
 }

frontend/extension/EnumerableMethods.ts

@@ -0,0 +1,56 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/* eslint-disable @typescript-eslint/no-unsafe-function-type */
+
+// Because of some libraries like `chrome-promise`, we need to make all function on a class enumerable so it can loop through them.
+
+export function enumerateMethods(instance: object): void {
+  const proto = Object.getPrototypeOf(instance) as Record<string, unknown>;
+  const methodNames = getAllMethodNames(instance);
+
+  for (const name of methodNames) {
+    // Only define it if it's not already enumerable on the instance
+    if (!Object.hasOwn(instance, name)) {
+      Object.defineProperty(instance, name, {
+        value: (proto[name] as Function).bind(instance),
+        enumerable: true,
+        writable: true,
+        configurable: true,
+      });
+    }
+  }
+}
+
+function getAllMethodNames(obj: any): string[] {
+  const methods = new Set<string>();
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  let current = obj;
+
+  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+  while (current && current !== Object.prototype) {
+    const props = Object.getOwnPropertyNames(current);
+
+    for (const prop of props) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      if (typeof obj[prop] === 'function' && prop !== 'constructor') {
+        methods.add(prop);
+      }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    current = Object.getPrototypeOf(current);
+  }
+
+  return Array.from(methods);
+}
+
+export function EnumerableMethods<T extends new(...args: any[]) => object>(constructor: T): T {
+  return class extends constructor {
+    constructor(...args: any[]) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      super(...args);
+      enumerateMethods(this);
+    }
+  };
+}

frontend/extension/Locale.ts

@@ -1,14 +1,20 @@
 /* eslint-disable @typescript-eslint/class-methods-use-this */
+import { EnumerableMethods } from './EnumerableMethods';
 import { Extension } from './Extension';
 
-export class Locale {
+type chromeLocale = typeof chrome.i18n;
+
+@EnumerableMethods
+export class Locale implements chromeLocale {
   private messages: Record<string, LanguageRecord> | undefined;
+  readonly #extension: Extension;
 
-  constructor(readonly extension: Extension) {
+  constructor(extension: Extension) {
+    this.#extension = extension;
   }
 
   async initLocale(): Promise<void> {
-    const defaultLocale = this.extension.manifest.default_locale;
+    const defaultLocale = this.#extension.manifest.default_locale;
     if (defaultLocale === undefined) {
       // This extension does not have locales
       return;
@@ -17,11 +23,11 @@ export class Locale {
     const language = navigator.language.split('-')[0];
     let content;
     try {
-      content = await fetch(this.extension.getFileUrl(`/_locales/${language}/messages.json`) ?? '').then(async r => r.text());
+      content = await fetch(this.#extension.getFileUrl(`/_locales/${language}/messages.json`) ?? '').then(async r => r.text());
     } catch {
-      console.debug(`[${this.extension.getName()}] Locale ${language} not found, falling back to default locale (${defaultLocale})`);
+      console.debug(`[${this.#extension.getName()}] Locale ${language} not found, falling back to default locale (${defaultLocale})`);
       // Fallback to default locale (en) if the requested locale doesn't exist
-      content = await fetch(this.extension.getFileUrl(`/_locales/${defaultLocale}/messages.json`) ?? '').then(async r => r.text());
+      content = await fetch(this.#extension.getFileUrl(`/_locales/${defaultLocale}/messages.json`) ?? '').then(async r => r.text());
     }
     this.messages = JSON.parse(content) as Record<string, LanguageRecord>;
   }
@@ -33,7 +39,7 @@ export class Locale {
     }
 
     if (this.messages === undefined) {
-      throw new Error(`[${this.extension.getName()}] Locale not initialized, missing manifest.default_locale?`);
+      throw new Error(`[${this.#extension.getName()}] Locale not initialized, missing manifest.default_locale?`);
     }
 
     if (typeof substitutions === 'string') {