起步
概述
扩展实际是压缩在一起的一组文件,包括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