定制谷歌浏览器
程序员文章站
2024-02-02 13:37:58
...
本篇是浏览器扩展系列的第一篇。
技术介绍
开发者可以通过浏览器扩展（Chrome extension）定制自己的专属浏览器。
每个扩展程序其实是一个.crx格式的压缩文件，该压缩文件基于常规的web技术（例如HTML, JavaScript和CSS）构建。
开发原则
- 单一目的；
- 界面尽量少。
结构规范
Project/
|- src/
|- assets/ 静态资源
|- images/
|- styles/
|- scripts/
|- options/ 用户选项
|- index.html
|- index.js
|- browser_action/ 浏览器行为
|- index.html
|- index.js
|- background/ 后台任务
|- index.js
|- content_scripts/ 页面脚本
|- index.js
|- manifest.json 权限声明
Hello World
我们以一个Hello World扩展开始定制之旅。
- manifest.json
manifest.json文件是每个扩展的标配。
{
"name": "Hello World",
"description" : "从Hello World开始扩展",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
}
}
- hello.html
当用户点击manifest.json文件中定义的browser_action图标（hello_extensions.png）时，将展示hello.html文件,这是一个简易的html文件。
<html>
<body>
<h1>Hello World</h1>
</body>
</html>
- 运行
通过以上两个步骤，一个功能简单的扩展已经开发完成????。接下来，可以加载该扩展进行试运行。
- 在chrome地址栏输
chrome://extensions，回车即可进入扩展管理界面； - 打开开发者模式；
- 点击加载已解压的扩展程序，选择你的开发目录即可安装完成。
这时，在浏览器右上角应该能看到manifest.json文件中配置的图标了。
源码及更多资料
上一篇： 安装谷歌浏览器