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.

Endow

Create a quick repro and open a crbug? – Kufic

good idea, here is the link: crbug.com/931675 – Endow

@ihk, having the same issue. Were you able to resolve it. I am also currently working on a chrome extension using typescript and suddenly sourcemaps stopped working without any changes from my side. Unlike you I am not even able to update version 73. – Emblazon

@Emblazon I have added an answer, hope this helps you. – Endow

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.

Emblazon

Thanks, it solved my issue with source maps on Chrome 73.0.3683.103 – Corri

This question is about Parcel, not Webpack. – Tuque

Answer 2

Firefox has a similar problem: Sourcemaps can't be loaded in the popup and background scripts. This is even mentioned in the docs, a workaround is to host your sourcemaps on a local webserver.

So I experimented with this and found it to fix my problem with Chrome. Hopefully you can reproduce it with the following steps:

• install a local https server, such as local-web-server: npm install local-web-server
• configure your system to trust the certificate of this server: https://github.com/lwsjs/local-web-server/wiki/How-to-get-the-%22green-padlock%22-using-the-built-in-certificate
• edit the extensions manifest to trust the localhost server: "content_security_policy": "script-src 'self' https://127.0.0.1:8000/; object-src 'self'"
• set the paths in your extension to a local host, you can do this with parcel: parcel build src/manifest.json --public-url=https://127.0.0.1:8000/
• cd dist/ and ws -https to set up the local server

Now reload the extension in Chrome and it works (well, at least for me).

Endow