chrome extension 是什么
扩展程序是自定义浏览体验的小型软件程序。它们让用户可以通过多种方式定制 Chrome 的功能和行为,例如能够提供以下内容:
- 生产力工具
- 网页内容丰富
- 信息聚合
- 乐趣和游戏等
chrome extension 能做什么
增强浏览器功能,轻松实现属于自己的“定制版”浏览器,等等。
Chrome插件提供了很多实用API供我们使用,包括但不限于:
- 书签控制;
- 下载控制;
- 窗口控制;
- 标签控制;
- 网络请求控制,各类事件监听;
- 自定义原生菜单;
- 完善的通信机制;
- 等等;
chrome extension 的开发与调试
调试
从右上角菜单->更多工具->扩展程序可以进入 插件管理页面,也可以直接在地址栏输入 chrome://extensions 访问。
勾选开发者模式
即可以文件夹的形式直接加载插件,否则只能安装.crx
格式的文件。Chrome要求插件必须从它的Chrome应用商店安装,其它任何网站下载的都无法直接安装,所以,其实我们可以把crx
文件解压,然后通过开发者模式直接加载。
开发中,代码有任何改动都必须重新加载插件,只需要在插件管理页按下Ctrl+R
即可,以防万一最好还把页面刷新一下。
开发
扩展程序主要结构
- Manifest (清单文件)
- Background Script (后台脚本)
- UI Elements (页面元素)
- Content Script (内容脚本)
- Options Page(配置页面)
chrome extension 结构
扩展的结构
background scripts
background scripts是扩展的事件处理程序; 它包含对扩展浏览器事件的监听,触发后执行指示的逻辑。有效的后台脚本仅在需要时加载,并在空闲时卸载。
用户界面
- popup
- 可以包含带有 JavaScript 逻辑的普通 HTML 页面。
- 还可以调用
tabs.create
或window.open()
显示扩展中存在的其他 HTML 文件。 使用页面操作和弹出窗口的扩展程序可以使用declarative content API 在后台脚本中设置弹出窗口何时可供用户使用的规则。当条件满足时,后台脚本与弹出窗口通信,使其图标可被用户点击。
content scripts
通信
读取或写入网页的扩展程序使用content scripts。内容脚本包含在已加载到浏览器的页面上下文中执行的 JavaScript。content scripts读取和修改浏览器访问的网页的 DOM。 还可以通过使用storage API交换消息和存储值来进行父子通信。
通信
-
popup
和background
之间的通信background => popup
是通过getBackgroundPage
,popup => background
是通过getViews
。 -
background
和content
之间的通信
- 长连接:
chrome.tabs.connect
和chrome.runtime.connect
- 短连接:
chrome.tabs.sendMessage
-
popup
和content
之间的通信chrome.runtime.sendMessage, chrome.runtime.onMessage