编写Chrome扩展插件教程

一个 Chrome 是一个配置（入口）文件 manifest.json 和一系列 html、css、js、图片文件的集合，然后将代码使用Chrome打包成crx文件即可使用

然后生成crx文件，直接把该文件拖进去既可以使用

一、manifest 文件的编写

1、包括扩展的名称（name）、版本（version）、描述（description）、图标位置（icons）和 manifest 版本（manifest_version）等信息
2、permissionspermissions 属性是一个数组，它定义了扩展需要向 Chrome 申请的权限，比如通过 XMLHttpRequest 跨域请求数据、访问浏览器选项卡（tabs）、获取当前活动选项卡（activeTab）、浏览器通知（notifications）、存储（storage）、网页内容采取行动( declarativeContent )等，可以根据需要添加。
3、background 可以使扩展常驻后台，比较常用的是指定子属性 scripts，表示在扩展启动时自动创建一个包含所有指定脚本的页面。

{"manifest_version": 2,"name": "JYX-Builder","version": "0.0.2","description": "天气预报插件","background": { "scripts": ["background.js"],"persistent": true },"page_action": {"default_icon" : "customer_service_16px.png","default_title": "天气预报"},"icons" : {"16": "customer_service_16px.png","32": "customer_service_32px.png"},"permissions" : ["tabs","declarativeContent"],"content_scripts":[{"matches":["https://erpv4.lk361.com/*"],"run_at": "document_end","js":["jquery-2.0.0.min.js", "content_script.js"]}]
}

2、background.js文件的编写

https://chajian.baidu.com/developer/extensions/declarativeContent.html

//当应用第一次安装、更新至新版本或浏览器更新至新版本时产生。
chrome.runtime.onInstalled.addListener(function() {chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {// With a new rule ...chrome.declarativeContent.onPageChanged.addRules([{// 注册规则，当且仅当列出的所有条件都满足时，PageStateMatcher 才会匹配网页,即当url为https://www.zybang.com ，即触发执行某个操作（目前只有 ShowPageAction）。// That fires when a page's URL contains a 'g' ...conditions: [new chrome.declarativeContent.PageStateMatcher({pageUrl: { urlContains: 'https://www.zybang.com' },})],// And shows the extension's page action.actions: [ new chrome.declarativeContent.ShowPageAction() ]}]);});
});

3、content_script.js文件的编写

这个文件编写插件具体实现功能

//两个参数 1、要调用的函数 2、周期性执行或调用 code 之间的时间间隔，以毫秒计
setInterval(function(){HighJyx();
}, 2000);
function HighJyx(){插件具体实现功能...
}

整个插件源码目录