feat(extension): add options page for managing allowed sites

Author: zhensherlock

package.json

@@ -30,7 +30,7 @@
     "adm-zip": "^0.5.16",
     "copy-webpack-plugin": "^13.0.0",
     "css-loader": "^7.1.2",
-    "eslint": "^9.24.0",
+    "eslint": "^9.25.1",
     "eslint-plugin-prettier": "^5.2.6",
     "file-loader": "^6.2.0",
     "mini-css-extract-plugin": "^2.9.2",
@@ -42,7 +42,7 @@
     "ts-loader": "^9.5.2",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.29.1",
-    "webpack": "^5.99.5",
+    "webpack": "^5.99.6",
     "webpack-cli": "^6.0.1",
     "webpack-merge": "^6.0.1"
   },

packages/chrome-extension/config/webpack.config.js

@@ -12,6 +12,7 @@ const config = (env, argv) => {
       contentScript: PATHS.src + '/contentScript.ts',
       background: PATHS.src + '/background.ts',
       injectedScript: PATHS.src + '/injectedScript.ts',
+      options: PATHS.src + '/options.ts',
     },
     devtool: isProduction ? false : 'source-map',
     optimization: {

packages/chrome-extension/src/background.ts

@@ -1,3 +1,5 @@
+import { checkAllowedStatus } from '@vue-devtools-unlocker/shared';
+
 // Store Vue DevTools unlock status for each tab
 const tabStatus: Record<number, unknown> = {};
 
@@ -14,18 +16,41 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
 // Listen for popup open event
 chrome.runtime.onConnect.addListener((port) => {
   if (port.name === 'popup') {
+    port.postMessage({
+      type: 'VueDevtoolsStatus',
+      payload: {
+        loading: true,
+      },
+    });
     // When popup connects, query the current active tab
     chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
       if (tabs[0] && tabs[0].id) {
         const tabId = tabs[0].id;
-        // Send tab status to popup
-        port.postMessage({
-          type: 'VueDevtoolsStatus',
-          payload: tabStatus[tabId] || {
-            success: false,
-            message: 'No Vue application detected or DevTools not unlocked on this page',
-          },
-        });
+        let retryCount = 0;
+        const MAX_RETRIES = 5; // (5 * 500ms = 2500ms)
+
+        const checkStatus = () => {
+          if (tabStatus[tabId]) {
+            port.postMessage({
+              type: 'VueDevtoolsStatus',
+              payload: tabStatus[tabId],
+            });
+          } else if (retryCount < MAX_RETRIES) {
+            retryCount++;
+            setTimeout(checkStatus, 500);
+          } else {
+            // 超时后发送错误状态
+            port.postMessage({
+              type: 'VueDevtoolsStatus',
+              payload: {
+                success: false,
+                message: 'Unable to detect Vue application status. Please refresh the page and try again.',
+              },
+            });
+          }
+        };
+
+        checkStatus();
       }
     });
   }
@@ -34,3 +59,10 @@ chrome.runtime.onConnect.addListener((port) => {
 chrome.tabs.onRemoved.addListener((tabId) => {
   delete tabStatus[tabId];
 });
+
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+  delete tabStatus[tabId];
+  if (changeInfo.status === 'complete' && tab.url) {
+    checkAllowedStatus(tabId, tab.url);
+  }
+});

packages/chrome-extension/src/contentScript.ts

@@ -1,10 +1,24 @@
 import { injectScriptFile } from '@vue-devtools-unlocker/shared';
 
-injectScriptFile('injectedScript.js');
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.type === 'CheckIsAllowed' && message.isAllowed) {
+    injectScriptFile('injectedScript.js');
+    window.addEventListener('message', (event) => {
+      if (event.data?.source === 'vue-devtools-unlocker') {
+        chrome.runtime.sendMessage(event.data);
+      }
+    });
 
-window.addEventListener('message', (event) => {
-  if (event.data?.source === 'vue-devtools-unlocker') {
-    console.log('post message', event.data);
-    chrome.runtime.sendMessage(event.data);
+    sendResponse({ success: true });
+  } else {
+    chrome.runtime.sendMessage({
+      source: 'vue-devtools-unlocker',
+      type: 'VueDevtoolsStatus',
+      payload: {
+        success: false,
+        isNotAllowed: true,
+        message: 'This page is not allowed to use Vue DevTools.',
+      },
+    });
   }
 });

packages/chrome-extension/src/options.scss

@@ -0,0 +1,84 @@
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --primary-color: #42b883;
+  --secondary-color: #35495e;
+  --background-color: #f8f8f8;
+  --text-color: #2c3e50;
+  --border-color: #e0e0e0;
+  --success-color: #42b883;
+  --error-color: #ff5252;
+}
+
+html {
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Helvetica,
+    Arial,
+    sans-serif;
+}
+
+body {
+  width: 400px;
+  color: var(--text-color);
+}
+
+.container {
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+  color: var(--secondary-color);
+  margin-bottom: 20px;
+}
+
+main {
+  margin-bottom: 20px;
+
+  label {
+    display: block;
+    margin-bottom: 10px;
+    color: var(--text-color);
+  }
+
+  textarea {
+    width: 100%;
+    height: 150px;
+    padding: 10px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    font-family: monospace;
+    resize: none;
+  }
+
+  .help-text {
+    font-size: 12px;
+    color: #666;
+    margin-top: 5px;
+  }
+}
+
+button {
+  background: var(--primary-color);
+  color: #fff;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &:hover {
+    background: #3aa876;
+  }
+}
+

packages/chrome-extension/src/options.ts

@@ -0,0 +1,27 @@
+import { getAllowedSites, setAllowedSites } from '@vue-devtools-unlocker/shared';
+import '@/options.scss';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const textarea = document.getElementById('allowedSites') as HTMLTextAreaElement;
+  const saveButton = document.getElementById('save') as HTMLButtonElement;
+
+  // Load saved settings
+  getAllowedSites((text) => {
+    textarea.value = text;
+  });
+
+  // Save settings
+  saveButton.addEventListener('click', () => {
+    const sites = textarea.value
+      .split('\n')
+      .map((site) => site.trim())
+      .filter((site) => site.length > 0);
+
+    setAllowedSites(sites, () => {
+      saveButton.textContent = 'Saved!';
+      setTimeout(() => {
+        saveButton.textContent = 'Save Settings';
+      }, 2000);
+    });
+  });
+});

packages/chrome-extension/src/popup.scss

@@ -25,11 +25,10 @@ body {
   color: var(--text-color);
 }
 
-.app {
+.container {
   display: flex;
   flex-direction: column;
   background-color: var(--background-color);
-  min-height: 200px;
   overflow: hidden;
 }
 
@@ -65,14 +64,26 @@ main {
     background-color: white;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
     border: 1px solid var(--border-color);
+
+    h3 {
+      margin-bottom: 8px;
+    }
   }
 
   .status-success {
     border-left: 4px solid var(--success-color);
+
+    h3 {
+      color: var(--success-color);
+    }
   }
 
   .status-error {
     border-left: 4px solid var(--error-color);
+
+    h3 {
+      color: var(--error-color);
+    }
   }
 
   .loading {
@@ -81,14 +92,29 @@ main {
     gap: 10px;
   }
 
-  .version-tag {
-    display: inline-block;
-    padding: 2px 6px;
-    background-color: var(--primary-color);
-    color: white;
-    border-radius: 4px;
+  .version-info {
+    margin-top: 8px;
+
+    .version-tag {
+      display: inline-block;
+      padding: 2px 6px;
+      background-color: var(--primary-color);
+      color: white;
+      border-radius: 4px;
+      font-size: 12px;
+      margin-left: 6px;
+    }
+  }
+
+  .guide-text {
+    margin-top: 8px;
     font-size: 12px;
-    margin-left: 6px;
+    color: #666;
+  }
+
+  .guide-steps {
+    margin-top: 4px;
+    padding-left: 20px;
   }
 
   .spinner {
@@ -112,16 +138,19 @@ footer {
   text-align: center;
   font-size: 12px;
   border-top: 1px solid var(--border-color);
+  display: flex;
+  justify-content: center;
+  gap: 16px;
 
-  .github-link {
+  .github-link, .settings-link {
     color: var(--secondary-color);
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 4px;
   }
 
-  .github-link:hover {
+  .github-link:hover, .settings-link:hover {
     text-decoration: underline;
   }
 }