CODEWITHSUNDEEP
javascriptgoogle-chrome-extensiongoogle-chrome-devtoolssource-mapsparceljs
lhk
lhk

Reputation: 30146

chrome 72 changes sourcemap behaviour

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:

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 ):

firefox ts sourcemap

Chrome doesn't find the sourcemap:

enter image description here

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.

Upvotes: 6

Views: 1484

Answers (2)

bhavya_w
bhavya_w

Reputation: 10097

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.

Upvotes: 3

lhk
lhk

Reputation: 30146

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:

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

Upvotes: 0

Related Questions