使用 Angular 進行 Chrome 擴展開發：如何包含源映射

Question

在 Windows 10 我有這個討厭的問題，Chrome 不允許我提取以 chrome 擴展協議處理程序開頭的 map 文件：

DevTools 無法加載 SourceMap：無法加載 chrome-extension://ophhkjncpgcjadncildcofemdojplgpp/main.js.map 的內容：HTTP 錯誤：狀態代碼 404，net::ERR_UNKNOWN_URL_SCHEME

如何調試基於 Angular 的 Chrome 擴展 web 頁面？

使用 Chrome 89 和 90 進行測試。使用 Angular 11。

使用https://github.com/larscom/ng-chrome-extension作為入門項目。

Answer 1

我能夠將 map 文件內聯到生成的 javascript 文件中。 Angular cli 本身不提供配置設置來強制執行此行為。 我應用ngx-build-plus ：

npm i -D ngx-build-plus

將原理圖應用於您的 Angular 項目：

ng add ngx-build-plus

將 ngx-build-plus 插件文件添加到您的項目中，例如名稱為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;
    }
}

使用附加的--plugin參數運行 Angular cli：

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

波浪號 (~) 強制 ngx-build-plus 查看當前目錄，而不是解析到節點模塊。

Package.json 條目：

• “ngx-build-plus”：“^11.0.0”
• "@angular-devkit/build-angular": "~0.1102.11" 可傳遞安裝 "webpack-merge": "5.7.3"

注意：我的解決方案基於使用merge.strategy的示例。 這導致運行時錯誤merge.strategy is not a function 。 我猜webpack-merge在從主要版本 4 遷移到 5 時更改了其 API。5.0.0 於 2020 年 8 月左右推出。