如何构建多页面Angular Chrome扩展？编译多HTML页面遇阻

一、配置Angular生成多HTML文件 #

Angular默认是单页应用，要生成多个HTML文件，需在angular.json中配置多入口页面：

1. 创建第二个页面的文件结构
   在src目录下新增独立页面的文件，比如showAllData页面：

src/
├── showAllData/
│   ├── main.ts
│   ├── app.module.ts
│   ├── show-all-data.component.ts
│   ├── show-all-data.component.html
│   └── show-all-data.component.css

2. 修改angular.json配置
   找到项目的architect.build.options，添加多页面的index、main等配置：

"projects": {
  "your-extension-name": {
    "architect": {
      "build": {
        "options": {
          "outputPath": "dist/your-extension-name",
          "index": [
            {
              "input": "src/index.html",
              "output": "index.html"
            },
            {
              "input": "src/showAllData/show-all-data.html",
              "output": "showAllData.html"
            }
          ],
          "main": [
            "src/main.ts",
            "src/showAllData/main.ts"
          ],
          "polyfills": "src/polyfills.ts",
          "tsConfig": "tsconfig.app.json",
          "assets": [
            "src/favicon.ico",
            "src/assets",
            "src/manifest.json"
          ],
          "styles": [
            "src/styles.css",
            "src/showAllData/show-all-data.component.css"
          ]
        }
      }
    }
  }
}

3. 编写第二个页面的Angular代码

• showAllData/main.ts：启动该页面的Angular模块

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

platformBrowserDynamic().bootstrapModule(ShowAllDataModule)
  .catch(err => console.error(err));

• showAllData/app.module.ts：页面独立模块

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ShowAllDataComponent } from './show-all-data.component';

@NgModule({
  declarations: [ShowAllDataComponent],
  imports: [BrowserModule],
  bootstrap: [ShowAllDataComponent]
})
export class ShowAllDataModule { }

• showAllData/show-all-data.html：页面入口HTML，注意设置base href="./"

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Show All Data</title>
  <base href="./">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <app-show-all-data></app-show-all-data>
</body>
</html>

执行ng build后，dist文件夹会生成index.html和showAllData.html两个页面文件。

二、正确在Popup中打开新标签页 #

Chrome扩展的新标签页是独立页面，不能用Angular路由跳转，需使用Chrome扩展API：

1. 更新manifest.json权限
   添加tabs权限，并声明可访问的资源：

{
  "manifest_version": 3,
  "name": "Your Extension",
  "version": "1.0",
  "permissions": ["tabs"],
  "action": {
    "default_popup": "index.html"
  },
  "web_accessible_resources": [
    {
      "resources": ["showAllData.html", "*.js", "*.css"],
      "matches": ["<all_urls>"]
    }
  ]
}

2. 在Popup组件中调用Chrome API
   在Popup组件的点击事件中，使用chrome.tabs.create打开新页面：

// popup.component.ts
import { Component } from '@angular/core';

declare var chrome: any;

@Component({
  selector: 'app-popup',
  templateUrl: './popup.component.html',
  styleUrls: ['./popup.component.css']
})
export class PopupComponent {
  openShowAllDataPage() {
    const pageUrl = chrome.runtime.getURL('showAllData.html');
    chrome.tabs.create({ url: pageUrl });
  }
}

在Popup的HTML中添加触发按钮：

<button (click)="openShowAllDataPage()">查看全部数据</button>

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