起步

概述

扩展实际是压缩在一起的一组文件，包括HTML、CSS、JavaScript、图片及其它任何需要的文件；扩展本质上就是web页面，因此可以使用所有的浏览器提供的API。

每个扩展都有一个manifest文件，用来描述插件的元数据和配置信息；

界面

一般扩展会以 browser action 或 page action 的形式在浏览器界面上展现。每个扩展最多可以有一个 browser action 或 page action

如下图：(page action在地址拦后面，browser action在工具栏上)

扩展应用也可以通过其它方式提供界面，比如加入到上下文菜单，提供一个选项页面或用一个content script改变页面的显示等。可以在"开发指南"中找到应用（扩展）特性的完整列表以及实现的细节。

基本架构

背景页面

大多数应用（扩展）都包含一个背景页面(background page)，用来执行应用（扩展）的主要功能。

在背景页面里定义了browser action和javascript代码。应用（扩展）里面的HTML页面可以互相访问各自DOM树中的全部元素，或者互相调用其中的函数。

背景页面是一个常驻的页面，它的生命周期是插件中所有类型页面中最长的，它随着浏览器的打开而打开，随着浏览器的关闭而关闭，所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面。

Content scripts

如果一个应用（扩展）需要与web页面交互，那么就要使用content script。Content script脚本是能够在浏览器已经加载的页面内部运行javascript脚本。可以将content script看作是网页的一部分，而不是它所在的应用（扩展）的一部分。因此在从背景页面给content script发送消息时，就需要确定要发送到哪个标签页中的content script。

Content script可以获得浏览器所访问的web页面的详细信息，并可以对页面做出修改。但是它并不能修改它所在应用（扩展）的背景页面的DOM树。

Content script与它所在的应用（扩展）并不是完全没有联系。一个content script脚本可以与所在的应用（扩展）交换消息

优质资料：https://juejin.im/post/5c135a275188257284143418#communication01

https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html

强大的Chrom浏览器插件Demo： https://github.com/sxei/chrome-plugin-demo

Chrom插件英雄榜：https://github.com/zhaoolee/ChromeAppHeroes