UTools，浏览器插件编写特辑
最近完成了我很早之前就想⼲的事，尝试编写浏览器插件，在探索途中，学习了⼀下编写UTools插件，与油猴插件，个⼈强烈建议。很多功能没有必要写浏览器插件，编写个油猴插件就好了，⽽且⾮常简单，这些插件⼏乎都是前端知识。
油猴插件
本质就是在匹配的url页⾯执⾏⽤户⾃定义js
常⽤注解含义
// ==UserScript==
// @name        MyTest  插件名称
// @namespace    sk/  插件项⽬地址同时也是区分不太作者的同名脚本
// @version      1.0 版本⽤于升级推送
// @description  Test 描述
// @author      Sk  作者
// @match        blog.csdn/*/article/details/* 哪些url该插件开启(就*⼀种通配符)
// @icon        data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== 插件图标
// @grant        none 运⾏在沙箱中的权限 none 不运⾏在沙箱中推荐使⽤
// @require      file://E:\⽹页\Tampermonkey\test.js 引⼊外部js
// ==/UserScript==
引⼊本地⽂件，直接在本地编辑器编写
打开插件运⾏访问本地⽂件
tampermonkey插件注释引⼊本地js即可
uTools插件编写
新建⽬录放置⽂件
主配置⽂件(plugin.json)
{//注意真实项⽬中不允许注释
"main":"index.html",//⼊⼝⽂件
"logo":"logo.png",//图标
"preload":"preload.js",//⽤于加载⾃定义js可以调⽤uTools官⽅函数(可选) "pluginSetting":{//插件设置可选
"single":false,//是否为单例(不允许多开)
"height":0//插件界⾯⾼度设置后⽤户⽆法修改
},
"features":[//特性数组
{
"code":"hello",//区分不同功能的功能码触发该特性返回该功能码"explain":"hello world",//对功能的解释
"icon":"logo.png",//该功能图标(默认使⽤全局图标)
"cmds":["hello","你好"]//如何进⼊该功能任意⼀个输⼊匹配都可以},
{
"code":"test",
"explain":"Test",
"cmds":[{
"type":"regex",// 类型（必须）正则输⼊匹配
"label":"⽂本正则匹配",// ⽂字说明，在搜索列表中出现（必须）"match":"/xxx/i",// 正则表达式字符串
"minLength":1,// 长度限制（主输⼊框中的字符不少于） (可选) "maxLength":1// 长度限制（不多于） (可选)
},{
"type":"img",// 类型（必须）选择的图⽚
"label":"图⽚匹配"// ⽂字说明，在搜索列表中出现（必须）
},{
"type":"files",// 类型（必须）⽂件或⽂件夹匹配
"label":"⽂件匹配",// ⽂字说明，在搜索列表中出现（必须）"fileType":"file",// ⽀持 file 或 directory (可选)
"match":"/xxx/",// ⽂件名称正则匹配  (可选)
"minLength":1,// ⽂件数量限制（不少于） (可选) "maxLength":1// ⽂件数量限制（不多于） (可选)
},{
"type":"window",// 类型（必须）更加当前置顶的窗⼝匹配"label":"窗⼝动作",// ⽂字说明，在搜索列表中出现（必须）"match":{// 窗⼝匹配规则
"app":["xxx.app",""],// 应⽤ (可选)
"title":"/xxxx/",// 匹配窗⼝标题的正则 (有配置时应⽤也必须配置) (可选) "class":["xxx"]// 窗⼝类 Windows 专有 (可选)
}
}]
}
]
}
⼊⼝html⽂件(index.html部分)
<body>
<h1>HelloWorld</h1>
<script>
console.log('插件装配完成，已准备好')
});//preload 指定的js与这⾥的js都可以随意使⽤  uTools函数
// 进⼊插件回调⾃定义码类型负载信息
console.log('⽤户进⼊插件', code, type, payload)
});
</script>
</body>
官⽅API列表
安装开发者插件进⾏管理
使⽤开发者⼯具进⾏调试
⾕歌浏览器插件开发
配置清单⽂件
{
"manifest_version":2,
"name":"我的时钟",
"version":"1.0",//最多3点4段每个数字  0~65535 "description":"我的第⼀个Chrome扩展",
"icons":{//查看时的样⼦
"16":"images/icon16.png",//可以指定不太尺⼨的图标"48":"images/icon48.png",
"128":"images/icon128.png"
},
"browser_action":{//放在⼯具栏的样⼦
"default_icon":{//图标
"19":"images/icon19.png",
"38":"images/icon38.png"
},
"default_title":"我的时钟",//⿏标悬浮标题
"default_popup":"popup.html"//单击时显⽰的页⾯
},
"permissions":[//申请访问的 API⽹址
"*://api.live.bilibili/*"
],
"content_scripts":[{//⽤于指定JS注⼊
"matches":["*://fanyi.baidu/*"],//指定注⼊的url格式
"js":["js/axios.js","js/test1.js"]//注⼊的js  注意顺序后⾯的可以使⽤前⾯的}],
"background":{//指定在后台会⼀直运⾏的代码
"scripts":[
"js/test2.js"
]
}
}
html⽂件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head><!--注意必须指定页⾯显⽰的⼤⼩-->
<body >
<h1>HelloWorld</h1>
<h1>HelloWorld</h1>
</body>
</html>
⽬录情况
安装插件
常⽤API
chrome.browserAction.setIcon({path:`images/icon${name[index]}.png`});// 设置⼯具栏图标ate({//创建右键菜单必须有 contextMenus 权限必须写在background js中
type:'normal',
title:'Menu A',
id:'a'
});
type:'radio',
title:'Menu B',
id:'b',
checked:true
});
type:'normal',
title:'使⽤Google翻译:%s',//%s获取选择⽂本
id:'cn',
contexts:['selection']//设置触发该右键菜单的上下⽂(⿏标框选)
});
⾕歌官⽅API⽂档
推荐学习
⾕歌浏览器APP开发与扩展开发极其相似

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。