contentScript sourceMap does not work

molvqingtai commented 10 months ago

Describe the bug

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 commented 10 months ago

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:

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

aklinker1 commented 10 months ago

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 commented 7 months ago

@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 https://github.com/PlasmoHQ/plasmo/issues/856#issuecomment-1913744113

lionelhorn commented 7 months ago

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 commented 7 months ago

Mapping also works in CRXJS which also uses vite plugins They added support apparently in https://github.com/crxjs/chrome-extension-tools/pull/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 commented 7 months ago

@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.

https://github.com/wxt-dev/wxt/assets/10101283/1496ca27-7389-4d79-98c6-8586d079ac13

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: https://github.com/mozilla/web-ext/pull/2912

aklinker1 commented 7 months ago

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 commented 7 months ago

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

381
382

lionelhorn commented 7 months ago

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 commented 7 months ago

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.

wxt-dev / wxt