编写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(){
  插件具体实现功能...
}

整个插件源码目录
这里写图片描述