contentScript sourceMap does not work

[molvqingtai]

Describe the bug

contentScript sourceMap does not work

Expected behavior

It can be used at the tsx source file breakpoint

Screenshots

Environment

  System:
    OS: macOS 14.0
    CPU: (8) arm64 Apple M1
    Memory: 72.80 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.14.0 - ~/.nvm/versions/node/v18.14.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.14.0/bin/yarn
    npm: 9.3.1 - ~/.nvm/versions/node/v18.14.0/bin/npm
    pnpm: 8.6.9 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 119.0.6045.123
    Chrome Canary: 121.0.6127.0
    Safari: 17.0
  npmPackages:
    wxt: ^0.9.0 => 0.9.0

[aklinker1]

Thanks for reporting. As far as I know, this is a problem with Chrome, not WXT. I have another build tool, vite-plugin-web-extension, and it has the same problem:

• Source maps in content scripts aklinker1/vite-plugin-web-extension#142
• How do I generate a source map for a Svelte plugin? aklinker1/vite-plugin-web-extension#147

It works in Firefox, and this can be reproduced with any other bundler or project setup.

[aklinker1]

If anyone can make this work with a basic setup or different build tool, I would gladly implement the fix in WXT, because this is very annoying.

[lionelhorn]

@aklinker1 I'm not sure that it actually is an issue with chrome as I get proper line numbers and mapping with this plasmo example : https://github.com/PlasmoHQ/examples/tree/main/with-content-scripts-ui

Edit: It seems it's not without bugs either. See PlasmoHQ/plasmo#856 (comment)

[lionelhorn]

Starting vite with

export default defineConfig({
  vite: () => ({
    plugins: [react()],
    mode: "development",
    build: {
      minify: false,
      sourcemap: "inline",
      terserOptions: {
        sourceMap: true,
        compress: false,
      },
      rollupOptions: {
        treeshake: false,
      }
    }
  }),
});

I get the following error message (wxt:unimport plugin) Sourcemap is likely to be incorrect: a plugin (wxt:unimport) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help

WXT 0.14.7                                                                                                                                             23:55:32
√ Started dev server @ http://localhost:3000                                                                                                           23:55:32
i Pre-rendering chrome-mv3 for development with Vite 5.0.12                                                                                            23:55:32
(wxt:unimport plugin) Sourcemap is likely to be incorrect: a plugin (wxt:unimport) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
(wxt:unimport plugin) Sourcemap is likely to be incorrect: a plugin (wxt:unimport) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
√ Built extension in 592 ms       

[lionelhorn]

Mapping also works in CRXJS which also uses vite plugins
They added support apparently in crxjs/chrome-extension-tools#701

Small content script example

I'm looking forward to the progress on wxt. It's nice to have good options for chrome extension development :)
Feel free to tag me in your reply if you see this.

[aklinker1]

@lionelhorn After making the change in #381, I was able to get source maps working, but I needed to uncheck the "content scripts injected by extension" checkbox under the ignore list in devtools.

source-maps.mp4

Unfortunately, it resets when running wxt in dev mode by default. This can be mitigated by using a custom runner.chromiumProfile with the setting toggled. I can't figure out where this setting is stored or if it can be configured on startup or in new profiles...

I have a PR open for web-ext that adds support for customizing the profile, so if the flag is apart of that, that PR will be useful: mozilla/web-ext#2912

[aklinker1]

Looks like it's a setting called "skipContentScripts"? I've never really looked at the chromium codebase before, and it's been a while since I looked at C++... So I'm not sure.

https://source.chromium.org/chromium/chromium/src/+/main:out/fuchsia-Debug/gen/third_party/devtools-frontend/src/front_end/panels/settings/settings.js;l=875;drc=b274bd7ace3a064c7fae27748b6d007068bbea30

[aklinker1]

Released some new changes to improve content script sourcemaps in v0.15.0

• fix: Generate missing sourcemap in wxt:unimport plugin #381
• fix: Enable inline sourcemaps by default during development #382

[lionelhorn]

There are lots of command line flags in chromium
https://peter.sh/experiments/chromium-command-line-switches/

I'm not using the runner so your PR fixed the issue for me 👍 Thanks for the quick fix !

[aklinker1]

Yeah, I wasn't able to find it in the CLI flags.

Edit: Found it! devtools.synced_preferences_sync_disabled.skipContentScripts under the <profile>/Preferences file.

I should be able to enable it automatically once my web-ext PR gets merged, or I add the change into my fork, web-ext-runner. It doesn't work for all preferences, but hopefully it will work for this one.