как использовать угловую 5, чтобы построить хром расширение

Question

Я пытаюсь создать расширение Chrome, используя Angular 5. Я создал базовое угловое приложение, используя Angular Material , и оно отлично работало как угловое приложение (я использовал ng build для проверки).Я попытался переместить приложение в расширение Chrome, поэтому я использовал ng build для создания кода и добавил следующий манифест

{
   "name": "Getting Started Example",
   "version": "1.0",
   "description": "Build an Extension!",
   "background": {
      "scripts": ["runtime.js","polyfills.js","styles.js","vendor.js","main.js"],
      "persistent": false
    },
    "page_action": {
       "default_popup": "index.html"
     },
    "manifest_version": 2
}

фоновые сценарии - это сценарии, созданные угловым компилятором и используемые длясделать приложениеЯ загружаю свое расширение, но получаю эту ошибку

Uncaught EvalError: Отказался оценивать строку как JavaScript, поскольку unsafe-eval не является допустимым источником сценария в следующей директиве Content Security Policy: "script-src 'self' blob: filesystem: chrome-extension-resource: ".

что это значит?Как я могу запустить мое угловое приложение как расширение Chrome?

Answer 1

Вам нужно добавить эту строку в manifest.json, чтобы ошибка исчезла:

 "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

и удалите следующую строку кода, потому что в этом нет необходимости:

"scripts": ["runtime.js","polyfills.js","styles.js","vendor.js","main.js"]

Настройка правильного рабочего процесса - это отдельная история.Каждый раз, когда вы вносите изменения, вам нужно пересобрать проект вручную.Это может быть чем-то вроде хлопот.

К счастью, я создал проект скаффолда для такого рабочего процесса (файлы автоматического просмотра, сборка для производства и архивирование и т. Д.)

см .: https://github.com/larscom/angular-chrome-extension для получения дополнительной информации.

Answer 2

Вам не нужно добавлять JS-файлы в скрипт, просто добавьте ссылку на файл index.html вашей папки dist. Он автоматически добавит оттуда все необходимые JS / CSS-файлы.

, поэтому просто удалите эту строкукод

"scripts": ["runtime.js","polyfills.js","styles.js","vendor.js","main.js"],

Подробнее см. здесь -

• https://medium.com/@PardeepJain/build-your-own-chrome-extension-using-angular-4-ecedbd7404cc