I created an example browser extension written in .html and typescript that is working fine in Chrome, Firefox and Edge (canary). Typescript compiler generated .js and .js.map files from the .ts files.
I want to debug the source code where I can place breakpoints to the typescript code. I can do it in Firefox, but not in Chrome or Edge. Chrome and Edge notice that the .map and .ts files are to be added, I can can load them only from the sources and breakpoints don't work for me.
I read past articles.
- Do source maps work for Chrome extensions?
- Chrome Extension: Not loading source-maps
- https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps
- https://bugs.chromium.org/p/chromium/issues/detail?id=212374
- https://developer.chrome.com/extensions/manifest/web_accessible_resources
I tried different settings in manifest.json.
I can attach the whole zip with example extension, if I find a way. The whole list of files in extension is: background.html, background.js, background.js.map, background.ts, base.js, base.js.map, base.ts, content.js, content.js.map, content.ts, manifest.json, popup.html, popup.js, popup.js.map, popup.ts, readme.md, tsconfig.json, tsext16.PNG, tsext19.PNG,
The complete manifest.json is
{
"manifest_version": 2,
"name": "Typescript Sourcemaps in Browser Extensions",
"version": "1",
"description": "Sourcemaps with Extensions",
"icons": {
"16": "tsext16.png"
},
"permissions": [
"activeTab"
],
"browser_action": {
"default_icon": {
"16": "tsext16.png",
"19": "tsext19.png"
},
"default_popup": "popup.html",
"default_title": "Typescript example popup"
},
"background": {
"scripts": [
"base.js",
"background.js"
]
},
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"js": [
"base.js",
"content.js"
]
}],
"web_accessible_resources": [
"background.js.map",
"background.ts",
"*"
]
}
When looking at the Source pane, only .js files are shown. A the top of the .js file, there is a message "Source map detected". However, I don't know how to load .ts file (e.g. popup.ts) in a way that I can make breakpoints working. I can mark the breakpoints in any .ts file if I load it from "filesystem", but the execution doesn't stop and the file name as shown in the tab has an additional icon (what probably means "just for viewing, not connected to the debugger") similar to "new document".
I can debug this example extension in current Firefox 67. I can get source maps for web pages into Chrome. I tried at Windows 10 and Windows 7, both x64.
