Chrome 插件
2.1. 什么是Chrome插件
严格来讲,我们正在说的东西应该叫Chrome扩展(Chrome Extension),真正意义上的Chrome插件是更底层的浏览器功能扩展,可能需要对浏览器源码有一定掌握才有能力去开发。鉴于Chrome插件的叫法已经习惯,本文也全部采用这种叫法,但读者需深知本文所描述的Chrome插件实际上指的是Chrome扩展。
Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件,它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包。
个人猜测crx可能是 Chrome Extension 如下3个字母的简写:
另外,其实不只是前端技术,Chrome插件还可以配合C++编写的dll动态链接库实现一些更底层的功能(NPAPI),比如全屏幕截图。
由于安全原因,Chrome浏览器42以上版本已经陆续不再支持NPAPI插件,取而代之的是更安全的PPAPI。
2.2. 学习 Chrome 插件开发有什么意义
2.3. 为什么是 Chrome 插件而不是 Firefox 插件
开发与调试
Chrome插件没有严格的项目结构要求,只要保证本目录有一个manifest.json即可,也不需要专门的IDE,普通的web开发工具即可。
从右上角菜单->更多工具->扩展程序可以进入 插件管理页面,也可以直接在地址栏输入 chrome://extensions 访问。
勾选开发者模式即可以文件夹的形式直接加载插件,否则只能安装.crx 格式的文件。Chrome 要求插件必须从它的Chrome应用商店安装,其它任何网站下载的都无法直接安装,所以,其实我们可以把crx文件解压,然后通过开发者模式直接加载。
开发中,代码有任何改动都必须重新加载插件,只需要在插件管理页按下Ctrl+R 即可,以防万一最好还把页面刷新一下。
核心介绍
4.1. manifest.json
这是一个Chrome插件最重要也是必不可少的文件,用来配置所有和插件相关的配置,必须放在根目录。其中,manifest_version、name、version3个是必不可少的,description和icons是推荐的。
下面给出的是一些常见的配置项,均有中文注释,完整的配置文档请戳这里。
4.2. content-scripts
所谓content-scripts,其实就是Chrome插件中向页面注入脚本的一种形式(虽然名为script,其实还可以包括css的),借助content-scripts我们可以实现通过配置的方式轻松向指定页面注入JS和CSS(如果需要动态注入,可以参考下文),最常见的比如:广告屏蔽、页面CSS定制,等等。
4.3. background
4.4. event-pages
4.5. popup
4.6. injected-script
4.7. homepage_url
Chrome 插件的8种展示形式
5.1. browserAction(浏览器右上角)
5.2. pageAction(地址栏右侧)
5.3. 右键菜单
5.4. override(覆盖特定页面)
5.5. devtools(开发者工具)
5种类型的 JS 对比
Chrome插件的JS主要可以分为这5类:injected script、content-script、popup js、background js和devtools js,
6.1. 权限对比
6.2. 调试方式对比
消息通信
通信主页:https://developer.chrome.com/extensions/messaging
前面我们介绍了Chrome插件中存在的5种JS,那么它们之间如何互相通信呢?下面先来系统概况一下,然后再分类细说。需要知道的是,popup和background其实几乎可以视为一种东西,因为它们可访问的API都一样、通信机制一样、都可以跨域。
其它补充
8.1. 动态注入或执行JS
8.2. 动态注入CSS
8.3. 获取当前窗口ID
8.4. 获取当前标签页ID
8.5. 本地存储
8.6. webRequest
8.7. 国际化
8.8. API总结
经验总结
9.1. 查看已安装插件路径
9.2. 特别注意background 的报错
9.3. 如何让popup页面不关闭
9.4. 不支持内联JavaScript 的执行
9.5. 注入CSS的时候必须小心
打包与发布
打包的话直接在插件管理页有一个打包按钮:
然后会生成一个.crx文件,要发布到Google应用商店的话需要先登录你的Google账号,然后花5个$注册为开发者,本人太穷,就懒得亲自验证了,有发布需求的自己去整吧。
参考
源文出自:小茗同学博客,小篇幅转载,方便查阅!