使用@angular/cli 构建 chrome 扩展弹出窗口、选项和背景

Question

使用@angular/cli 构建 chrome 扩展弹出窗口、选项和背景

sur*_*rya 1 google-chrome-extension angular-cli angular

我想创建一个带有弹出窗口、选项页面和后台进程的 chrome 扩展。所以基本上是一个带有 popup.html、options.html 和 background.html 页面的角度应用程序。角度cli可以做到这一点吗？

今天我可以为每个页面使用多个 webpack 配置来做到这一点，并且它可以工作。现在我想用 angular-cli 替换它。任何人都可以指出我正确的方向，即种子项目或入门示例

谢谢

Answer 1

Joh*_*ing 6

经过很多努力，并深入了解有关surya答案的提示和技巧，我设法使用 Angular (9) 使我的解决方案工作。

清单文件

{
...
    "browser_action": {
        "default_popup": "/index.html#/popup"
    },
    "options_page": "/index.html#/options",
    "background": {
        "page": "/index.html#/background",
        "persistent": false
    },
...
}

Run Code Online (Sandbox Code Playgroud)

它使用散列位置策略通过#.

应用路由

路由将使用指定的路径，并加载适当的组件（popup，options，和background script分别地）

{
...
    "browser_action": {
        "default_popup": "/index.html#/popup"
    },
    "options_page": "/index.html#/options",
    "background": {
        "page": "/index.html#/background",
        "persistent": false
    },
...
}

Run Code Online (Sandbox Code Playgroud)

其中AppRoutingModule是在中引用的app.module.ts：

注意：我已经为我的Options和Popup组件创建了功能模块，但对于这个答案，它是无关的。您可以在此处声明提到的组件，就像我对BackgroundComponent.

const routes: Routes = [
    { path: 'popup', component: PopupComponent },
    { path: 'options', component: OptionsComponent },
    { path: 'background', component: BackgroundComponent },
    { path: '**', component: PopupComponent },
];

@NgModule({
    imports: [RouterModule.forRoot(routes, { useHash: true })],
    exports: [RouterModule]
})
export class AppRoutingModule { }

Run Code Online (Sandbox Code Playgroud)

设置好路由后，我们可以在 app.component（引导组件）中使用它通过路由加载正确的组件：

索引.html

@NgModule({
    declarations: [
        AppComponent,
        BackgroundComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        OptionsModule,
        PopupModule
    ],
    providers: [
         // This is needed because the manifest loads the index.html file, followed by a #, 
        { provide: LocationStrategy, useClass: HashLocationStrategy }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Run Code Online (Sandbox Code Playgroud)

应用组件

应用程序组件（为简单起见）仅包含<router-outlet>, 并将编排要加载的组件。

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Your Extension title</title>
    <base href="/index.html#/"> <!-- !!Important!! !-->

    <meta name="viewport"
        content="width=device-width, initial-scale=1">
</head>

<body>
    <app-root></app-root> <!-- Root of your application !-->
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

注：在base href中index.html文件必须设置为以下：/index.html#/，否则选项/弹出页面上连续重载将无法识别正确的路线，并抛出一个File not found响应页面。

例子

如果您导航到一个 URL，您可以看到在不同组件上工作的路由：

选项

chrome-extension://<Extension ID>/index.html#/options

弹出

chrome-extension://<Extension ID>/index.html#/popup

背景

即使这个组件只是作为一个后台脚本，你仍然可以将它作为一个普通的 Angular 组件使用——并且仍然可以使用 Angular 的特性——比如服务、注入等。

chrome-extension://<Extension ID>/index.html#/background

Answer 2

sur*_*rya 5

所以经过大量的谷歌搜索，这篇博文帮助了我。TLDR；不需要多个应用程序，单个应用程序将使用查询参数。例如在我的 manifest.json 我现在有这个

"browser_action": {
    "default_popup": "index.html?page=popup"
},
"options_page": "index.html?page=options",
"background": {
    "page": "index.html?page=background",
    "persistent": false
},

Run Code Online (Sandbox Code Playgroud)

然后在 Routes 中定义不同的组件（PopupComponent、OptionsComponent 和 BackgroundComponent）后，根据 'page' 参数进行导航。

归档时间：	8 年，5 月前
查看次数：	1332 次
最近记录：	5 年，4 月前