让我们尝试使用Angular来创建一个Chrome扩展
首先
Chrome扩展是由HTML、JavaScript和CSS组成的，因此可以使用各种框架和库。因此，在本文中，我们将使用Angular来总结制作一个仅显示当前标签页信息的非常简单的Chrome扩展的步骤。
此外，由于本文仅关注开发步骤，因此不包括Angular深入开发和发布到Chrome应用商店的内容。关于发布Chrome扩展的步骤，请参考下面的文章进行查阅。
开发一款最低限度的Chrome浏览器扩展功能，并将其发布到网上应用商店的步骤。
此外，在本文中，我們假設您已經預先安裝了Node.js和npm。如果尚未安裝，請先安裝它們。
开发Chrome扩展
那我们来看一下使用Angular开发Chrome扩展的实际步骤。
安装Angular CLI。
Angular CLI是一个非常出色的命令行工具，可以自动生成Angular的源代码、构建环境和测试环境等。在这个开发过程中，也会使用Angular CLI。
首先，請在終端機上執行以下命令來安裝Angular CLI。
$ npm install @angular/cli -g
安装了Angular CLI后，执行ng -v命令来确认Angular CLI是否正确安装。如果显示了Angular CLI的文本，则表示安装成功。
$ ng -v
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
@angular/cli: 1.4.4
Angular的环境设定
安装完Angular CLI后，在终端中转到开发目录。假设我们在~/dev目录下进行开发。
$ cd ~/dev
在切換到開發用目錄後，使用Angular CLI來建立Angular的開發環境。使用ng new指令來建立環境。在終端機中執行以下指令，來建立環境到chrome-ext這個目錄中。
$ ng new chrome-ext
当执行上述命令时，将在指定的目录中构建Angular环境，并自动下载所需的npm包。请确保在chrome-ext目录中生成了以下所示的各种文件结构。
dev
|- chrome-ext
|- src
| |- ...
|
|- e2e
| |- ...
|
|- README.md
|- karma.conf.js
|- package-lock.json
|- package.json
|- protractor.conf.js
|- tsconfig.json
|- tslint.json
# 一部省略
添加清单文件
要创建Chrome扩展，需要一个定义扩展内容的清单文件manifest.json。因此，请在src目录中添加manifest.json并复制粘贴以下内容。
{
"name": "Chrome Ext",
"manifest_version": 2,
"description": "タブの情報を表示します",
"version": "1.0",
"browser_action": {
"default_popup": "index.html"
},
"permissions": [
"tabs"
]
}
由于需要获取选项卡的信息，所以我们在权限中定义了”tabs”。请注意，在这里我们省略了清单文件的详细信息，如果您想了解更多，请查阅官方文档。
修改.angular-cli.json文件
需要将添加到 src 文件夹中的 manifest.json 文件与其他文件一起在构建时输出到 dist 目录中。为了将 manifest.json 设置为输出目标，您需要打开 .angular-cli.json 文件，并将 manifest.json 添加到 assets 下面，如下所示：
{
...
"apps": [
{
...
"assets": [
"assets",
"favicon.ico",
"manifest.json"
],
}
]
}
@types/chrome的安装
在使用 Angular + TypeScript 进行开发时，你需要在开发之前通过 npm 安装 @types/chrome 包来定义 Chrome 的类型。安装后，你可以通过 Visual Studio Code 等工具实现自动补全功能，使得开发更加轻松愉快。
请在终端中进入chrome-ext目录并执行以下命令，以安装@types/chrome库。
$ npm install @types/chrome --save-dev
通过这样做，@types/chrome将被安装，并在package.json中添加类似以下的devDependencies。
{
...
"devDependencies": {
"@types/chrome": "0.0.48",
...
}
请打开位于src目录下的tsconfig.app.json文件，并在compilerOptions.types中添加chrome。
{
"compilerOptions": {
...
"types": [
"chrome"
]
}
}
编辑源代码
从这里开始，我们要实际编辑Angular文件。
更改AppComponent
首先，我们将修改src / app目录中定义的AppComponent的内容如下。
<div style="text-align:center">
<h1>{{tab.title}}</h1>
{{tab.url}}
</div>
<pre style="background-color:#e0e0e0">
{{tab | json}}
</pre>
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
tab: chrome.tabs.Tab;
constructor(private ref: ChangeDetectorRef) { }
ngOnInit() {
// 現在のタブのオブジェクトを取得する
chrome.tabs.query({ 'active': true, 'lastFocusedWindow': true }, (tabs) => {
this.tab = tabs[0];
// 変更があったことを通知する
this.ref.detectChanges();
});
}
}
在这里，我们使用chrome.tabs.query()函数来获取当前打开的标签页信息。而且，由于回调函数是从Angular的非托管代码中调用的，所以我们使用ChangeDetectorRef的detectChanges()方法来通知数值发生了变化。
更改CSS
打开 src/styles.css 文件，然后如下指定 body 的尺寸。
body {
width: 400px;
height: 400px;
}
通過指定body的大小，您可以确定弹出区域的大小。
建筑
最后，使用Angular CLI构建所创建的代码。请在终端中执行以下命令。
$ ng build -aot
使用该命令会生成dist文件夹，并将所需文件放置其中。
注册Chrome扩展
最后将在dist中生成的文件作为Chrome扩展进行注册。
当点击按钮时，您将能够选择目录，并指定先前生成的dist目录以读取文件。
应用修正后的代码
在进行开发的过程中，我们将不断修正代码并实际运行Chrome扩展来推进开发。修正后的代码可以通过以下步骤进行反映。
-
- 构建 (ng build -aot)
- 重新加载扩展
最后/最终会
以上是使用Angular创建Chrome扩展程序的一系列步骤。通过使用Angular CLI，可以轻松创建基于Angular的Chrome扩展程序，所以在太无聊以至于感觉就要死去的时候，可以试试看。
顺便提一下，这里使用的代码已经在GitHub上公开了。
请你在中国母语中进行转述，仅需要一个选项：
可以参考以下内容
使用Angular 4来构建自己的Chrome扩展。
使用Angular CLI来构建一个简单的表情符号Chrome扩展。
在TypeScript中使用Chrome扩展API。