求基于Angular 5/6及最新CLI开发浏览器扩展的教程与经验

Hey Florian, great question—building browser extensions with Angular 5/6 and the official CLI is totally feasible, even if up-to-date tutorials are hard to come by. Let me share hands-on insights, step-by-step workflows, and best practices I’ve gathered from similar projects:

1. Project Setup & Initialization #

Start by creating a new Angular project using the CLI:

ng new extension-project --style css --routing false

Once initialized, restructure your project to separate the different extension components for better maintainability:

src/
├── popup/          # Popup UI components & logic
│   ├── app/
│   ├── index.html
│   ├── main.ts
│   └── polyfills.ts
├── content-script/ # Injected content script code
│   ├── app/
│   └── main.ts
├── background/     # Background event handling
│   └── main.ts
└── shared/         # Shared services, models, etc.

2. Configure Manifest.json #

Create a manifest.json in your project root (optimized for Manifest V2, which plays better with Angular 5/6 tooling):

{
  "manifest_version": 2,
  "name": "Angular Browser Extension",
  "version": "1.0",
  "browser_action": {
    "default_popup": "dist/popup/index.html",
    "default_icon": "assets/icon.png"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["dist/content-script/main.js"],
      "run_at": "document_end"
    }
  ],
  "background": {
    "scripts": ["dist/background/main.js"],
    "persistent": false
  },
  "permissions": ["activeTab", "storage"]
}

Ensure the paths point to your CLI-built output files (we’ll configure this next).

3. Angular CLI Multi-Project Configuration #

Update angular.json to define separate build targets for each extension component. This lets you compile each part independently:

"projects": {
  "popup": {
    "root": "src/popup/",
    "sourceRoot": "src/popup/",
    "projectType": "application",
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
          "outputPath": "dist/popup",
          "index": "src/popup/index.html",
          "main": "src/popup/main.ts",
          "polyfills": "src/popup/polyfills.ts",
          "tsConfig": "src/popup/tsconfig.app.json",
          "assets": ["src/assets"],
          "styles": ["src/popup/styles.css"]
        },
        "configurations": {
          "production": {
            "optimization": true,
            "outputHashing": "all"
          }
        }
      }
    }
  },
  // Repeat similar config for "content-script" and "background" projects
}

Now you can build each component with commands like:

ng build popup --prod
ng build content-script --prod

4. Key Component Implementation Tips #

Popup UI #

• Keep the popup layout compact (browser popups have limited width/height). Use Angular’s flex layout or custom CSS to optimize space.
• Bootstrap the popup Angular app normally in main.ts—no special adjustments needed here.

Content Scripts #

• To avoid Zone.js conflicts with the host page, disable Angular’s zone when bootstrapping the content script module:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { ContentScriptModule } from './app/content-script.module';

document.addEventListener('DOMContentLoaded', () => {
  // Create a container for your Angular component
  const container = document.createElement('div');
  document.body.appendChild(container);

  platformBrowserDynamic().bootstrapModule(ContentScriptModule, {
    ngZone: 'noop'
  }).catch(err => console.error(err));
});

• Use Angular services to wrap browser extension APIs (e.g., chrome.runtime.sendMessage) for cleaner component code.

Background Scripts #

• Background scripts don’t need DOM rendering, so you can use a minimal Angular setup (even just a service) or pure TypeScript.
• Focus on handling browser events (e.g., chrome.tabs.onUpdated) and sharing state between components via chrome.storage.

5. Gulp Integration for Content Scripts #

Since you already have a Gulp task to bundle a single content script, integrate it with the CLI build:

1. Run ng build content-script first to generate the raw Angular output.
2. Use Gulp to concatenate/minify the output into a single content-script.js file that matches your manifest’s path.

6. Debugging & Testing #

• Load the unpacked extension in Chrome via chrome://extensions/ (enable developer mode first).
• Use the "Inspect popup" option to debug the Angular popup app, and the content script console in the host page’s dev tools.
• Use ng build --watch for hot-reloading during development—just refresh the extension in Chrome after changes.

内容的提问来源于stack exchange，提问作者Florian