本文只介绍最简单的chrome插件开发。插件功能:修改百度、简书相关页面背景色和字体颜色。
1、目录结构
- chrome-plugin
- icon.png - 插件图标(自己随便找一个就行)
- manifest.json - 扩展程序的配置文件
- script.js - 注入到匹配的Web页面中的JS文件
- otherScript.js - 注入到匹配的Web页面中的JS文件
1.1 文件详情
1.1.1 manifest.json
{
"name": "my plugin",
"manifest_version": 2,
"version": "1.0",
"description": "修改百度、简书相关页面背景色和字体颜色",
"browser_action": {
"default_icon": "icon.png"
},
"content_scripts": [
{
"matches": ["https://www.baidu.com/*", "https://www.jianshu.com/*"],
"js": ["script.js", "otherScript.js"]
}
]
}
- name:插件名
- default_icon : 插件图标
- matches : content-script注入的Web页面
- js : 注入到匹配的Web页面中的JS文件
1.1.2 script.js
console.log('my plugin start...');
document.body.style.backgroundColor = '#10101d';
document.body.style.color = 'white';
1.1.3 otherScript.js
console.log('other script');
2、配置chrome扩展程序
配置扩展程序步骤
- chrome浏览器访问:chrome://extensions/;
- 选择“开发者模式”,然后选择“加载已解压的扩展程序”;
- 选中你的插件安装包即可。安装成功后效果如下图所示:
安装成功后效果
注:蓝色框框选的表示非官方商店的扩展程序。每次插件包更新后,都需要自己手动更新,点击“刷新小图标”即可。
my plugin详细信息
3、其它
如果插件功能需要定时刷新,可以考虑安装插件后,利用windows批处理命令来操作,如:
*****.bat
cd c:/Program Files/Google/Chrome/Application
start chrome.exe https://www.baidu.com/