使用Angular 2和Typescript构建自己的Chrome扩展

>本教程演示了使用Angular 2和Typescript直接在新的选项卡页面中管理书签的镀铬扩展。 它增强了默认新选项卡体验的功能和视觉吸引力。

>

密钥功能：

• >利用Angular 2和打字稿用于结构化和可维护的代码库。
将书签直接集成到新的选项卡页面中，提供自定义的用户体验。
• >使用文本编辑器，NPM和Google开发人员帐户（用于发布）提供了简化的开发环境。
使用Angular 2的基于组件的体系结构，从简单的书签组件开始，然后扩展到用于管理多个书签的列表组件。
• >利用Angular服务和本地存储来管理应用程序状态，并在会话中持续存在书签数据。
• 包括一个浏览器操作图标，以将当前页面添加到书签中。
>用自定义书签管理器替换默认的新选项卡页面。
• 涵盖Chrome Web Store分发的测试，包装和准备工作，以确保正确配置
>。
• 项目结构和设置：
• > manifest.json该项目是通过创建目录并使用必需文件填充它来启动项目的：
（打字稿编译器配置），

（npm依赖关系和脚本）和

>（Chrome Extension Metadata）。 文件包括用于编译和开发服务器设置的Angular 2依赖项和NPM脚本。 初始文件包含基本的扩展信息。

>

tsconfig.json package.json 然后，该教程会引导您创建角组件：（用于单个书签）和manifest.json（用于管理书签列表）。 这些组件与Apackage.json进行交互，以使用本地存储处理数据持久性。 manifest.json包括一个用于渲染单个书签的HTML模板（

），允许编辑和删除。

>使用模板（）显示书签列表，利用

在书签上迭代。 默认书签数据在

>中提供 bookmark.component.tslist.component.ts list.service.ts bookmark.componentbookmark.html list.component list.html *ngFor Chrome扩展集成：list.data.constant.ts

>教程说明了如何添加Chrome扩展功能：>

• >浏览器操作图标：将图标添加到Chrome工具栏中，以允许用户将当前查看的网页添加为书签。 此功能是使用Chromeapi和browserAction脚本实现的。eventPage.ts>
>
• 新选项卡覆盖：>默认的新选项卡页面被用Angular构建的自定义书签管理器替换。这是在>属性中配置的>>>>>> manifest.json "chrome_url_overrides"
文件已更新为包括图标，浏览器操作详细信息，内容安全策略，权限（用于访问活动选项卡）和“新选项卡”页面的覆盖。

测试和分布：manifest.json

>教程以

中的“负载解开式扩展”功能在Chrome内测试Chrome内部扩展的说明结束。 它还提供了NPM脚本来复制必要的库，并将项目压缩到一个文件中，以通过Chrome Web Store分发。

进一步的增强：

chrome://extensions/>教程提出了一些改进的领域，包括添加功能（例如，配色方案，书签导入），UX增强功能，单元和端到端测试，更强大的构建过程以及发布到Chrome网络商店。 它还提供了指向进一步学习的相关资源的链接。 一个全面的常见问题解答部分解决了与Angular 2的构建Chrome扩展有关的常见问题

以上是使用Angular 2和Typescript构建自己的Chrome扩展的详细内容。更多信息请关注PHP中文网其他相关文章！