看了好多回答,基本上都是推荐的教程,然而 Google 的官方教程得翻墙才能看,360 的文档又太老,刚好最近兴趣来了想学习写 Chrome 扩展,就顺便写了个入门教程,有不对或者不完善的地方欢迎指正。
一个 Chrome 扩展其实就是一个配置(入口)文件 manifest.json 和一系列 html、css、js、图片文件的集合,所以只要有前端基础,写一个简单的 Chrome 扩展是分分钟的事情。
由于 html、css、js 及文件组织,跟普通的 web 开发一样,那写 Chrome 扩展主要就是 manifest 文件的编写和扩展的调试了,下面以一个股票信息查看 扩展和一个天气预报 扩展举例。
一、manifest 文件的编写
1. 基本属性
包括扩展的名称(name)、版本(version)、描述(description)、图标位置(icons)和 manifest 版本(manifest_version)等信息。
其中,name、version 和 manifest_version 是必须的,而且 manifest_version 必须为 2
栗子:
{
...
"manifest_version": 2,
"name": "Weather",
"description": "a currently clone",
"version": "0.1",
...
}
2. browser_action
browser_action 指定扩展的图标放在 Chrome 工具栏中,它定义了扩展图标文件位置(default_icon)、悬浮提示(default_title)和点击扩展图标所显示的页面位置(default_popup)。
栗子:
{
...
"browser_action": {
"default_icon": {
"19": "images/icon19.png",
"38": "images/icon38.png"
},
"default_title": "stock helper",
"default_popup": "popup.html"
},
...
}
比如一个查看股票信息的扩展,点开图标后是这样的效果:
3. options_page
options_page 属性定义了扩展的设置页面,配置后在扩展图标点击右键可以看到 选项,点击即打开指定页面。对于没有图标(没有设置 browser_action )的扩展,可以在 chrome://extensions/ 页面找到选项按钮。
栗子:
{
...
"options_page": "options.html",
...
}
4. permissions
permissions 属性是一个数组,它定义了扩展需要向 Chrome 申请的权限,比如通过 XMLHttpRequest 跨域请求数据、访问浏览器选项卡(tabs)、获取当前活动选项卡(activeTab)、浏览器通知(notifications)、存储(storage)等,可以根据需要添加。
栗子:
{
...
"permissions": [
"http://api.wunderground.com/api/"
"tabs",
"activeTab",
"notifications",
"storage"
],
...
}
5. background
background 可以使扩展常驻后台,比较常用的是指定子属性 scripts,表示在扩展启动时自动创建一个包含所有指定脚本的页面。
栗子:
{
...
"background": {
"scripts": ["js/background.js"]
},
...
}
6. chrome_url_overrides
chrome_url_overrides 属性可以自定义的页面替换 Chrome 相应默认的页面,比如新标签页(newtab)、书签页面(bookmarks)和历史记录(history)。
栗子:
{
...
"chrome_url_overrides": {
"newtab": "tab.html"
},
...
}
结合前面的 background 属性,可以做一个打开新标签页,就能看到天气和当前时间的扩展,如下图:
二、扩展的调试
打开 Chrome 设置-扩展程序(chrome://extensions/)页面,勾选 开发者模式,点击加载正在开发的扩展程序 按钮,选择扩展所在的文件夹,就可以在浏览器工具栏中看到自己写的扩展了。
如果是带图标的扩展,右键点击图标,点击审查弹出内容,在相应位置加断点,然后在控制台上,输入以下命令:
location.reload()
重新加载这个页面,就可以调试了。
如果是覆盖新标签页的应用,直接右键审查元素,加断点,刷新即可。
大致就这些了,想写复杂的 Chrome 扩展,再去自行深入了解吧~~webstore开发本人其实也是新手,但些许经验应该能帮助到其他人:
1.如何优雅的调试右键Chrome工具栏的小图标会弹出一个窗口,选择审查弹出内容即可调试。
但是这种方法极度低效,直接chrome://extensions/找到你插件的ID:
然后浏览器访问:
chrome-extension://<插件ID>/插件入口html文件
比如我的是:
chrome-extension://fnfchnalfnjbjbfeccpophocngdgapad/index.html
然后就可以愉快的调试了。
2.如何查看其他插件的源码访问chrome://version 找到Chrome插件安装的本机目录:
然后找到extension目录,所有插件和数据都在这里,可以随便参考其他插件源码。
3.不要把JS代码写在html文件里出于安全考虑,入口html文件中的JS代码只能通过script标签引用外部脚本文件,内嵌的JS代码会失效的。
4.注意国际化webstore面向的是全球用户,你辛辛苦苦写的小工具肯定不想只限于国内用户吧,所以在你的项目里面加上_locales文件夹,写代码的时候时刻考虑到如何才能更好地支持国际化。
5.用好Google开发遇到的问题Google一下一般能找到,StackOverflow 和Google网上论坛这两个站点要尤其留意,大部分问题这上面都有解决方案。
更多小技巧就不一一列举了,多看官方文档,有更详细的介绍。
应用发布应用写好之后打包上传就好了,上传时Google会让你提供几张宣传图片(自己随便ps了一下)每一个需要填写的选项后面都有详细说明,需要认真阅读一下。
发布之后大概过上几个小时就能在webstore搜索到你的应用了:
iBookmark
至此大功告成,之后可以继续关注你的应用情况,适时更新。
最后附上自己写的一个Chrome收藏夹插件源码,仅供参考交流:
GitHub - 0326/iBookmark: Chrome extension for manage bookmarks
实际上,大家看我应用里面的截图写的是plug-in,实际上我写错了,Chrome 的plug-in和extension还是有区别的555