chore: init

nuxt · antfu · Jun 20, 2023 · Jun 21, 2023 · Jun 21, 2023 · Jun 21, 2023
commit 3ad4a0af92b88c75e9193e38fa43a279980189dd
diff --git a/packages/devtools-kit/src/_types/client-api.ts b/packages/devtools-kit/src/_types/client-api.ts
@@ -74,6 +74,8 @@ export interface NuxtDevtoolsClient {
 }
 
 export interface NuxtDevtoolsIframeClient {
+  url: string
+  version: string
   host: NuxtDevtoolsHostClient
   devtools: NuxtDevtoolsClient
 }

diff --git a/packages/devtools-webext/extension/devtools.html b/packages/devtools-webext/extension/devtools.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <script src="./dist/devtools.js"></script>
+  </body>
+</html>
diff --git a/packages/devtools-webext/extension/icon.png b/packages/devtools-webext/extension/icon.png
diff --git a/packages/devtools-webext/extension/manifest.json b/packages/devtools-webext/extension/manifest.json
@@ -0,0 +1,15 @@
+{
+  "name": "Nuxt DevTools",
+  "description": "Unleash Nuxt Developer Experience.",
+  "version": "0.0.1",
+  "manifest_version": 3,
+  "devtools_page": "devtools.html",
+  "content_security_policy": {
+    "extension_pages": "script-src 'self' http://localhost:3000; object-src 'self'"
+  },
+  "icons": {
+    "16": "icon.png",
+    "48": "icon.png",
+    "128": "icon.png"
+  }
+}
diff --git a/packages/devtools-webext/extension/panel.html b/packages/devtools-webext/extension/panel.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <style>
+      html, body {
+        font-family: sans-serif;
+        font-size: 12px;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <script src="./dist/panel.js"></script>
+  </body>
+</html>
diff --git a/packages/devtools-webext/package.json b/packages/devtools-webext/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@nuxt/devtools-webext",
+  "private": true,
+  "type": "module",
+  "version": "0.6.1",
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "devDependencies": {
+    "@types/webextension-polyfill": "^0.10.0",
+    "tsup": "^7.0.0",
+    "webext-bridge": "^6.0.1",
+    "webextension-polyfill": "^0.10.0"
+  }
+}
diff --git a/packages/devtools-webext/src/content.ts b/packages/devtools-webext/src/content.ts
diff --git a/packages/devtools-webext/src/devtools.ts b/packages/devtools-webext/src/devtools.ts
@@ -0,0 +1,3 @@
+import browser from 'webextension-polyfill'
+
+browser.devtools.panels.create('Nuxt', 'icon.png', 'panel.html')
diff --git a/packages/devtools-webext/src/panel.ts b/packages/devtools-webext/src/panel.ts
@@ -0,0 +1,61 @@
+import browser from 'webextension-polyfill'
+
+async function run() {
+  const [result, isException] = await browser.devtools.inspectedWindow.eval('__NUXT_DEVTOOLS__')
+  console.log({ result, isException })
+
+  if (!result?.url)
+    return noDevTools()
+
+  // #1 - inline html
+  // const origin = new URL(result.url).origin
+  // const html = await fetch(result.url).then(res => res.text())
+  // const body = html.match(/<body[^>]*>([\s\S]*)<\/body>/i)
+  //   ?.[1]
+  //   ?.replace(/ src="\//, ` src="${origin}/`)
+
+  // if (!body)
+  //   return noDevTools()
+
+  // const div = document.createElement('div')
+  // div.innerHTML = body
+  // document.body.appendChild(div)
+
+  // #2 iframe
+  const iframe = document.createElement('iframe')
+  iframe.src = result.url
+  iframe.style.border = 'none'
+  iframe.style.outline = 'none'
+  iframe.style.width = '100vw'
+  iframe.style.height = '100vh'
+  document.body.appendChild(iframe)
+
+  // #3 - Import inline
+  // const html = await fetch(result.url).then(res => res.text())
+  // const elements = (new DOMParser().parseFromString(html, 'text/html')).body.children
+  // const origin = new URL(result.url).origin
+
+  // const div = document.createElement('div')
+  // div.id = '__nuxt'
+  // document.body.appendChild(div)
+
+  // for (const element of elements) {
+  //   if (element.tagName === 'SCRIPT') {
+  //     if ('src' in element && element.src) {
+  //       const url = new URL(element.src as string)
+  //       import(origin + url.pathname)
+  //     }
+  //   }
+  //   else {
+  //     document.body.appendChild(element)
+  //   }
+  // }
+}
+
+function noDevTools() {
+  const div = document.createElement('div')
+  div.innerText = 'Nuxt devtools not found'
+  document.body.appendChild(div)
+}
+
+run()
diff --git a/packages/devtools-webext/tsup.config.ts b/packages/devtools-webext/tsup.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+  entry: [
+    './src/*.ts',
+  ],
+  outDir: './extension/dist',
+  format: ['iife'],
+  outExtension() {
+    return { js: '.js' }
+  },
+})
diff --git a/packages/devtools/client/composables/client.ts b/packages/devtools/client/composables/client.ts
@@ -1,6 +1,7 @@
 import type { Lang } from 'shiki-es'
 import type { NuxtDevtoolsClient, NuxtDevtoolsHostClient, NuxtDevtoolsIframeClient, VueInspectorData } from '@nuxt/devtools-kit/types'
 import type { Unhead } from '@unhead/schema'
+import { version } from '../../package.json'
 import { renderMarkdown } from './client-services/markdown'
 import { renderCodeHighlight } from './client-services/shiki'
 import { extendedRpcMap, rpc } from './rpc'
@@ -41,7 +42,9 @@ export function useInjectionClient(): ComputedRef<NuxtDevtoolsIframeClient> {
   const client = useClient()
   const mode = useColorMode()
 
-  return computed(() => ({
+  return computed<NuxtDevtoolsIframeClient>(() => ({
+    url: location.href,
+    version,
     host: client.value,
     devtools: <NuxtDevtoolsClient>{
       rpc,

diff --git a/packages/devtools/src/runtime/plugins/devtools.client.ts b/packages/devtools/src/runtime/plugins/devtools.client.ts
@@ -20,6 +20,8 @@ export default defineNuxtPlugin((nuxt: any) => {
         return
     }
     catch (e) {
+      // Cross-origin
+      return
     }
   }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import browser from 'webextension-polyfill'

		browser.devtools.panels.create('Nuxt', 'icon.png', 'panel.html')
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,6 +20,8 @@ export default defineNuxtPlugin((nuxt: any) => { @@
             return
         }
         catch (e) {
+          // Cross-origin
+          return
         }
       }
@@ Expand Down @@