chrome插件开发-网页中运行自己的JS

本文只介绍最简单的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扩展程序

配置扩展程序步骤

1. chrome浏览器访问：chrome://extensions/；
2. 选择“开发者模式”，然后选择“加载已解压的扩展程序”；
3. 选中你的插件安装包即可。安装成功后效果如下图所示：

安装成功后效果

注：蓝色框框选的表示非官方商店的扩展程序。每次插件包更新后，都需要自己手动更新，点击“刷新小图标”即可。

my plugin详细信息

3、其它

如果插件功能需要定时刷新，可以考虑安装插件后，利用windows批处理命令来操作，如：

*****.bat
cd c:/Program Files/Google/Chrome/Application
start chrome.exe https://www.baidu.com/