谷歌浏览器扩展插件的开发教程,Chrome插件(扩展)开发全攻略(完整demo),什么是Chrome插件,严格来讲,我们正在说的东西应该叫Chrome扩展(Chrome Extension),真正意义上的Chrome插件是更底层的浏览器功能扩展,
可能需要对浏览器源码有一定掌握才有能力去开发。鉴于Chrome插件的叫法已经习惯,本文也全部采用这种叫法,但读者需深知本文所描述的Chrome插件实际上指的是Chrome扩展。Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件,它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包.
目录
- 写在前面
- 前言
- 什么是Chrome插件
- 学习Chrome插件开发有什么意义
- 为什么是Chrome插件而不是Firefox插件
- 开发与调试
- 核心介绍
- manifest.json
- content-scripts
- background
- event-pages
- popup
- injected-script
- homepage_url
- Chrome插件的8种展示形式
- browserAction(浏览器右上角)
- pageAction(地址栏右侧)
- 右键菜单
- devtools(开发者工具)
- 预热
- devtools扩展介绍
- 实例:创建一个devtools扩展
- 调试技巧
- option(选项页)
- omnibox
- 桌面通知
- 5种类型的JS对比
- 消息通信
- 互相通信概览
- 7.2. 通信详细介绍
- popup和background
- content-script主动发消息给后台
- injected script和content-script
- 长连接和短连接
- 其它补充
- 动态注入或执行JS
- 动态注入CSS
- 获取当前窗口ID
- 获取当前标签页ID
- 本地存储
- webRequest
- 国际化
- API总结
- 经验总结
- 查看已安装插件路径
- 特别注意background的报错
- 如何让popup页面不关闭
- 不支持内联JavaScript的执行
- 注入CSS的时候必须小心
- 打包与发布
写在前面
我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处。本文所有涉及到的大部分代码均在这个demo里面:https://github.com/sxei/chrome-plugin-demo ,大家可以直接下载下来运行。
另外,本文图片较多,且图片服务器带宽有限,右下角的目录滚动监听必须等到图片全部加载完毕之后才会触发,所以请耐心等待加载完毕。
本文目录:
demo部分截图:
前言
什么是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。