开发Chrome 扩展程序Hello
chrome扩展程序是基于HTML+CSS+Javascript的工程。
所以开发Web的同学开发这个浏览器扩展学习起来是非常方便的。项目结构主要包含一个manifest.json
文件来存储项目信息。本文参考官方地址:https://developer.chrome.com/extensions
- 建立项目文件夹hello
- 创建manifest.json文件
{ "name": "Hello Extensions", "description" : "Base Level Extension", "version": "1.0", "manifest_version": 2 }
- 加入icon
hello_extensions.png
和htmlhello.html
页面(图片和html页面可以自己自定义,这里就不贴出来了。) - 修改
manifest.json
{
"name": "Hello Extensions",
"description" : "Base Level Extension",
"version": "1.0",
"manifest_version": 2,
//以下为新加内容,指定icon和点击的时候弹出的html页面
"browser_action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
}
}
测试:
打开chrome,点开Omnibox
--> 更多工具
-->扩展程序
打开开发模式
-->加载已解压的扩展程序
-->然后选择自己的项目目录即可发现自己的扩展在浏览器上了。然后点击图标即可。