Source maps in content scripts

EdoanR commented 9 months ago

Summary

I've been having problems getting the exact line that an error occurs in a content script since the build file looks different than the source file,

screenshot 1 screenshot 2

Even thought it has a .map file in the build. screenshot 3

Reproduction

create a content-script.ts file in the src folder.

paste the following content to it.


// Both lines below just added to make build files look different than the source file.
import { runtime } from "webextension-polyfill";
console.log(`Content script from ${runtime.getManifest().name}!`);

// Throw a fake error. throw new Error('fake error');

3. add the following lines to the `manifest.json`
```json
  "content_scripts": [
    {
      "matches": ["*://vitejs.dev/*"],
      "js": ["src/content-script.ts"]
    }
  ]

run pnpm dev and go to https://vitejs.dev
check devtools console.

Environment

  System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 AMD Ryzen 5 5600G with Radeon Graphics
    Memory: 21.10 GB / 31.79 GB
  Binaries:
    Node: 18.16.0 - D:\Program Files\nodejs\node.EXE
    npm: 9.5.1 - D:\Program Files\nodejs\npm.CMD
    pnpm: 8.7.4 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (116.0.1938.76)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    vite: ^4.1.4 => 4.4.9
    vite-plugin-web-extension: ^3.0.1 => 3.2.0

aklinker1 commented 9 months ago

I just noticed this today too lol. Have you tried an inline source map? It could be that the browser can't load the map file since it's not in your manifest's web_accessible_resources, and an inline map would solve that.

EdoanR commented 9 months ago

I have tested adding the map file to web_accessible_resourses, and also tested inline source map. Both of them didn't work.

Checking the sources in the devtool it's showing that source map was detected. screenshot

Tested in Firefox and it's working properly.

The problem seems to be with Chrome, I have tested with others repo such as vitesse-webext and with a simple project using webpack, both of them have the same problem 😟.

This is happening only with content scripts. Background, options and popups are working fine.

aklinker1 commented 9 months ago

Ok, I'm going to close this as an issue with Chrome then.

EdoanR commented 6 months ago

Update: I think chrome kinda fixed this issue, when seeing the content script in the sources tab now it will show a warning saying that the script is in the "ignore list" with a button to remove from it. When removing it and reloading the page the content script will show a warning saying that could not access the .map file, after adding the file to the web_accessible_resources in the manifest the problem is fixed. Now it correctly use the map file.

aklinker1 / vite-plugin-web-extension