本文由Dan Prince进行同行评审。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！

Chrome扩展程序是小型网络应用程序，可向Google Chrome浏览器添加功能。 他们可以扩展和自定义浏览器行为，开发人员工具或新标签页。 扩展程序可以从Chrome网上应用店下载。

在本教程中，我们将创建一个Chrome扩展程序，该扩展程序使我们可以保存网站URL并将其显示在每个新标签页上。 当然，有本地Chrome书签，但是我们希望将这些书签直接集成到新标签页中并控制其外观。

你可以在GitHub的库中的完整的项目代码， 在这里 ，并随时安装一个扩展的运行版本 （有一些更多的功能）。

我们正在建设

让我们从我们要开发的内容的简要概述开始。 屏幕快照显示，我们将创建一个列表，其中包含可变数量的书签项。 书签是单击后打开相应URL的链接。

每个书签都需要两条信息：其标题和URL。 将有一个编辑此信息的选项，以及一个删除书签的选项。 要编辑书签，我们需要一个带有两个输入字段和一个提交按钮的表单。

为了处理用户输入并呈现列表，我们将Angular 2与TypeScript结合使用 。 Angular 2非常适合构建客户端应用程序，并且可以与TypeScript（一种类型化的JavaScript超级集）一起很好地工作。 如果您想从Angular 2和TypeScript的入门开始，我建议您这篇文章 。

您只需要一个文本编辑器和Node Package Manager（npm）即可学习本教程。 但是，发布扩展程序需要一个Google开发人员帐户，可以在此处创建该帐户。

设置和结构

现在是时候在实际的应用程序上工作了，所以让我们创建一个新的项目文件夹：

mkdir sitepoint-extension && cd sitepoint-extension

TypeScript配置

接下来，我们将tsconfig.json文件添加到项目文件夹。 该文件指示TypeScript编译器如何编译我们的.ts文件。

{"compilerOptions": {"target": "ES5","module": "system","moduleResolution": "node","sourceMap": true,"emitDecoratorMetadata": true,"experimentalDecorators": true,"removeComments": false,"noImplicitAny": false},"exclude": ["node_modules"]
}

重要的设置是compilerOptions 。 在那里，我们指定ECMAScript目标版本应为ES5 ，并且模块代码生成应使用SystemJS（ "module": "system" ）进行。

使用"sourceMap": true将生成"sourceMap": true源地图文件。 这些.map文件非常适合调试，因为浏览器可以使用它们将已编译的ES5代码映射到TypeScript代码上。

对于本教程，我们不需要了解更多关于tsconfig.json文件的信息。 完整的文档可以在这里找到。

Package.json

我们正在使用npm安装所需的软件包，并使用npm脚本创建一些开发和构建任务。 为此，我们将package.json添加到主目录中。

Angular 2目前处于测试阶段。 在本教程中，我使用了beta 7版本。 您当然可以使用较新的版本，但是由于框架可能仍会更改，因此我不能保证一切都会顺利进行。

{"name": "SitePointBookmarkExtension","description": "A Chrome Extension for Bookmarks","version": "1.0.0","scripts": {"lite": "lite-server","tsc": "tsc","tsc:w": "tsc -w","start": "concurrently \"npm run tsc:w\" \"npm run lite\""},"dependencies": {"angular2": "2.0.0-beta.7","systemjs": "0.19.22","es6-promise": "^3.0.2","es6-shim": "^0.33.3","reflect-metadata": "0.1.2","rxjs": "5.0.0-beta.2","zone.js": "0.5.15"},"devDependencies": {"concurrently": "^2.0.0","lite-server": "^2.1.0","typescript": "^1.7.5"}
}

现在让我们使用

npm install

请注意，其中包含一些准备好的npm脚本，可以使用npm run [script name]来执行。 目前，有四个脚本可以帮助我们编译TypeScript文件并创建开发服务器。

Manifest.json

在创建应用程序之前，我们需要添加另一个.json文件manifest.json 。 每个Chrome扩展程序都需要该文件，因为它指定有关网上应用店和浏览器应如何处理该扩展程序的信息。

稍后我们将完成文件，但现在我们只添加必需和推荐的属性：

{"manifest_version": 2,"name": "SitePoint Bookmark Extension","short_name": "Make the most of a new tab","description": "This extension helps you save your favorite webpages.","version": "1.0.0","author": "Michaela Lehr @fischaelameer"
}

书签组件

Angular 2是一个基于组件的框架，我们的第一个组件将是一个书签。 稍后，该组件将成为子组件，因为我们将创建一个父列表组件以包含书签。

让我们创建一个新的文件夹scripts并在其中创建一个名为bookmark.component.ts的文件。

// To create a component, we need Angular's "Component" function.
// It can be imported from the "angular2/core" module.
import { Component } from 'angular2/core';// A component decorator tells Angular that the "BookmarkComponent" class
// is a component and adds its meta data: the selector and the template.
@Component({selector: 'sp-bookmark',template: '<h1>Bookmark</h1>'
})// The "BookmarkComponent" module exports the "BookmarkComponent" class,
// because we will need it in other modules,
// e.g. to create the bookmark list.
export class BookmarkComponent { }

要引导BookmarkComponent组件，我们必须添加另一个文件，我们称为boot.ts ：

// We need to reference a type definition (or 'typings') file 
// to let TypeScript recognize the Angular "promise" function
// (we'll need this later on) otherwise we'll get compile errors.
/// <reference path="../node_modules/angular2/typings/browser.d.ts" />// Angular's "bootstrap" function can be imported 
// from the angular2/platform/browser module.
// Since we want to bootstrap the "BookmarkComponent",
// we have to import it, too.
import { bootstrap }    from 'angular2/platform/browser'
import { BookmarkComponent } from './bookmark.component'// We can now bootstrap the "BookmarkComponent" as the root component.
bootstrap( BookmarkComponent );

另一个新文件system.config.js配置SystemJS模块加载器。 它将加载刚刚创建的boot.ts文件。

// SystemJS is the module loader for the application. 
// It loads the libraries and our modules and then catches and logs errors, 
// that may occur during the app launch.
System.config({packages: {scripts: {format: 'register',defaultExtension: 'js'}}
});
System.import('scripts/boot').then(null, console.error.bind(console));

在我们能在浏览器中看到任何内容之前，我们需要的最后一件事是一个index.html文件。 我们将文件放在项目目录的根目录中，与.json文件处于同一级别。

<html><head><title>SitePoint Bookmark Extension</title><meta name="viewport" content="width=device-width, initial-scale=1"><!-- We load the libraries we need directly from the "node_modules" folder.In a more complex project, we would use a different approach here, e.g. working with a build tool like gulp.js or Angular-CLI. --><script src="node_modules/angular2/bundles/angular2-polyfills.js"></script><script src="node_modules/systemjs/dist/system.src.js"></script><script src="node_modules/rxjs/bundles/Rx.js"></script><script src="node_modules/angular2/bundles/angular2.dev.js"></script><!-- Load the SystemJS config --><script src="scripts/system.config.js"></script></head><body><!-- Here we are using the selector "sp-bookmark", which we defined as component meta data in the "BookmarkComponent" decorator. Everything inside the element tag will only be seen until our application is loaded. --><sp-bookmark>Loading bookmarks...</sp-bookmark></body></html>

让我们通过编译TypeScript文件并启动服务器来测试我们所做的事情：

npm run start

如果一切正常，我们应该看到浏览器打开一个新选项卡，并在显示模板标题“书签”之前显示“正在加载书签...”段落。

书签模板

目前，我们的书签模板仅包含一个静态标题，但这并不是我们真正想要的。 为了显示书签的完整标记，我们将引用一个单独的html模板，称为bookmark.html 。

让我们创建一个新的文件夹templates在我们项目的根，而且，我们的新书签模板中：

<div class="bookmark"><!-- We are using the interpolation template syntax to bind the component properties "bookmark.name" and "bookmark.url" to our template. --><a href="{{bookmark.url}}" class="bookmark__link">{{bookmark.name}}</a><!-- Every bookmark has two buttons, to let users edit and delete a bookmark.--><span class="bookmark__button-wrapper"><!-- The edit button has an event binding "(click)", which sets the component variable "submitted" to true. It also has a property binding "[hidden]",which hides the button, when the variable "submitted" is true. --><button class="bookmark__button" (click)="submitted=true" [hidden]="submitted">Edit</button><!-- The delete button uses an event binding "(click)", that calls the component function "onDelete()", when a user clicks it. --><button class="bookmark__button" (click)="onDelete(bookmark)">Delete</button></span><!-- To edit a bookmark, we show a form if the value of the property "submitted" is false. --><div class="bookmark__form-wrapper" [hidden]="!submitted"><!-- The form has a submit button, which allows us to use the Angular directive "ngSubmit".It calls another component function "onSubmit()". --><form class="bookmark__form" (ngSubmit)="onSubmit()"><label class="bookmark__form__label">Name: </label><!-- There are two input fields for the two properties "bookmark.name" and "bookmark.url". Both use the two-way data binding template syntax, to change the property values. --><input class="bookmark__form__input" [(ngModel)]="bookmark.name" placeholder="Name"/><label class="bookmark__form__label">URL: </label><input class="bookmark__form__input" [(ngModel)]="bookmark.url" placeholder="URL"/><button class="bookmark__form__button" type="submit">Done</button></form></div>
</div>

模板参考templateUrl替换BookmarkComponent装饰器中的template元数据：

@Component({selector: 'sp-bookmark',templateUrl: './templates/bookmark.html'
})

浏览器将同时显示编辑和删除按钮以及表单。 插值保持为空，因为未声明属性bookmark.name和bookmark.url 。

让我们将缺少的属性添加到BookmarkComponent 。 稍后我们可以使用来自预置或localStorage动态数据，但现在，让我们继续使用硬编码的书签。

import { Component } from 'angular2/core';// We are using an interface to represent a bookmark.
// A single bookmark is now strongly typed:
// it has to have two properties "name" and "url",
// which both must be a string.
interface Bookmark {name : string,url : string
}@Component({selector: 'sp-bookmark',templateUrl: './templates/bookmark.html'
})export class BookmarkComponent {// The bookmark property is of the type "Bookmark",// defined in the interface above.bookmark : Bookmark = {name : 'SitePoint',url : 'https://sitepoint.com'}// Setting the default value for the "submitted" property.submitted = false;}

切换到浏览器后，它应该为我们显示带有两个按钮的有效超链接。 该表单当前处于隐藏状态，因为我们将submitted的属性的值设置为false。 由于我们尚未实现用于书签的编辑和删除功能，因此该功能尚无法使用。

书签列表

为了创建书签列表并填充一些数据，我们将创建父组件list.component.ts 。

import { Component } from 'angular2/core';
import { Bookmark } from './bookmark.component';
import { BookmarkComponent } from './bookmark.component';// The ListComponent metadata defines the component's selector,
// the url of the template and the directives used in this template.
@Component({selector: 'sp-list',templateUrl: './templates/list.html',directives: [ BookmarkComponent ]
})export class ListComponent { }

我们还需要更改boot.ts文件中提到的组件以及index.html使用的元素。 我们希望我们的应用程序加载ListComponent ，这又将加载BookmarkComponent 。

/// <reference path="../node_modules/angular2/typings/browser.d.ts" />import { bootstrap }    from 'angular2/platform/browser';
import { ListComponent } from './list.component';bootstrap( ListComponent );

<body><sp-list>Loading bookmarks...</sp-list>
</body>

默认数据

在这种状态下，由于缺少默认数据，新用户的书签列表将为空。 不过，初次使用的用户应该会看到一些书签，因此我们将在一个名为list.data.constant.ts的新文件中创建一些默认的书签数据：

// We are using a constant here,
// because we do not want to change the default data.
export const BOOKMARKS = [{ 'name': 'Twitter', 'url': 'https://twitter.com' },{ 'name': 'Github', 'url': 'https://github.com' },{ 'name': 'Sitepoint', 'url': 'https://sitepoint.com' },{ 'name': 'Codepen', 'url': 'https://codepen.com' }
];

清单服务

我们不希望ListComponent决定使用默认数据还是应该使用localStorage存储的数据，因此，一个名为list.service.ts的新文件将处理数据导入。

import { BookmarkComponent } from './bookmark.component';
import { BOOKMARKS } from './list.data.constant';// Importing the "Injectable" function from the angular2/core module
// and adding the "@Injectable" decorator lets us use dependency injection
// in this service.
import { Injectable } from 'angular2/core';@Injectable()export class ListService {// We create three variables: // one for possible data in the localStorage,// one for our default data and// one for the data our service should return.bookmarksLocalStorage = JSON.parse(  localStorage.getItem('sp-bookmarklist') );bookmarksDefaultData = BOOKMARKS;bookmarksToReturn = this.bookmarksDefaultData;// The "getBookmarks()" function checks if there is data in the local storage.// If there is, we return this data,// if there isn't we return the default data.getBookmarks() {if ( this.bookmarksLocalStorage !== null ) {this.bookmarksToReturn = this.bookmarksLocalStorage;}return Promise.resolve( this.bookmarksToReturn );}// A "setBookmarks()" function saves new data in the local storage.setBookmarks( bookmarks : Object ) {localStorage.setItem( 'sp-bookmarklist', JSON.stringify( bookmarks ) );}}

现在，让我们在ListComponent使用该服务。 我们必须导入服务，将其作为提供程序添加到组件中，然后通过将其传递给构造函数中的私有变量来注入它。

另外，我们还必须添加OnInit生命周期钩子，一旦ListComponent被激活，该钩子就会被调用。 此函数将使用ListService获取书签列表。 由于我们将异步获取书签，因此我们正在使用ES2015 Promise和Arrow 函数 。

import { Component } from 'angular2/core';
import { OnInit } from 'angular2/core';
import { Bookmark } from './bookmark.component';
import { BookmarkComponent } from './bookmark.component';
import { ListService } from './list.service';@Component({selector: 'sp-list',templateUrl: './templates/list.html',directives: [ BookmarkComponent ],providers: [ ListService ]
})export class ListComponent implements OnInit {public bookmarks : Object;constructor( private listService : ListService ) {}// The function "getBookmarkLists" requests the bookmarks asynchronously.// When the promise is resolved, the callback function assigns// the bookmarks to the component's bookmarks property.getBookmarkLists() {this.listService.getBookmarks().then( bookmarks => this.bookmarks = bookmarks );}// The "ngOnInit" function gets called, when the component gets activated.ngOnInit() {this.getBookmarkLists();}}

清单范本

现在缺少的是list.html模板。 因此，让我们创建一个并将其放入templates文件夹中。 该模板仅包含一个带有无序列表的<section>元素。 使用Angular的内置结构指令*ngFor重复此列表中的一个列表元素。 在列表元素内部，使用了BookmarkComponent组件的选择器<sp-bookmark> 。

<section class="bookmarklist-container bookmarklist-container--blue-dark"><ul class="bookmarklist__sublist"><!-- Angular's built-in structural directive "*ngFor" instantiates a list element for each bookmark. The hash prefix means, that the private variables "bookmark" and "i" are created. They can be used on the list element's child elements.--><li *ngFor="#bookmark of bookmarks; #i = index"><!-- The template property binding "[bookmark]" sets the value to the component property "bookmark". In addition there are two custom component event bindings "(bookmarkChanged)" and "(bookmarkDeleted)". Whenever one of these events were raised, their respective functions will be executed. --><sp-bookmark [bookmark]="bookmark" (bookmarkChanged)="setBookmarks()" (bookmarkDeleted)="deleteBookmark(bookmark, i)"></sp-bookmark></li></ul>
</section>

为了使一切正常，我们必须在bookmark.component.ts文件中进行一个小的更改。 我们正在使用模板属性绑定[bookmark] 。 因此，必须在组件装饰器中将此属性声明为输入属性：

@Component({selector: 'sp-bookmark',templateUrl: './templates/bookmark.html',inputs : ['bookmark']
})

现在，浏览器将显示带有默认数据的列表。

大事记

目前，我们仅缺少用于编辑和删除书签的功能。 用于编辑和删除书签的单击发生在子组件bookmark ，而父组件应对此做出反应。 我们需要一种让子组件与父组件对话的方法。 这可以通过自定义事件来实现。

我们已经为bookmark.html模板中的两个按钮准备了单击处理程序，并在list.html模板中为两个事件添加了两个事件侦听器(bookmarkChanged)和(bookmarkDeleted) 。 让我们将一些事件发射器添加到bookmark.component.ts ：

import { Component } from 'angular2/core';
import { Output } from 'angular2/core';
import { EventEmitter } from 'angular2/core';// [...] I left some code out of the example to save space.export class BookmarkComponent {bookmark : Bookmark;submitted = false;// Events flow outside the child component and therefor need an output decorator.@Output() bookmarkChanged : EventEmitter<any> = new EventEmitter();@Output() bookmarkDeleted : EventEmitter<any> = new EventEmitter();// Whenever a user clicks on "Done" after editing a bookmark,// an event is fired, which indicates that the bookmark was changed.// To hide the form, the "submitted" property is set to false again.onSubmit( bookmark : Bookmark ) {this.submitted = false;this.bookmarkChanged.emit( bookmark );}// When the "Delete" button is clicked, the event "bookmarkDeleted" // will be fired.onDelete( bookmark : Bookmark ) {this.bookmarkDeleted.emit( bookmark );}}

接下来，我们必须使用两个函数setList()和deleteBookmark()对ListComponent这些事件做出反应：

// [...]export class ListComponent implements OnInit {public bookmarks : Array< Object >;constructor( private listService : ListService ) {}getBookmarkLists() {this.listService.getBookmarks().then( bookmarks => this.bookmarks = bookmarks );}ngOnInit() {this.getBookmarkLists();}// setList uses the "ListService" to save the complete list.setList() {this.listService.setBookmarks( this.bookmarks );}// The function deletes the bookmark and saves the complete list.deleteBookmark( bookmark : Bookmark, i : number ) {this.bookmarks.splice( i, 1 );this.setList();}}

现在一切正常。 通过编辑或删除书签来检查这两种功能。

造型

在添加扩展功能以使用Chrome扩展按钮创建新书签之前，我们将花费几秒钟的时间来添加一些CSS。 由于我们已经使用类准备了标记，因此我们只需要在新的CSS文件夹中添加CSS文件，然后在index.html引用它即可。 您可以在此处下载CSS。

<html><head><title>SitePoint Bookmark Extension</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="css/main.css"><!-- [...] --></html>

该应用程序现在看起来像这样：

Chrome扩展程序功能

我们准备添加一些Chrome扩展功能。 我们要做的是在Chrome浏览器工具栏中添加一个图标，单击该图标会将当前打开的页面保存到我们的书签列表中。 此外，新标签应打开Angular 2书签列表，而不是Chrome的默认新页面。 首先，使用Chrome JavaScript API将当前打开的网页保存到我们的列表中。

活动页面

当用户单击工具栏上的图标时，我们必须在scripts文件夹中添加一个额外的脚本，该scripts将被加载。 由于我们将事件页面用于此任务，因此我们将调用新脚本eventPage.ts 。 当用户单击工具栏图标时，应执行一些代码。 因此，我们使用Chrome.browserAction.onClicked侦听器 。 要获取当前打开的标签页的标题和URL，必须使用Chrome.tabs API 。

///<reference path="chrome/chrome.d.ts" />import { Injectable } from 'angular2/core';
import { ListService } from './list.service';@Injectable()export class EventPage {// The event listener should be set when the "EventPage" class is initialized.// Therefore we are using the constructor for adding it to the "Chrome.browserAction".// To set and get the bookmarkLists, we are using the "ListService".constructor ( listService : ListService ) {let bookmarkLists : Array< Object >;// The "Chrome.browserAction" object throws an error,// when it is not available in development mode.// This is why we are only logging a message,// if it is undefined.if (typeof chrome.browserAction !== 'undefined') {// The Chrome "browserAction" is responsible for the icon in the Chrome toolbar.// This is when we are get the latest list of bookmarks from the "ListService"// and call the function "getSelectedTab" after the promise is resolved.chrome.browserAction.onClicked.addListener( function ( tab ) {listService.getBookmarks().then( bookmarkLists => {bookmarkLists = bookmarkLists;getSelectedTab( bookmarkLists );});});} else {console.log( 'EventPage initialized' );}// The Chrome tabs API gives us access to the current tab,// its title, and its url, which we are using to add a new bookmark// and save the list of bookmarks again with the "ListService".function getSelectedTab( bookmarkLists ) {chrome.tabs.getSelected( null, function ( tab ) {let newBookmark : Object = {name : tab.title,url : tab.url};bookmarkLists.push( newBookmark );listService.setBookmarks( bookmarkLists );});}}}

第一行需要一些解释，因为我们需要更多文件才能编译脚本。 要在TypeScript中使用Chrome JavaScript API的功能，我们必须告知TypeScript API的全局对象。 为此，我们必须将参考路径///<reference path="chrome/chrome.d.ts" />到脚本中，并将TypeScript定义文件（ .d.ts ）添加到项目的script文件夹中。 我们需要的文件可以在这里下载。

Manifest.json

一切都放在manifest.json文件中。 让我们一个接一个地添加必要的属性。 首先，我们将使用工具提示添加对扩展图标和工具栏图标的引用：

"icons": {"19": "Icon-19.png","38": "Icon-38.png","48": "Icon-48.png","128": "Icon-128.png"
},"browser_action": {"default_icon": {"19": "Icon-19.png","38": "Icon-38.png"},"default_title": "Open a new tab to view your bookmarks."
}

每当用户打开新标签页时，Chrome覆盖页面就会加载我们的Angular应用程序：

"chrome_url_overrides" : {"newtab": "index.html"
}

具有persistent: false对象的background属性为事件页面脚本添加Chrome事件监听器：

"background": {"page": "index.html","persistent": false
}

接下来，我们必须提供内容安全策略（CSP）的设置 。 "manifest_version": 2的默认内容安全策略"manifest_version": 2是script-src 'self'; object-src 'self' script-src 'self'; object-src 'self' 。 在我们的例子中，我们必须添加unsafe-eval因为我们的库之一依赖于评估后的JavaScript。

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

我们必须添加到manifest.json的最后一件事是一个permissions属性，该属性允许我们访问有关活动选项卡的信息。

"permissions": ["activeTab"]

在Chrome中测试扩展程序

我们准备测试实际的扩展。 浏览至chrome://extensions/可以概述当前已安装的扩展程序，还可以选择上传未打包的扩展程序。 要将扩展上传到Chrome网上应用店 ，必须将其压缩为.zip 。 让我们再添加两个npm脚本，这将帮助我们将所需的模块复制到lib文件夹中并压缩所有内容：

"copy-lib": "mkdir lib && cp node_modules/{angular2/bundles/angular2-polyfills.js,systemjs/dist/system.src.js,rxjs/bundles/Rx.js,angular2/bundles/angular2.dev.js} lib/","compress": "zip -r -X $npm_package_name-$npm_package_version.zip ./{templates/*,lib/*,css/*,scripts/*.js,*.html,manifest.json,*.png,*.ico}"

不要忘记在index.html文件中更改对这些文件的引用：

<script src="lib/angular2-polyfills.js"></script>
<script src="lib/system.src.js"></script>
<script src="lib/Rx.js"></script>
<script src="lib/angular2.dev.js"></script>

我们使用以下命令运行npm脚本

npm run copy-lib
npm run compress

我们完成了！ 要在Chrome中测试扩展程序，请访问chrome://extensions/ ，激活开发人员模式，然后使用“加载解压后的扩展程序”按钮上传解压后的zip文件夹。 一个新选项卡应显示我们的书签应用程序， 然后单击工具栏上另一个网站上的新扩展名图标 ，应向该列表添加一个新书签。 扩展程序的选项卡必须刷新 ，才能使新书签可见。

注意 ：要调试eventPage脚本，我们可以从chrome://extensions/页面打开调试窗口 。 背景页面有一个名为“检查视图”的超链接。

接下来做什么？

我们的书签应用程序绝对可以改进：

• 您可以添加其他功能，例如更改配色方案和书签导入。
• UX也有改进，例如，用户成功添加新书签后弹出反馈。
• 我们可能想向我们的应用程序添加单元测试或端到端测试。 可以在此处找到有关测试Angular 2应用程序的开发人员指南。
• 更好的构建过程和一些环境变量会很棒。 代替npm脚本，我们可以使用Angular-CLI ，它具有用于脚手架，本地开发服务器和端到端测试的更多选项。
• 当然，您可能希望将应用程序发布到网上商店。 可以从Chrome开发人员仪表板中完成此操作。

希望本教程给您第一印象，并为您使用Angular 2和TypeScript开发Chrome扩展程序带来一些启发。 如果您想更深入地研究这些主题，我可以推荐以下资源：

• Angular 2的API预览和官方食谱
• TypeScript手册
• Chrome Platform API文档

From: https://www.sitepoint.com/chrome-extension-angular-2/