浏览器扩展开发简单demo示例

创建一个文件夹，在文件夹中建立如下目录文件

其中manifest.json为主要配置文件，内容如下

{
    "name": "plugin-demo",
    "version": "0.9.0",
    "manifest_version": 2,
    "description": "chrome plugin demo",
    "content_scripts": [
    {
     "matches": ["http://*/*","https://*/*"],
     "run_at": "document_end",
     "all_frames": true,
     "js": ["jquery-1.4.4.min.js","contentScript.js"]
    }
   ]
}

matches：为过滤的网址，我这里设置的是所有的网站。

run_at：在什么时候运行你的js

js：为要加入的自定义的js文件，我这里引入了jquery的文件，便于开发

其他的属性可以看官方网站的说明。

================================================分割线=======================

其中contentScript即为你的自定义的js文件，我的去除弹窗即自定义页面元素如下：

//need to hide element's attributes width value.
//you can add some others
var attrs={
    
    id:["f_div"],
    class:["leaveNavInfo","follow-qrcode"],
    style:["absolute","fixed"]
    
};

//you need't edit it
setInterval(function(){
    
for(var key in attrs){
    
    var attrValues = attrs[key];
    for(var index in attrValues){
        
        var attrValue = attrValues[index]
        $("["+key+"*="+attrValue+"]").remove();
        
    }
    
}
},1000)

可以看到我这里有一个attrs是个json对象，里面就是要去除的包含的属性，例如第一条就是去除id包含f_div的页面元素，第三条的定义了去除style包含absolute和fixed的页面元素。用定时器是因为有的网站似乎会重复加载弹窗。

================================分割线==========================================

说下怎么加入的浏览器扩展里

打开扩展中心，点击加载已解压的扩展程序，选择你的文件夹，确定即可。