一个 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(){
插件具体实现功能...
}
整个插件源码目录