chrome 72 changes sourcemap behaviour

Question

I'm developing a Webextension for Chrome, the code is written in Typescript, so I need sourcemaps.

The extension is bundled with ParcelJS, but I believe that my problem is not related to the bundler.

After updating from Chrome 70 to 72, sourcemaps no longer work. As a minimal example, I can reproduce the problem on MacOS 14 and Ubuntu 18.04, Chrome 72 with the following code.

This problem seems to be isolated to Chrome 72. Unfortunately, at the time of writing, that's the current stable version:

• Version 73.0.3683.27 (Official Build) beta (64-bit), no problem
• Version 71.0.3578.98 (Official Build) stable Chromium 64-bit, no problem
• Version 72.0.3626.96 (Official Build) (64-bit), doesn't work

For convenience, I have set up a github repo. Clone it and run the following commands (sorry, I'm not sure if you need to install the parcel bundler globally. I always do that for convenience)

git clone https://github.com/lhk/contentscript_smap.git
cd contentscript_smap
# npm install -g parcel-bundler 
npm install -d
parcel build manifest.json

To follow the Stackoverflow rules (if you link to code, you should also include it in your question, the link might go down at some point):

content.ts:

console.log('log from typescript')

manifest.json:

{
    "manifest_version": 2,
    "name": "sourcemaps messed up",
    "version": "0.0.1",
    "description": "",
    "author": "",
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "./content.ts"
            ]
        }
    ],
    "permissions": [
        "activeTab",
        "<all_urls>"
    ]
}

package.json:

{
  "name": "contentscript_smap",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/lhk/contentscript_smap.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/lhk/contentscript_smap/issues"
  },
  "homepage": "https://github.com/lhk/contentscript_smap#readme",
  "dependencies": {
    "parcel-bundler": "^1.11.0",
    "parcel-plugin-web-extension": "^1.5.1",
    "typescript": "^3.3.3"
  }
}

Parcel will bundle the extension and produce a dist/ folder, from there you can install it in Firefox and Chrome.

Firefox works nicely (look at the sourcecode reference to content .TS ):

Chrome doesn't find the sourcemap:

And it's not just that the console simply displays the compiled source instead of the sourcemapped original source. I can't find the typescript code in Chrome at all.

Answer 1

For me here's what solved the issue.

1. Change devtool : "source-map" -> "eval-source-map" in webpack config with mode : "development".

2. Add "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'" in manifest.json

Apart from this, also make sure that you do link your Source Folder ( not dist generated by webpack ) with chrome devtools by clicking on Add folder to your workspace in the Chrome Devtools -> Sources -> FileSystem.

I am afraid I don't have enough time to delve into how this fixed the issue. Maybe I'll update the answer later with proper reasoning.