浏览器扩展程序插件兼容谷歌、360浏览器

先写一个最简单入门级的扩展程序，我们后面会继续介绍扩展程序与目标网页的交互、数据绑定等功能。

 

首先创建一个文件夹，名称自己命名。在创建的文件夹下面创建一个文件，命名为  manifest.json，内容如下（注意：manifest.json文件中不要使用空格，使用tab缩放，不然扩展程序会报错）：

{
    "manifest_version": 2,
    "name": "扩展程序",
    "version": "1.0.0",
    "icons": {
        "16": "img/search.png",
        "48": "img/search.png",
        "128": "img/search.png"
    },
    "content_scripts": [{
        "matches": ["https://www.csdn.net/"],
        "js": ["js/jquery-1.9.1.min.js", "js/custom.js"]
    }],
    "permissions": [
        "contextMenus",
        "activeTab",
        "http://*/*",
        "https://*/*"

]
}

 

icons就是扩展程序的图标。

content_scripts下面的matches是你要应用的网站，可以多个以逗号隔开。

content_scripts下面的js是你扩展程序需要引用的外部js。

下面我们在custom.js里面写一句简单的弹框：

$(function(){
    alert(1)
})
 

这时候谷歌或者360浏览器访问 chrome://extensions/，如下

点击 加载已解压的扩展程序，选择我们刚刚建的文件夹，如下所示，就代表扩展程序已经加载成功了

 

这时候我们访问 https://www.csdn.net/ 就能看到我们编写的弹框了，一个简单的扩展程序就完成了。