feat: support window/tab teleport data (#3)

* feat: support window/tab teleport data

* chore: update version

Author: jevin98

entrypoints/content.ts

@@ -0,0 +1,13 @@
+export default defineContentScript({
+  matches: ['*://*/*'],
+
+  registration: 'manifest',
+
+  main() {
+    // Receive data transmitted from the tab page being operated
+    // And send it to the devTools page for rendering
+    browser.runtime.onMessage.addListener((data) => {
+      browser.runtime.sendMessage(data)
+    })
+  },
+})

entrypoints/devtools-panel/hooks/useDevToolsPanel.ts

@@ -2,6 +2,7 @@ import type { CssDiffsType, SelectedElType } from '../types'
 import { useClipboard } from '@vueuse/core'
 import { ElMessage } from 'element-plus'
 import { useI18n } from 'vue-i18n'
+import SM from '../message'
 import { formatStyle, type FormatStyleValue } from '../utils'
 
 export function useDevToolsPanel() {
@@ -31,20 +32,40 @@ export function useDevToolsPanel() {
         `(${formatStyle.toString()})($0)`,
         (result: FormatStyleValue, isException) => {
           if (!isException && result != null && isLoadComplete.value) {
-            saveSelectedEl(result)
+            const valueType = !selectedEl.length ? 'left' : 'right'
+
+            saveSelectedEl({ ...result, valueType })
           }
         },
       )
     })
+
+    // Receive the <selected element> transmitted from the tab being operated
+    browser.runtime.onMessage.addListener((data: Array<SelectedElType>) => {
+      selectedEl.length = 0
+
+      if (!data.length) {
+        cssDiffs.length = 0
+        return
+      }
+
+      selectedEl.push(...data)
+
+      if (selectedEl.length === 2) {
+        compareSelectedEl()
+      }
+    })
   })
 
-  function saveSelectedEl(result: FormatStyleValue) {
+  function saveSelectedEl(result: SelectedElType) {
     if (selectedEl.length === 2) {
       return
     }
 
-    const valueType = !selectedEl.length ? 'left' : 'right'
-    selectedEl.push({ ...result, valueType })
+    selectedEl.push(result)
+
+    // Send selected data to other windows/tabs
+    SM.send(selectedEl)
 
     if (selectedEl.length === 2) {
       compareSelectedEl()
@@ -54,6 +75,9 @@ export function useDevToolsPanel() {
   function handleClearSelection() {
     selectedEl.length = 0
     cssDiffs.length = 0
+
+    // Send selected data to other windows/tabs
+    SM.send([])
   }
 
   function compareSelectedEl() {

entrypoints/devtools-panel/message.ts

@@ -0,0 +1,38 @@
+import type { SelectedElType } from './types'
+
+interface _Window extends chrome.windows.Window {
+  tabs: Array<chrome.tabs.Tab>
+}
+
+class SendMessage {
+  private currentTabId: number | undefined
+  constructor() {
+    this.init()
+  }
+
+  private async init() {
+    const [currentTab] = await browser.tabs.query({ active: true })
+
+    this.currentTabId = currentTab.id!
+  }
+
+  public async send(data: Array<SelectedElType>) {
+    const windows = await browser.windows.getAll({ populate: true });
+
+    (windows as unknown as Array<_Window>).forEach((window) => {
+      for (const tab of window.tabs) {
+        if (tab.id !== this.currentTabId) {
+          // Send selected data to other windows/tabs
+          browser.tabs.sendMessage(
+            tab.id!,
+            data,
+          )
+        }
+      }
+    })
+  }
+}
+
+const SM = new SendMessage()
+
+export default SM

package.json

@@ -8,10 +8,15 @@
   "scripts": {
     "dev": "wxt",
     "dev:firefox": "wxt -b firefox",
-    "build": "wxt build",
+    "dev:edge": "wxt -b edge",
+    "build": "pnpm run --filter . --parallel \"/^build:.*/\"",
+    "build:chrome": "wxt build -b chrome",
     "build:firefox": "wxt build -b firefox",
-    "zip": "wxt zip",
-    "zip:firefox": "wxt zip -b firefox",
+    "build:edge": "wxt build -b edge",
+    "zip": "pnpm run --filter . --parallel \"/^zip:.*/\"",
+    "zip:chrome": "wxt zip -b chrome",
+    "zip:firefox": "wxt zip -b firefox --mv3",
+    "zip:edge": "wxt zip -b edge",
     "compile": "vue-tsc --noEmit",
     "postinstall": "wxt prepare"
   },

wxt.config.ts

@@ -1,7 +1,10 @@
-import { defineConfig } from 'wxt';
+import { defineConfig } from 'wxt'
 
 // See https://wxt.dev/api/config.html
 export default defineConfig({
   extensionApi: 'chrome',
+  manifest: {
+    permissions: ['nativeMessaging', 'tabs', 'activeTab', 'scripting'],
+  },
   modules: ['@wxt-dev/module-vue'],
-});
+})