Use new types package and fix some minor typing mistakes

Author: cpiber

package.json

@@ -67,6 +67,7 @@
     "@types/jest": "^30.0.0",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^25.5.0",
+    "@types/webextension-polyfill": "^0.12.5",
     "@typescript-eslint/eslint-plugin": "^8.57.1",
     "@typescript-eslint/parser": "^8.57.1",
     "chalk": "^5.6.2",

pnpm-lock.yaml

@@ -1,9 +1,12 @@
 /* eslint-disable camelcase */
+
+import type { Manifest } from 'webextension-polyfill';
+
 declare global {
   const __VERSION__: string;
 }
 
-const manifest: browser._manifest.WebExtensionManifest = {
+const manifest: Manifest.WebExtensionManifest = {
   manifest_version: 2,
   name: '__MSG_title__',
   description: '__MSG_extensionDescription__',

src/manifest.ts

@@ -1,6 +1,8 @@
 /* eslint-disable camelcase */
 
-const manifest: browser._manifest.WebExtensionManifest = {
+import type { Manifest } from 'webextension-polyfill';
+
+const manifest: Manifest.WebExtensionManifest = {
   manifest_version: 3,
   name: '__MSG_title__',
   description: '__MSG_extensionDescription__',

src/manifest_v3.ts

@@ -19,9 +19,10 @@ if (getBrowserInstance().action) {
 
 // NOTE: not promise-based, because Chrome really doesn't like it, when there are multiple listeners
 // need to return immediately, then call sendResponse manually, otherwise the other listener in offscreen.ts interferes
-getBrowserInstance().runtime.onMessage.addListener((message: string | { [key: string]: any; }, sender, sendResponse) => {
+getBrowserInstance().runtime.onMessage.addListener((message: unknown, sender, sendResponse) => {
   // Return early if this message isn't meant for the background script
-  if (typeof message !== 'string' && message.target !== undefined && message.target !== 'background') {
+  if (message === undefined || message === null) return;
+  if ((typeof message !== 'string' && typeof message !== 'object') || (typeof message === 'object' && 'target' in message && message.target !== 'background')) {
     return;
   }
 

src/scripts/background_script.ts

@@ -1,3 +1,4 @@
+import type { Browser } from 'webextension-polyfill';
 import { Event, Message } from './constants';
 import { clone, parseTypeObject } from './helpers';
 
@@ -31,7 +32,7 @@ export function sendMessage<T>(name: Message, data?: { [key: string]: any; }, ex
 
 export type Listener<R = any, E = any> = (res: R, err: E) => void;
 export function sendEventHandler(event: Event.QUEUE_CHANGE, listener: Listener<{ canNext: boolean, canPrev: boolean; }>, skipOriginCheck?: boolean): void;
-export function sendEventHandler(event: Event.STORAGE_CHANGE, listener: Listener<Parameters<Parameters<typeof browser.storage.onChanged.addListener>[0]>>, skipOriginCheck?: boolean): void;
+export function sendEventHandler(event: Event.STORAGE_CHANGE, listener: Listener<Parameters<Parameters<Browser['storage']['onChanged']['addListener']>[0]>>, skipOriginCheck?: boolean): void;
 export function sendEventHandler(event: Exclude<Event, Event.QUEUE_CHANGE | Event.STORAGE_CHANGE>, listener: Listener, skipOriginCheck?: boolean): void;
 export function sendEventHandler(event: Event, listener: Listener, skipOriginCheck = false) {
   console.dev.debug('Registering remote listener for', event);

src/scripts/helpers/shared/communication.ts

@@ -1,11 +1,13 @@
 import browser from 'webextension-polyfill';
 import { getInformation } from './page/offscreen';
 
-browser.runtime.onMessage.addListener((message: { [key: string]: any; }, sender, sendMessage) => {
-  if (message.target !== 'offscreen') {
-    return false;
+browser.runtime.onMessage.addListener((message: unknown, sender, sendMessage) => {
+  if (message === undefined || message === null) return;
+  if (typeof message !== 'object' || !('target' in message) || message.target !== 'offscreen') {
+    return;
   }
   console.dev.log('Received message for offcanvas', message);
+  if (!('type' in message)) return;
   switch (message.type) {
     case 'getCreatorInformation': {
       getInformation().then(sendMessage);

src/scripts/offscreen.ts

@@ -1,3 +1,4 @@
+import type { Browser } from 'webextension-polyfill';
 import { Event, Message, sendEventHandler, sendMessage } from '../helpers/shared';
 export * from '../helpers/shared';
 
@@ -7,6 +8,6 @@ export function getFromStorage<T>(key: string | string[] | { [key: string]: any;
   return sendMessage<T>(Message.GET_STORAGE, { get: key });
 }
 
-export function onStorageChange(cb: Parameters<typeof browser.storage.onChanged.addListener>[0]) {
+export function onStorageChange(cb: Parameters<Browser['storage']['onChanged']['addListener']>[0]) {
   return sendEventHandler(Event.STORAGE_CHANGE, res => cb(...res));
 }

src/scripts/page/sharedpage.ts

@@ -1,16 +1,17 @@
-import type { knownPages, loadPrefix, navigatePrefix } from '../scripts/page/dispatcher';
+import type { knownPages } from '../scripts/helpers/shared';
+import type { loadPrefix, navigatePrefix } from '../scripts/page/dispatcher';
 
 type prefixes = typeof navigatePrefix | typeof loadPrefix;
 
 declare global {
   type FnArgs<F> = F extends (this: any, ...args: infer R) => any ? R : never;
   type CtrArgs<F> = F extends new (...args: infer R) => any ? R : never;
 
-  type NavigateOrLoadEvent<K extends string, D extends { [key: string]: any } = { [key: string]: any }> = CustomEvent<{ page: K, from: string } & D>;
-  type PageEvent<K extends string> = NavigateOrLoadEvent<K, { more: string | undefined }>;
-  type VideoEvent = NavigateOrLoadEvent<'video', { video: string }>;
+  type NavigateOrLoadEvent<K extends string, D extends { [key: string]: any; } = { [key: string]: any; }> = CustomEvent<{ page: K, from: string; } & D>;
+  type PageEvent<K extends string> = NavigateOrLoadEvent<K, { more: string | undefined; }>;
+  type VideoEvent = NavigateOrLoadEvent<'video', { video: string; }>;
   type HomeEvent = NavigateOrLoadEvent<'home'>;
-  type CreatorEvent = NavigateOrLoadEvent<'creator', { who: string, more: string | undefined }>;
+  type CreatorEvent = NavigateOrLoadEvent<'creator', { who: string, more: string | undefined; }>;
   interface Document {
     addEventListener<K extends typeof knownPages[number], P extends prefixes>(type: `${P}-${K}`, listener: (this: Document, ev: PageEvent<K>) => any, options?: boolean | AddEventListenerOptions): void;
     addEventListener<P extends prefixes>(type: `${P}-video`, listener: (this: Document, ev: VideoEvent) => any, options?: boolean | AddEventListenerOptions): void;

src/types/misc.d.ts

@@ -3,7 +3,4 @@ declare module '*.svg' {
   export default content;
 }
 
-declare module 'webextension-polyfill' {
-  const b: typeof browser;
-  export default b;
-}
+declare module 'webext-dynamic-content-scripts' { }