Prune chrome-api-wrapper.ts

.github/workflows/ci.yml

@@ -6,7 +6,7 @@ permissions:
   contents: read
 
 env:
-  NODE_VERSION: "20"
+  NODE_VERSION: '20'
 
 jobs:
   ci-ChromeExtension:

manifest.json

@@ -9,25 +9,35 @@
   },
   "action": {
     "default_title": "Chrome Extension React",
-    "default_popup": "popup/index.html",
+    "default_popup": "src/popup/index.html",
     "default_icon": "assets/icons/icon-34.png"
   },
   "content_scripts": [
     {
-      "js": ["content/index.js"],
-      "matches": ["*://*/*"]
+      "js": [
+        "src/content/index.ts"
+      ],
+      "matches": [
+        "*://*/*"
+      ]
     }
   ],
   "background": {
-    "service_worker": "background/index.js"
+    "service_worker": "src/background/index.ts"
   },
   "web_accessible_resources": [
     {
-      "resources": ["assets/icons/*.png"],
+      "resources": [
+        "assets/icons/*.png"
+      ],
       "matches": [],
       "extension_ids": []
     }
   ],
-  "permissions": ["storage", "tabs", "activeTab"],
+  "permissions": [
+    "storage",
+    "tabs",
+    "activeTab"
+  ],
   "host_permissions": []
 }

package.json

@@ -2,6 +2,7 @@
   "name": "chrome-extension-boilerplate-react-vite",
   "version": "1.0.0",
   "type": "module",
+  "license": "MIT",
   "scripts": {
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",

src/common/chrome-api-wrapper.ts

@@ -3,14 +3,6 @@ export enum ChromeMessageType {
   SCRAPING_RESULTS
 }
 
-// https://developer.chrome.com/docs/extensions/reference/api/storage#storage_areas
-export enum StorageArea {
-  LOCAL = 'local',
-  MANAGED = 'managed',
-  SESSION = 'session',
-  SYNC = 'sync'
-}
-
 export class ChromeMessage<T> {
   readonly type: ChromeMessageType;
   readonly payload: T;
@@ -22,46 +14,6 @@ export class ChromeMessage<T> {
 }
 
 export class ChromeApiWrapper {
-  public static async setStorageItem<T>(key: string, value: T, area: StorageArea): Promise<void> {
-    const storage = this.getStorageArea(area);
-
-    const items = Object.fromEntries([[key, JSON.stringify(value)]]);
-    await storage.set(items);
-  }
-
-  public static async getStorageItem<T>(key: string, area: StorageArea): Promise<T | null> {
-    const storage = this.getStorageArea(area);
-    const items = await storage.get(key);
-
-    const item = items[key];
-    if (item === undefined) {
-      return null;
-    }
-
-    return JSON.parse(item) as T;
-  }
-
-  public static async removeStorageItem(key: string, area: StorageArea): Promise<void> {
-    const storage = this.getStorageArea(area);
-    await storage.remove(key);
-  }
-
-  public static sendRuntimeMessage<T>(message: ChromeMessage<T>): Promise<void> {
-    return chrome.runtime.sendMessage(chrome.runtime.id, message);
-  }
-
-  public static setOnRuntimeMessageListener<T>(
-    type: ChromeMessageType,
-    callback: (message: ChromeMessage<T>) => boolean
-  ): void {
-    chrome.runtime.onMessage.addListener((message: ChromeMessage<T>) => {
-      if (message.type === undefined || message.type !== type) {
-        return false;
-      }
-      return callback(message);
-    });
-  }
-
   public static async sendTabMessage<T>(message: ChromeMessage<T>): Promise<void> {
     const currentTab = await this.getCurrentTab();
     if (currentTab == null) {
@@ -88,19 +40,4 @@ export class ChromeApiWrapper {
 
     return null;
   }
-
-  private static getStorageArea(area: StorageArea): chrome.storage.StorageArea {
-    switch (area) {
-      case StorageArea.LOCAL:
-        return chrome.storage.local;
-      case StorageArea.MANAGED:
-        return chrome.storage.managed;
-      case StorageArea.SESSION:
-        return chrome.storage.session;
-      case StorageArea.SYNC:
-        return chrome.storage.sync;
-      default:
-        throw new Error(`Unknown storage area: ${area}`);
-    }
-  }
 }

src/content/index.ts

@@ -1,10 +1,10 @@
-import {ChromeApiWrapper, ChromeMessage, ChromeMessageType} from '../common/chrome-api-wrapper';
+import {ChromeMessage, ChromeMessageType} from '../common/chrome-api-wrapper';
 import {ScraperCommand, ScraperMessage} from '../common/types/scraper';
 
 async function handleScrapCommand() {
   const pageTitle = document.title;
   const message = new ChromeMessage(ChromeMessageType.SCRAPING_RESULTS, pageTitle);
-  await ChromeApiWrapper.sendRuntimeMessage(message);
+  await chrome.runtime.sendMessage(chrome.runtime.id, message);
 }
 
 console.log('Chrome plugin content script loaded');

src/popup/features/HomePage/HomePage.tsx

@@ -7,8 +7,7 @@ import {ReactElement, useEffect, useState} from 'react';
 import {
   ChromeApiWrapper,
   ChromeMessage,
-  ChromeMessageType,
-  StorageArea
+  ChromeMessageType
 } from '../../../common/chrome-api-wrapper';
 import {ScraperCommand, ScraperMessage} from '../../../common/types/scraper';
 import PopupContent from '../../components/PopupContent/PopupContent';
@@ -31,35 +30,37 @@ export default function HomePage(): ReactElement {
   }
 
   useEffect(() => {
-    ChromeApiWrapper.getStorageItem<string>(CACHE_KEY, StorageArea.SESSION).then((cachedTitle) => {
+    chrome.storage.session.get(CACHE_KEY).then((items) => {
+      const cachedTitle = items[CACHE_KEY];
       setScrapedPageTitle(cachedTitle ?? '');
     });
 
-    ChromeApiWrapper.setOnRuntimeMessageListener<string>(
-      ChromeMessageType.SCRAPING_RESULTS,
-      (message) => {
-        ChromeApiWrapper.setStorageItem(CACHE_KEY, message.payload, StorageArea.SESSION);
-        setScrapedPageTitle(message.payload);
-        setDisableScrapButton(false);
+    chrome.runtime.onMessage.addListener((message: ChromeMessage<string>) => {
+      if (message.type !== ChromeMessageType.SCRAPING_RESULTS) {
         return false;
       }
-    );
+
+      chrome.storage.session.set({[CACHE_KEY]: message.payload});
+      setScrapedPageTitle(message.payload);
+      setDisableScrapButton(false);
+      return false;
+    });
   }, []);
 
   return (
     <>
       <PopupHeader />
       <PopupContent>
-        <Stack alignItems='center' spacing={1}>
-          <Box alignItems='center'>
+        <Stack alignItems="center" spacing={1}>
+          <Box alignItems="center">
             <h1>My Chromium extension</h1>
           </Box>
 
           <h1>Scraped title: {scrapedPageTitle}</h1>
 
           <Button
-            className='scrap-button'
-            variant='contained'
+            className="scrap-button"
+            variant="contained"
             disabled={disableScrapButton}
             onClick={scrap}
           >