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

文章中心7个月前发布 admin
57 0 0

Chrome浏览器插件开发“开发”。

Chrome插件开发文档:

http://open.chrome.360.cn/extensiondev/overview.html

插件编写后目录截图

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

清单.json

{

“背景”:{

“脚本”:[“样本.js”]

},

“浏览操作”:{

“默认图标”:”icon.png”

},

“description”:”233333我是描述”,

“图标”:{

“16”:”java.png”

},

“清单版本”:2,

“name”:”就这么做”,

“权限”:[“contextMenus”,“选项卡”,“webRequest”,“webRequestBlocking”,“http://*/”,“https://*/”,“存储”],

“版本”:“0.1”

}

js文件附加到后台插件中

插件图标根据浏览器操作显示在浏览器的右上角

描述安装插件时,浏览器中会显示插件描述信息。

icon插件图标

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

name插件名称(justDoIt的中文翻译就是做吧)

Permissions该插件需要使用的权限,最重要的是webRequest和webRequestBlocking

插件版本版本

示例.js

//点击事件

函数genericOnClick(信息,选项卡){

Alert(“我被点击了!”)

}

varcontext“页面”;

vartitle”我是一个按钮”;

//创建按钮

varidchrome.contextMenus.create(

{“标题”:标题,“上下文”:[上下文],“onclick”:genericOnClick}

);

//当当前页面发起请求时,拦截请求并注入该方法。

chrome.webRequest.onBeforeRequest.addListener(函数(详细信息){

varurldetails.url;

//当页面请求的URL地址包含areacode.js文件时

if(url.indexOf(“area.js代码?”)>0){

//将请求地址指向

http://127.0.0.1/areacode.js

返回{redirectUrl:”http://127.0.0.1/areacode.js”};

}如果不{

返回真;

}

},

{网址:[“”]},

[“阻止”]

您可以使用任何图像作为图标,只要图像大小为16X16

代码编写完成后,将其加载到浏览器中

点击Chrome浏览器最后一个顶角的菜单->更多工具->扩展

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

点击加载解压后的扩展,选择你编写的插件的目录。

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

可以看到这个插件已经安装了

© 版权声明

相关文章