「开发」chrome浏览器插件开发

chrome 插件开发文档 ：http://open.chrome.360.cn/extension_dev/overview.html

插件编写完毕以后的 目录截图

manifest.json

{

"background": {

"scripts": [ "sample.js" ]

},

"browser_action": {

"default_icon": "icon.png"

},

"description": "233333我是描述",

"icons": {

"16": "java.png"

},

"manifest_version": 2,

"name": "justDoIt",

"permissions": [ "contextMenus", "tabs", "webRequest", "webRequestBlocking", "http://*/", "https://*/", "storage" ],

"version": "0.1"

}

background 插件附加的js文件

browser_action 在你浏览器右上角显示的插件的图标

description 安装插件的时候 浏览器上面显示插件的描述信息

icons 插件图标

manifest_version 指定此扩展名使用的manifest.json的版本

name 插件名字 （justDoIt 中文翻译 就是干 ）

permissions 本插件需要用到的 权限 其中最重要的就是 webRequest 和 webRequestBlocking

version 插件版本

sample.js

// 点击事件

function genericOnClick(info, tab) {

alert("我被点了!")

}

var context = "page";

var title = "我是按钮";

//创建按钮

var id = chrome.contextMenus.create(

{"title": title, "contexts": [context], "onclick": genericOnClick}

);

// 当前页面发起请求的时候 拦截请求 进入本方法

chrome.webRequest.onBeforeRequest.addListener(function (details) {

var url = details.url;

//当页面请求的 url地址中 包含 areacode.js这个文件的时候

if (url.indexOf("areacode.js?")>0) {

// 重定向 请求地址 到http://127.0.0.1/areacode.js

return {redirectUrl: "http://127.0.0.1/areacode.js"};

} else {

return true;

}

},

{urls: [""]},

["blocking"]

)

可以使用任意一个图片做图标 只要图片大小尺寸是 16X16 即可

代码编写完毕以后 加载到 浏览器中

在chrome 浏览器 点击 最后上角的菜单->更多工具 ->扩展程序

点击 加载已解压的扩展程序 选择你编写的插件的目录

即可看到 本插件已经安装