Включение пакетов npm в фоновые сценарии расширения браузера

Question

Есть ли способ включить пакеты npm в public / background.js и или объявить их в public / manifest.json?

Я пытаюсь создать расширение для браузера, используя предоставленный шаблон проекта Reactна create-react-app при использовании Mozilla WebExtension browser API Polyfill (webextension-polyfill на npm).

Структура файла, созданная create-react-app для тех, кто знаком только с Webpack:

. (root)
|-- build (output folder for npm run build)
|
|-- node_modules
|   |-- webextension-polyfill
|   |   |-- dist
|   |   |   |-- browser-polyfill.js (what I really want in /build)
|   |   |   |-- browser-polyfill.min.js (minified version)
|   |   |-- LICENSE
|   |   |-- package.json
|   |   |-- README.md
|   +-- (other node packages)
|
|-- public
|   |-- background.js (created by me)
|   |-- favicon.ico
|   |-- index.html
|   +-- manifest.json
|
|-- src
|   |-- index.js
|   |-- App.js
|   +-- (other React related things)
|
|-- .gitignore
|-- package.json
|-- package-lock.json
+-- README.md

Я попытался просто сделать import browser from "webextension-polyfill" внутри public / background.js и, что неудивительно, при попытке установить встроенное расширение в Chrome или Firefox выдает ошибку Unexpected Identifier при импорте.

Выполнение прямого путив записи «background» в manifest.json в browser-polyfill.js выдается ошибка «файл не найден».

Нужно ли делать npm run eject и изменять сценарии сборки Webpack для копирования browser-polyfill.JS в каталог сборки?Одно решение, которое я видел, использовало copy-webpack-plugin, но я хотел бы избежать необходимости делать npm run eject, если это возможно.

В качестве альтернативы, я должен просто использовать символическую ссылку на browser-polyfill.js и поместить символическую ссылку внутри public?

В худшем случае я просто вручную копирую browser-polyfill.js в public.

---

Пробовал связываться со скриптами веб-пакета после выполнения npm run eject и решил просто создать новый каталог проектав другом месте строго для компиляции фоновых расширений Web и скриптов контента.react-scripts гипероптимизирован для производства с минимизацией и разделением кода, и поскольку webpack допускает только одно выходное определение, я не могу точно обойти эти оптимизации.

Я просто скомпилировал их отдельно и скопировал в background.js.Я бы порекомендовал это, так как это позволяет вам выполнять производственную оптимизацию остальной части расширения, если это необходимо.

Answer 1

Решено создать папку /src/scripts, в которой хранятся все сценарии расширения, а также отдельную конфигурацию веб-пакета для компиляции этих сценариев. Я изменил сценарий build в package.json с react-scripts build до react-scripts build && webpack --config webpack.config.js, который будет создавать сценарии расширения и копировать их в /build после сборки приложения React. Таким образом, я могу делиться модулями с приложением React.

Я также добавил еще один скрипт npm "webpack": "webpack --config webpack.config.js", чтобы я мог создавать только сценарии расширения, а не все заново.

Окончательный результат: create-react-app проект, который НЕ ДОЛЖЕН запускаться npm run eject, который просто содержит вторую конфигурацию веб-пакета строго для связывания сценариев расширения.