From da5e76aae7120ef55efa5783b00507ea5ec132b6 Mon Sep 17 00:00:00 2001
From: johnathan <952508490@qq.com>
Date: Wed, 25 Jun 2025 14:59:37 +0800
Subject: [PATCH] Register AppContext & Format style cell

---
 shim.d.ts                                     |  4 --
 src/background/main.ts                        |  2 +
 src/components/AmazonDetailDescription.vue    |  2 +-
 src/components/ImageLink.vue                  |  2 +-
 src/components/Logo.vue                       |  2 +-
 src/components/ReviewCard.vue                 |  2 +-
 src/components/ReviewPreview.vue              |  2 +-
 src/composables/useAppContext.ts              |  4 --
 src/composables/useWebExtensionStorage.ts     |  4 +-
 src/contentScripts/index.ts                   |  1 +
 src/global.d.ts                               |  4 ++
 src/logic/common-setup.ts                     |  5 +-
 src/options/main.ts                           |  3 +
 src/options/views/AmazonResultTable.vue       |  2 +-
 src/router/index.ts                           | 22 +++---
 src/sidepanel/main.ts                         |  3 +
 .../views/AmazonEntries/ReviewPageEntry.vue   |  2 +-
 .../views/AmazonEntries/SearchPageEntry.vue   |  2 +-
 src/sidepanel/views/HomedepotSidepanel.vue    |  2 +-
 webext-bridge/src/sidepanel.ts                | 69 +------------------
 20 files changed, 39 insertions(+), 100 deletions(-)
 delete mode 100644 src/composables/useAppContext.ts

diff --git a/shim.d.ts b/shim.d.ts
index df546da..d49e992 100644
--- a/shim.d.ts
+++ b/shim.d.ts
@@ -17,7 +17,3 @@ declare module 'webext-bridge' {
     >;
   }
 }
-
-declare global {
-  type AppContext = 'options' | 'sidepanel';
-}
diff --git a/src/background/main.ts b/src/background/main.ts
index dbe4f85..c5422b7 100644
--- a/src/background/main.ts
+++ b/src/background/main.ts
@@ -11,6 +11,8 @@ if (import.meta.hot) {
   import('./contentScriptHMR');
 }
 
+Object.assign(self, { appContext: 'background' });
+
 // remove or turn this off if you don't use side panel
 const USE_SIDE_PANEL = true;
 
diff --git a/src/components/AmazonDetailDescription.vue b/src/components/AmazonDetailDescription.vue
index 34f77c8..e832f4b 100644
--- a/src/components/AmazonDetailDescription.vue
+++ b/src/components/AmazonDetailDescription.vue
@@ -36,7 +36,7 @@ defineProps<{ model: AmazonDetailItem }>();
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .review-item-footer {
   display: flex;
   flex-direction: row-reverse;
diff --git a/src/components/ImageLink.vue b/src/components/ImageLink.vue
index 593cbf4..a45fd6d 100644
--- a/src/components/ImageLink.vue
+++ b/src/components/ImageLink.vue
@@ -62,7 +62,7 @@ onUnmounted(() => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .link-text {
   cursor: default;
   font-family: v-mono;
diff --git a/src/components/Logo.vue b/src/components/Logo.vue
index c653ba9..1732eb5 100644
--- a/src/components/Logo.vue
+++ b/src/components/Logo.vue
@@ -10,7 +10,7 @@
   </a>
 </template>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .icon {
   display: block;
   color: #333;
diff --git a/src/components/ReviewCard.vue b/src/components/ReviewCard.vue
index 38baf7a..497c118 100644
--- a/src/components/ReviewCard.vue
+++ b/src/components/ReviewCard.vue
@@ -18,7 +18,7 @@ defineProps<{
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .image-link-container {
   display: flex;
   flex-direction: column;
diff --git a/src/components/ReviewPreview.vue b/src/components/ReviewPreview.vue
index a85b804..5b746e0 100644
--- a/src/components/ReviewPreview.vue
+++ b/src/components/ReviewPreview.vue
@@ -155,7 +155,7 @@ const handleExport = () => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .review-list {
   display: flex;
   flex-direction: column;
diff --git a/src/composables/useAppContext.ts b/src/composables/useAppContext.ts
deleted file mode 100644
index 068fc30..0000000
--- a/src/composables/useAppContext.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export function useAppContext() {
-  const appContext = document.location.pathname.split('/')[2] as AppContext;
-  return { appContext };
-}
diff --git a/src/composables/useWebExtensionStorage.ts b/src/composables/useWebExtensionStorage.ts
index 6f28c7e..8cdb40f 100644
--- a/src/composables/useWebExtensionStorage.ts
+++ b/src/composables/useWebExtensionStorage.ts
@@ -6,7 +6,6 @@ import { storage } from 'webextension-polyfill';
 import type { RemovableRef, StorageLikeAsync, UseStorageAsyncOptions } from '@vueuse/core';
 import type { Ref } from 'vue-demi';
 import type { Storage } from 'webextension-polyfill';
-import { useAppContext } from './useAppContext';
 
 export type WebExtensionStorageOptions<T> = UseStorageAsyncOptions<T>;
 
@@ -121,8 +120,7 @@ export function useWebExtensionStorage<T>(
         return;
       }
       if (typeof listenToStorageChanges === 'string') {
-        const { appContext: context } = useAppContext();
-        if (listenToStorageChanges !== context) {
+        if (listenToStorageChanges !== appContext) {
           return;
         }
       }
diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts
index a757005..cd5f2dd 100644
--- a/src/contentScripts/index.ts
+++ b/src/contentScripts/index.ts
@@ -1,4 +1,5 @@
 // Firefox `browser.tabs.executeScript()` requires scripts return a primitive value
 (() => {
+  Object.assign(self, { appContext: 'content script' });
   import('./html-to-image');
 })();
diff --git a/src/global.d.ts b/src/global.d.ts
index 2ae7115..e4145b6 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -9,6 +9,10 @@ declare module '*.vue' {
   export default component;
 }
 
+declare type AppContext = 'options' | 'sidepanel' | 'background' | 'content script';
+
+declare const appContext: AppContext;
+
 declare interface Chrome {
   sidePanel?: {
     setPanelBehavior: (options: { openPanelOnActionClick: boolean }) => void;
diff --git a/src/logic/common-setup.ts b/src/logic/common-setup.ts
index cbd5a60..be7abc9 100644
--- a/src/logic/common-setup.ts
+++ b/src/logic/common-setup.ts
@@ -1,5 +1,4 @@
 import type { App } from 'vue';
-import { useAppContext } from '~/composables/useAppContext';
 import { router } from '~/router';
 
 /**
@@ -7,11 +6,9 @@ import { router } from '~/router';
  * @param app Vue app
  */
 export function setupApp(app: App) {
-  const { appContext: context } = useAppContext();
-
   // Inject a globally available `$app` object in template
   app.config.globalProperties.$app = {
-    context,
+    context: appContext,
   };
 
   // Provide access to `app` in script setup with `const app = inject('app')`
diff --git a/src/options/main.ts b/src/options/main.ts
index 50823b8..98b63a3 100644
--- a/src/options/main.ts
+++ b/src/options/main.ts
@@ -2,6 +2,9 @@ import App from './App.vue';
 import { setupApp } from '~/logic/common-setup';
 import '../styles';
 
+// This is the options page of the extension.
+Object.assign(self, { appContext: 'options' });
+
 const app = createApp(App);
 setupApp(app);
 app.mount('#app');
diff --git a/src/options/views/AmazonResultTable.vue b/src/options/views/AmazonResultTable.vue
index 2ed4e41..4e1ea3d 100644
--- a/src/options/views/AmazonResultTable.vue
+++ b/src/options/views/AmazonResultTable.vue
@@ -370,7 +370,7 @@ const handleClearData = async () => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .result-table {
   width: 100%;
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index 1b21a35..470bde3 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,10 +5,9 @@ import {
   createMemoryHistory,
   RouteRecordRaw,
 } from 'vue-router';
-import { useAppContext } from '~/composables/useAppContext';
 import { site } from '~/logic/storages/global';
 
-const routeObj: Record<AppContext, RouteRecordRaw[]> = {
+const routeObj: Record<'sidepanel' | 'options', RouteRecordRaw[]> = {
   options: [
     { path: '/', redirect: `/${site.value}` },
     { path: '/amazon', component: () => import('~/options/views/AmazonResultTable.vue') },
@@ -23,12 +22,17 @@ const routeObj: Record<AppContext, RouteRecordRaw[]> = {
 
 export const router: Plugin = {
   install(app) {
-    const { appContext: context } = useAppContext();
-    const routes = routeObj[context];
-    const router = createRouter({
-      history: context === 'sidepanel' ? createMemoryHistory() : createWebHashHistory(),
-      routes,
-    });
-    app.use(router);
+    switch (appContext) {
+      case 'sidepanel':
+      case 'options':
+        const routes = routeObj[appContext];
+        const router = createRouter({
+          history: appContext === 'sidepanel' ? createMemoryHistory() : createWebHashHistory(),
+          routes,
+        });
+        app.use(router);
+      default:
+        break;
+    }
   },
 };
diff --git a/src/sidepanel/main.ts b/src/sidepanel/main.ts
index 50823b8..64e6c75 100644
--- a/src/sidepanel/main.ts
+++ b/src/sidepanel/main.ts
@@ -2,6 +2,9 @@ import App from './App.vue';
 import { setupApp } from '~/logic/common-setup';
 import '../styles';
 
+// This is the sidepanel page of the extension.
+Object.assign(self, { appContext: 'sidepanel' });
+
 const app = createApp(App);
 setupApp(app);
 app.mount('#app');
diff --git a/src/sidepanel/views/AmazonEntries/ReviewPageEntry.vue b/src/sidepanel/views/AmazonEntries/ReviewPageEntry.vue
index 0b84d7e..4e35b1f 100644
--- a/src/sidepanel/views/AmazonEntries/ReviewPageEntry.vue
+++ b/src/sidepanel/views/AmazonEntries/ReviewPageEntry.vue
@@ -111,7 +111,7 @@ const updateReviews = (params: { asin: string; reviews: AmazonReview[] }) => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .review-page-entry {
   width: 100%;
   height: 100%;
diff --git a/src/sidepanel/views/AmazonEntries/SearchPageEntry.vue b/src/sidepanel/views/AmazonEntries/SearchPageEntry.vue
index 57a5bc5..f0a0585 100644
--- a/src/sidepanel/views/AmazonEntries/SearchPageEntry.vue
+++ b/src/sidepanel/views/AmazonEntries/SearchPageEntry.vue
@@ -128,7 +128,7 @@ const handleInterrupt = () => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .search-page-entry {
   width: 100%;
   display: flex;
diff --git a/src/sidepanel/views/HomedepotSidepanel.vue b/src/sidepanel/views/HomedepotSidepanel.vue
index 944cdca..14cf7c7 100644
--- a/src/sidepanel/views/HomedepotSidepanel.vue
+++ b/src/sidepanel/views/HomedepotSidepanel.vue
@@ -81,7 +81,7 @@ const handleInterrupt = () => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .homedepot-sidepanel {
   display: flex;
   flex-direction: column;
diff --git a/webext-bridge/src/sidepanel.ts b/webext-bridge/src/sidepanel.ts
index bf95848..097aab3 100644
--- a/webext-bridge/src/sidepanel.ts
+++ b/webext-bridge/src/sidepanel.ts
@@ -1,7 +1,6 @@
 import { createEndpointRuntime } from './internal/endpoint-runtime';
 import { createStreamWirings } from './internal/stream';
 import { createPersistentPort } from './internal/persistent-port';
-import browser from 'webextension-polyfill';
 
 // Chrome API types for sidepanel
 declare global {
@@ -23,7 +22,8 @@ declare global {
       getOptions: (options: { tabId?: number }) => Promise<{ path?: string }>;
     };
   }
-  var chrome: Chrome | undefined;
+
+  var chrome: Chrome;
 }
 
 const port = createPersistentPort('sidepanel');
@@ -31,71 +31,6 @@ const endpointRuntime = createEndpointRuntime('sidepanel', (message) => port.pos
 
 port.onMessage(endpointRuntime.handleMessage);
 
-/**
- * Set up Chrome's sidepanel API for Manifest V3 extensions
- *
- * This function initializes the Chrome sidepanel API and configures its behavior.
- * Use this in your sidepanel entry point to ensure the sidepanel works correctly.
- *
- * Example usage in your sidepanel script:
- *
- * ```ts
- * import { setupSidepanel, sendMessage } from 'webext-bridge/sidepanel'
- *
- * // Initialize the sidepanel
- * setupSidepanel({ defaultPath: 'sidepanel.html' })
- *
- * // Send a message to background
- * sendMessage('get-data', { key: 'value' }, 'background')
- *   .then(response => console.log(response))
- *
- * // Listen for messages from other contexts
- * onMessage('update-sidebar', (message) => {
- *   console.log(message.data)
- *   // Update sidebar UI
- * })
- * ```
- *
- * @param options Configuration options for the sidepanel
- * @param options.defaultPath Default HTML path for the sidepanel
- */
-export function setupSidepanel(options: { defaultPath?: string } = {}) {
-  if (typeof chrome !== 'undefined' && chrome.sidePanel) {
-    // Chrome specific sidepanel API
-    chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
-
-    if (options.defaultPath) {
-      chrome.sidePanel.setOptions({ path: options.defaultPath });
-    }
-  }
-}
-
-/**
- * 注册侧边栏显示事件的回调函数
- * @param callback 当侧边栏显示时要执行的回调函数
- * @returns 用于移除事件监听器的函数
- */
-export function onSidepanelShown(callback: () => void): () => void {
-  if (typeof chrome !== 'undefined' && chrome.sidePanel && chrome.sidePanel.onShown) {
-    chrome.sidePanel.onShown.addListener(callback);
-    return () => chrome.sidePanel.onShown.removeListener(callback);
-  }
-  return () => {};
-}
-
-/**
- * 注册侧边栏隐藏事件的回调函数
- * @param callback 当侧边栏隐藏时要执行的回调函数
- * @returns 用于移除事件监听器的函数
- */
-export function onSidepanelHidden(callback: () => void): () => void {
-  if (typeof chrome !== 'undefined' && chrome.sidePanel && chrome.sidePanel.onHidden) {
-    chrome.sidePanel.onHidden.addListener(callback);
-    return () => chrome.sidePanel.onHidden.removeListener(callback);
-  }
-  return () => {};
-}
-
 export function isSidepanelSupported(): boolean {
   return !!chrome.sidePanel;
 }