UTools，浏览器插件编写特辑

最新推荐文章于 2024-07-29 13:28:28 发布

滑稽的2233

最新推荐文章于 2024-07-29 13:28:28 发布

阅读量767

点赞数

本文链接：https://blog.csdn.net/weixin_44598449/article/details/119493197

版权

最近完成了我很早之前就想干的事，尝试编写浏览器插件，在探索途中，学习了一下编写UTools插件，与油猴插件，个人强烈建议。很多功能没有必要写浏览器插件，编写个油猴插件就好了，而且非常简单，这些插件几乎都是前端知识。

油猴插件

本质就是在匹配的url页面执行用户自定义js

常用注解含义

// ==UserScript==
// @name         MyTest   插件名称
// @namespace    http://sk.com/		插件项目地址同时也是区分不太作者的同名脚本
// @version      1.0	版本用于升级推送
// @description  Test	描述
// @author       Sk		作者
// @match        https://blog.csdn.net/*/article/details/* 哪些url该插件开启(就*一种通配符)
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== 插件图标
// @grant        none	运行在沙箱中的权限 none 不运行在沙箱中 推荐使用
// @require      file://E:\网页\Tampermonkey\test.js	引入外部js
// ==/UserScript==

引入本地文件，直接在本地编辑器编写

打开插件运行访问本地文件

插件注释引入本地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", "xxx.exe"], // 应用 (可选)
					"title": "/xxxx/", // 匹配窗口标题的正则 (有配置时应用也必须配置) (可选)
					"class": ["xxx"] // 窗口类 Windows 专有 (可选)
				}
			}]
		}
	]
}

入口html文件(index.html部分)

<body>
    <h1>HelloWorld</h1>
    <script>
        utools.onPluginReady(() => {//插件准备完毕回调
            console.log('插件装配完成，已准备好')
        });//preload 指定的js与这里的js都可以随意使用  uTools函数
        //	进入插件回调		 自定义码  类型  负载信息
        utools.onPluginEnter(({code, type, payload}) => {
            console.log('用户进入插件', code, type, payload)
        });
    </script>
</body>

官方API列表

https://www.u.tools/docs/developer/api.html

安装开发者插件进行管理

使用开发者工具进行调试

谷歌浏览器插件开发

配置清单文件

{
	"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.com/*"
	],
	"content_scripts": [{ //用于指定JS注入
		"matches": ["*://fanyi.baidu.com/*"], //指定注入的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 style="width: 12.5rem;height: 12.5rem;">
		<h1>HelloWorld</h1>
		<h1>HelloWorld</h1>
	</body>
</html>

目录情况

安装插件

常用API

chrome.browserAction.setIcon({path: `images/icon${name[index]}.png`});// 设置工具栏图标

chrome.contextMenus.create({//创建右键菜单 必须有 contextMenus 权限  必须写在background js中
	type: 'normal',
	title: 'Menu A',
	id: 'a'
});
chrome.contextMenus.create({
	type: 'radio',
	title: 'Menu B',
	id: 'b',
	checked: true
});
chrome.contextMenus.create({
	type: 'normal',
	title: '使用Google翻译:%s',//%s获取选择文本
	id: 'cn',
	contexts: ['selection']//设置触发该右键菜单的上下文(鼠标框选)
});

谷歌官方API文档

https://developer.chrome.com/docs/extensions/reference/

谷歌浏览器APP开发与扩展开发极其相似

滑稽的2233

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
UTools，浏览器插件编写特辑

最近完成了我很早之前就想干的事，尝试编写浏览器插件，在探索途中，学习了一下编写UTools插件，与油猴插件，个人强烈建议。很多功能没有必要写浏览器插件，编写个油猴插件就好了，而且非常简单，这些插件几乎都是前端知识。油猴插件本质就是在匹配的url页面执行用户自定义js常用注解含义// ==UserScript==// @name MyTest 插件名称// @namespace http://sk.com/ 插件项目地址同时也是区分不太作者的同名脚本// @versi
复制链接

扫一扫