Is it possible to get vue-devtools to work in a content-script app? #397

evanb2 · 2022-06-01T19:19:11Z

evanb2
Jun 1, 2022

Curious if anyone has explored this/knows if it's possible/would share their setup

I tried to setup using the Standalone method within the shadow node I'm injecting my Vue app into but I get the following error when running the vite dev server:

[commonjs] Unexpected token (1008:5560) in /my-project/node_modules/@vue/devtools/build-node/backend.js
file: /my-project/node_modules/@vue/devtools/build-node/backend.js:1008:5560
1006: /***/ ((module, exports, __webpack_require__) => {
1007: 
1008: eval("/* eslint-env browser */\n\n/**\n * This is the web browser implementation of `debug()`.\n */\n\nexports.formatArgs = formatArgs;\nexports.save = save;\nexports.load = load;\nexports.useColors = useColors;\nexports.storage = localstorage();\nexports.destroy = (() => {\n\tlet warned = false;\n\n\treturn () => {\n\t\tif (!warned) {\n\t\t\twarned = true;\n\t\t\tconsole.warn('Instance method `debug.destroy()` is deprecated and no longer does anything. It will be removed in the next major version of `debug`.');\n\t\t}\n\t};\n})();\n\n/**\n * Colors.\n */
...

Thanks!

jacksteamdev · 2022-06-28T15:36:22Z

jacksteamdev
Jun 28, 2022
Maintainer

@evanb2 Did you ever find an answer for this? It looks like @rollup/plugin-commonjs is choking on their webpack build.

Where will this built code run? I ask b/c if the evall() on line 1008 runs in the browser, the extension CSP will block it.

1 reply

rileytaylor Jun 28, 2022

There are a few ways to set up dev tools with the standalone debugger, one being a script injection in the <head> and one being via a package dependency.

I've tried following some of the suggestions here, however, I suspect that these are all pre-manifest v3 solutions.

Installing dev tools:

globally: npm i -g @vue/devtools and running via vue-devtools
locally: npm i -D @vue/devtools and running via ./node_modules/.bin/vue-devtools
theoretically both should work just fine, though the local option seems preferable when initing devtools via a package dependency.

manifest.config.ts

export default defineManifest(({ command, mode }) => {
  ...
  content_security_policy: command === 'serve' ? {
    extension_pages: "script-src 'self' http://localhost:8098; object-src 'self'",
  } : undefined,
  ...
}

Then in the index.html of our popup app:

<head>
  <script src="http://localhost:8098"></script>
  ...
</head>

That should allow us to load the devtools init script (standalone vue dev tools serves the script via that port).

So, in one terminal ./node_modules/.bin/vue-devtools, another run our dev build of the extension -> load unpacked extension -> inspect popup, and then we see:

Refused to load the script 'http://localhost:8098/' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

That's definitely not the csp rules we configured in the manifest, but as far as I can tell the popup context is not considered a "sandbox" per the csp rules config, and setting the sandbox side doesn't make a difference here.

The alternative option would be to use devtools as a dependency:

main.ts

import devtools from '@vue/devtools'
import { createApp } from 'vue'
import App from '@/ui/popup/app.vue'

if (import.meta.env.DEV) {
  devtools.connect()
}

const app = createApp(App)
app.mount('#popup-app')

But then that results in an eval problem (as one would expect)

Trying to use it in the content script via loading the dependency or injecting <script src="http://localhost:8098"></script> also results in similar problems, though of course with the added problem of the sites csp overriding anything we set for the extension.

The script that loads via that injection is here it does seem to have some logic for attempting to get around content-script issues in extensions, but that shouldn't be an issue with the popup...

I haven't dug into this enough to try and see if there's perhaps an alternative way for us to load the devtools script, such as building it into a dependency and loading it from within our extension context (which still wouldn't help if there's an eval(), but perhaps that's info to help you see a problem I'm not seeing yet.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Is it possible to get vue-devtools to work in a content-script app? #397

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Is it possible to get vue-devtools to work in a content-script app? #397

evanb2 Jun 1, 2022

Replies: 1 comment · 1 reply

jacksteamdev Jun 28, 2022 Maintainer

rileytaylor Jun 28, 2022

evanb2
Jun 1, 2022

Replies: 1 comment 1 reply

jacksteamdev
Jun 28, 2022
Maintainer