Блог

Главная - Вопросы по программированию - Разработка расширения Chrome с помощью Angular: как включить исходные карты

Разработка расширения Chrome с помощью Angular: как включить исходные карты

#angular #google-chrome-extension

Вопрос:

В Windows 10 у меня есть эта досадная проблема, из-за которой Chrome не позволяет мне извлекать файлы карт, которые начинаются с обработчика протокола расширения chrome:

DevTools не удалось загрузить исходную карту: Не удалось загрузить содержимое для chrome-расширение://ophhkjncpgcjadncildcofemdojplgpp/main.js.карта: ошибка HTTP: код состояния 404, сеть::ERR_UNKNOWN_URL_SCHEME

Как я могу отладить свою веб-страницу расширения Chrome на основе Angular?

Протестировано с хромом 89 и 90. Использование Углового 11.

Использование https://github.com/larscom/ng-chrome-extension в качестве начального проекта.

Ответ №1:

Мне удалось встроить файлы карты в сгенерированные файлы javascript. Сам интерфейс командной строки Angular не предоставляет параметров конфигурации для обеспечения такого поведения. Я подал заявление ngx-build-plus :

npm i -D ngx-build-plus

Примените схемы к вашему угловому проекту:

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 resu<
    }
}

Запустите Angular cli с дополнительным --plugin параметром:

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

Тильда (~) применяет ngx-build-plus для просмотра текущего каталога вместо разрешения модуля узла.

Записи Package.json:

  • «ngx-сборка-плюс»: «^11.0.0»
  • «@angular-devkit/сборка-угловой»: «~0.1102.11», который транзитивно устанавливает «webpack-слияние»: «5.7.3»

Примечание: Мое решение основано на примере, который использовался merge.strategy . Это привело к ошибке во время выполнения merge.strategy is not a function . Я предполагаю webpack-merge , что изменил свой API при переходе с основной версии 4 на 5. 5.0.0 стал доступен примерно в августе 2020 года.

Метки: