Chrome extension development with Angular: how to include source maps

Question

On Windows 10 I have this pesky issue that Chrome is not allowing me to pull map files that start with the chrome-extension protocol handler:

DevTools failed to load SourceMap: Could not load content for chrome-extension://ophhkjncpgcjadncildcofemdojplgpp/main.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

How can I debug my Angular based Chrome Extension web page?

Tested with Chrome 89 and 90. Using Angular 11.

Using https://github.com/larscom/ng-chrome-extension as a starter project.

Answer 1

I was able to inline the map files into the generated javascript files. The Angular cli itself does not provide a configuration setting to enforce this behavior. I applied ngx-build-plus:

npm i -D ngx-build-plus

Apply the schematics to your Angular project:

ng add ngx-build-plus

Add an ngx-build-plus plugin file to your project, e.g. with the name build-customization-plugin.js:

const { mergeWithCustomize, customizeObject } = require('webpack-merge');
const webpack = require("webpack");

exports.default = {
    config: function (cfg) {       
        // first, we replace devtool in the webpack used by the angular cli to have the value 'inline-source-map'
        const strategy = mergeWithCustomize({
            customizeObject: customizeObject({
                'devtool': 'replace'
            })
        });
        const result = strategy(cfg, {
            devtool: 'inline-source-map'
        });

        // then we find SourceMapDevToolPlugin and remove it
        // This is because we should never use both the devtool option and plugin together.
        // The devtool option adds the plugin internally so you would end up with the plugin applied twice.
        // See https://webpack.js.org/configuration/devtool/
        const index = result.plugins.findIndex((plugin) => {
            return plugin instanceof webpack.SourceMapDevToolPlugin;
        });
        result.plugins.splice(index, 1);

        return result;
    }
}

Run the Angular cli with an additional --plugin parameter:

ng build --plugin ~build-customization-plugin.js

The tilde (~) is enforcing ngx-build-plus to look into the current directory instead of resolving to a node module.

Package.json entries:

• "ngx-build-plus": "^11.0.0"
• "@angular-devkit/build-angular": "~0.1102.11" which transitively installs "webpack-merge": "5.7.3"

Note: My solution is based out of an example that was using merge.strategy. This resulted in a runtime error merge.strategy is not a function. I guess webpack-merge has changed its API when moving from major version 4 to 5. 5.0.0 became available around August 2020.