feat: firefox extension (#446)

.gitignore

@@ -91,6 +91,8 @@ components.d.ts
 
 packages/chrome-extension/overlay/**/*
 packages/chrome-extension/client/**/*
+packages/firefox-extension/client/**/*
+packages/firefox-extension/overlay/**/*
 packages/electron/client/**/*
 packages/vite/src/overlay/**/*
 packages/vite/client/**/*

package.json

@@ -43,7 +43,9 @@
     "build:vite": "turbo build --filter=./packages/vite...",
     "build:devtools-api": "turbo build --filter=./packages/devtools-api...",
     "build:chrome-extension": "turbo build --filter=./packages/chrome-extension...",
+    "build:firefox-extension": "turbo build --filter=./packages/firefox-extension...",
     "dev:chrome-extension": "turbo dev --filter=./packages/chrome-extension",
+    "dev:firefox-extension": "turbo dev --filter=./packages/firefox-extension",
     "dev:ui-story": "turbo dev --filter=./packages/ui-story",
     "prepare:type": "turbo prepare:type --filter='./packages/*'",
     "dev": "NODE_OPTIONS=\"--max-old-space-size=8192\" nr prepare:type && nr build:ui && turbo stub --concurrency 20",
@@ -66,12 +68,14 @@
     "docs": "pnpm -C docs run docs:dev",
     "docs:build": "pnpm -C docs run docs:build",
     "zip": "tsx ./scripts/extension-zip.ts",
+    "release-extension": "tsx ./scripts/release-extension.ts && nr zip",
     "gen:vue-apis": "tsx ./scripts/vue-api-manifest.ts"
   },
   "devDependencies": {
     "@antfu/eslint-config": "2.21.0",
     "@antfu/ni": "^0.21.12",
     "@arethetypeswrong/cli": "^0.15.3",
+    "@clack/prompts": "^0.7.0",
     "@types/chrome": "^0.0.268",
     "@types/degit": "^2.8.6",
     "@types/fs-extra": "^11.0.4",
@@ -93,11 +97,13 @@
     "jsdom": "^24.1.0",
     "lint-staged": "^15.2.5",
     "npm-run-all2": "^6.2.0",
+    "picocolors": "^1.0.1",
     "pnpm": "^9.3.0",
     "progress": "^2.0.3",
     "publint": "^0.2.8",
     "readdir-glob": "^2.0.0",
     "regex-extra": "^0.2.2",
+    "semver": "^7.6.2",
     "simple-git-hooks": "^2.11.1",
     "taze": "^0.13.8",
     "tsup": "^8.1.0",

packages/chrome-extension/manifest.json

@@ -41,18 +41,18 @@
     "<all_urls>"
   ],
   "icons": {
-    "16": "icons/16.png",
-    "48": "icons/48.png",
-    "128": "icons/128.png"
+    "16": "icons/16-beta.png",
+    "48": "icons/48-beta.png",
+    "128": "icons/128-beta.png"
   },
   "manifest_version": 3,
   "name": "Vue.js DevTools",
   "permissions": [
     "scripting",
     "storage"
   ],
-  "version": "0.0.0",
-  "version_name": "0.0.0",
+  "version": "7.0.0.1",
+  "version_name": "7.0.0 beta 1",
   "web_accessible_resources": [
     {
       "extension_ids": [],

packages/chrome-extension/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vue/devtools-chrome-extension",
   "type": "module",
-  "version": "7.3.0-beta.3",
+  "version": "7.0.0-beta.1",
   "private": true,
   "author": "webfansplz",
   "license": "MIT",

packages/chrome-extension/popups/enabled.html

@@ -14,7 +14,7 @@
 
     <p>
       <a
-        href="https://devtools.vuejs.org/guide/faq.html#the-vue-devtools-don-t-show-up"
+        href="https://devtools-next.vuejs.org/help/troubleshooting"
         target="_blank"
         >Troubleshooting</a
       >

packages/chrome-extension/popups/enabled.nuxt.html

@@ -14,7 +14,7 @@
 
     <p>
       <a
-        href="https://devtools.vuejs.org/guide/faq.html#the-vue-devtools-don-t-show-up"
+        href="https://devtools-next.vuejs.org/help/troubleshooting"
         target="_blank"
         >Troubleshooting</a
       >

packages/chrome-extension/tsup.config.ts

@@ -15,6 +15,5 @@ export default defineConfig({
   },
   clean: true,
   format: ['iife'],
-  dts: true,
-  shims: true,
+  minify: true,
 })

packages/client/src/main.ts

@@ -2,7 +2,7 @@ import '@unocss/reset/tailwind.css'
 import 'floating-vue/dist/style.css'
 import { getViteClient } from 'vite-hot-client'
 
-import { isInSeparateWindow } from '@vue/devtools-shared'
+import { isInChromePanel, isInSeparateWindow } from '@vue/devtools-shared'
 import { VueDevToolsVuePlugin, createViteClientRpc, functions, rpc } from '@vue/devtools-core'
 import { createRpcClient, setViteClientContext } from '@vue/devtools-kit'
 import { createApp } from 'vue'
@@ -50,7 +50,7 @@ app.use(VueDevToolsVuePlugin())
 app.mount('#app')
 
 async function getViteHotContext() {
-  if (import.meta.url?.includes('chrome-extension://'))
+  if (isInChromePanel)
     return
 
   const viteClient = await getViteClient(`${location.pathname.split('/__devtools__')[0] || ''}/`.replace(/\/\//g, '/'), false)

packages/client/src/pages/index.vue

@@ -19,12 +19,12 @@ function visit() {
       <DevToolsLogo mr-0.5 inline-block h-8 translate-y--1.1 align-mid /> is a set of visual tools that help you to know your Vue app better, and enhance your
       development experience with Vue. Enjoy!<br>
     </p>
-    <!-- <p mb6 op50>
+    <p mb6 op50>
       Learn more at
-      <a href="https://devtools.vuejs.org/" target="_blank" rel="noopener noreferrer" n="primary">
-        devtools.vuejs.org
+      <a href="https://devtools-next.vuejs.org/" target="_blank" rel="noopener noreferrer" n="primary">
+        devtools-next.vuejs.org
       </a>
-    </p> -->
+    </p>
 
     <VueButton type="primary" @click="visit">
       <span>Get Started</span>

packages/client/src/pages/overview.vue

@@ -66,7 +66,7 @@ onUnmounted(() => {
         <div flex="~" mt--10 items-center justify-center>
           <DevToolsLogo h-18 />
         </div>
-        <div mb6 mt--1 text-center text-sm flex="~ gap-1">
+        <div v-if="!isInChromePanel" mb6 mt--1 text-center text-sm flex="~ gap-1">
           <span op40>
             Vue DevTools
           </span>

packages/client/vite.lib.config.ts

@@ -44,7 +44,7 @@ export default defineConfig(mergeConfig(baseConfig, {
       closeBundle() {
         // copy
         const clientFile = resolve(__dirname, './dist/devtools-client-lib')
-        ;['../chrome-extension/client', '../electron/client'].forEach((dir) => {
+        ;['../chrome-extension/client', '../firefox-extension/client', '../electron/client'].forEach((dir) => {
           fse.copySync(clientFile, resolve(__dirname, dir))
         })
       },

packages/firefox-extension/README.md

@@ -0,0 +1,3 @@
+# Browser extension
+
+> DevTools Browser extension, still under development...

packages/firefox-extension/devtools-background.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title></title>
+  </head>
+  <body>
+    <script src="../dist/devtools-background.js"></script>
+  </body>
+</html>

packages/firefox-extension/devtools-panel.html

@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title></title>
+    <style>
+      html,
+      body {
+        height: 100%;
+      }
+      #container {
+        display: flex;
+        height: 100%;
+      }
+    </style>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../client/devtools-panel.css"
+    />
+  </head>
+  <body>
+    <div id="container">
+      <div id="app"></div>
+    </div>
+    <script src="../dist/devtools-panel.js"></script>
+  </body>
+</html>

packages/firefox-extension/manifest.json

@@ -0,0 +1,58 @@
+{
+  "background": {
+    "persistent": true,
+    "scripts": [
+      "dist/background.js"
+    ]
+  },
+  "browser_action": {
+    "default_icon": {
+      "16": "icons/16-gray.png",
+      "48": "icons/48-gray.png",
+      "128": "icons/128-gray.png"
+    },
+    "default_popup": "popups/not-found.html",
+    "default_title": "Vue DevTools"
+  },
+  "content_scripts": [
+    {
+      "js": [
+        "dist/injection.js"
+      ],
+      "matches": [
+        "<all_urls>"
+      ],
+      "run_at": "document_start"
+    },
+    {
+      "js": [
+        "dist/devtools-overlay.js"
+      ],
+      "matches": [
+        "<all_urls>"
+      ],
+      "run_at": "document_idle"
+    }
+  ],
+  "content_security_policy": "script-src 'self'; object-src 'self'",
+  "description": "DevTools browser extension for Vue.js",
+  "devtools_page": "devtools-background.html",
+  "icons": {
+    "16": "icons/16-beta.png",
+    "48": "icons/48-beta.png",
+    "128": "icons/128-beta.png"
+  },
+  "manifest_version": 2,
+  "name": "Vue.js DevTools",
+  "permissions": [
+    "<all_urls>",
+    "storage"
+  ],
+  "version": "7.0.0.1",
+  "version_name": "7.0.0 beta 1",
+  "web_accessible_resources": [
+    "dist/user-app.js",
+    "client/devtools-panel.css",
+    "client/devtools-panel.js"
+  ]
+}

packages/firefox-extension/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@vue/devtools-firefox-extension",
+  "type": "module",
+  "version": "7.0.0-beta.1",
+  "private": true,
+  "author": "webfansplz",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "cross-env NODE_ENV=production tsup",
+    "dev": "cross-env NODE_ENV=development tsup --watch"
+  },
+  "dependencies": {
+    "@vue/devtools-core": "workspace:^",
+    "@vue/devtools-kit": "workspace:^",
+    "@vue/devtools-shared": "workspace:^"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.5",
+    "vue": "^3.4.27"
+  }
+}

packages/firefox-extension/popups/disabled.html

@@ -0,0 +1,8 @@
+<meta charset="utf-8" />
+<link rel="stylesheet" type="text/css" href="./popup.css" />
+
+<p>
+  <strong>Vue.js is detected on this page.</strong><br />
+  Devtools inspection is not available because it's in production mode or
+  explicitly disabled by the author.
+</p>

packages/firefox-extension/popups/disabled.nuxt.html

@@ -0,0 +1,8 @@
+<meta charset="utf-8" />
+<link rel="stylesheet" type="text/css" href="./popup.css" />
+
+<p>
+  <strong>Nuxt + Vue.js is detected on this page.</strong><br />
+  Devtools inspection is not available because it's in production mode or
+  explicitly disabled by the author.
+</p>

packages/firefox-extension/popups/enabled.html

@@ -0,0 +1,23 @@
+<meta charset="utf-8" />
+<link rel="stylesheet" type="text/css" href="./popup.css" />
+
+<div class="flex">
+  <div class="screenshot">
+    <img src="./devtools-screenshot.png" alt="Screenshot" />
+  </div>
+
+  <div>
+    <p>
+      <strong>Vue.js is detected on this page.</strong><br />
+      Open DevTools and look for the Vue panel.
+    </p>
+
+    <p>
+      <a
+        href="https://devtools-next.vuejs.org/help/troubleshooting"
+        target="_blank"
+        >Troubleshooting</a
+      >
+    </p>
+  </div>
+</div>

packages/firefox-extension/popups/enabled.nuxt.html

@@ -0,0 +1,23 @@
+<meta charset="utf-8" />
+<link rel="stylesheet" type="text/css" href="./popup.css" />
+
+<div class="flex">
+  <div class="screenshot">
+    <img src="./devtools-screenshot.png" alt="Screenshot" />
+  </div>
+
+  <div>
+    <p>
+      <strong>Nuxt + Vue.js is detected on this page.</strong><br />
+      Open DevTools and look for the Vue panel.
+    </p>
+
+    <p>
+      <a
+        href="https://devtools-next.vuejs.org/help/troubleshooting"
+        target="_blank"
+        >Troubleshooting</a
+      >
+    </p>
+  </div>
+</div>

packages/firefox-extension/popups/not-found.html

@@ -0,0 +1,6 @@
+<meta charset="utf-8" />
+<link rel="stylesheet" type="text/css" href="./popup.css" />
+
+<p class="short-paragraph">
+  <strong>Vue.js not detected</strong>
+</p>