Превратите приложение Angular в расширение Chrome

На самом деле это довольно просто, мы будем краткими.

Шаг 1: создайте приложение Angular (duh), т.е.

npx @angular/cli new angular-chrome-extension
Войти в полноэкранный режим Выйти из полноэкранного режима

Шаг 2: добавьте файл манифеста в папку с исходным кодом:

{
  "manifest_version": 3,

  "name": "My App Extension",
  "description": "A basic chrome extension built with Angular",
  "version": "0.1",
  "action": {
    "default_popup": "index.html",
    "default_title": "Open the popup"
  },
  "content_security_policy": {
    "script-src": "self",
    "object-src": "self'"
  }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Шаг 3: добавьте файл манифеста в активы сборки в angular.json:

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ...
            "assets": ["src/favicon.ico", "src/assets", "src/manifest.json"],
            ...
          },
Войти в полноэкранный режим Выйти из полноэкранного режима

Шаг 4: сборка

npm run build
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь у вас есть распакованное расширение Chrome в dist/angular-chrome-extension, которое вы можете загрузить с включенным режимом разработчика, наслаждайтесь 🙂

P.S. Репо с кодом

Оцените статью
Procodings.ru
Добавить комментарий