开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第三天，点击查看活动详情

小白如何制作出属于自己的utools插件(实战篇)

制作自己的第一个utools插件---->简单网页快开

参考

小白写插件第一步无疑是先参考参考别人的插件或者类似项目,从中学习到相关东西,并尝试写出自己的插件

我们自己的utools插件是简单网页快开,所以我们可以先去查看一下已经实现的网页快开它的样式或者源码,这里我就没找它的源码了,直接分析它的样式

很显然,我们只要在utools中输入要搜索的内容的话就会弹窗网页快开相关的,比如用百度打开,或者其他,当我们点击后就自动用默认浏览器打开百度并搜索了相关信息

需求

根据上面的操作,我们初步分析出我们的需求

1. 在utools中输入内容,会显示我们插件信息
2. 点击百度一下或者其他,会打开我们默认浏览器前往指定搜索网站并搜索相关信息

尝试

需求很简单,不过对于小白来说实现起来可能比较难,所以我们开始分解需求,一步一步来.

第一步---->初始化项目

先创建三大文件index.html,plugin.json和preload.js

设置plugin.json基础配置

{
	"main":"index.html",
	"logo": "logo.png",
	"preload": "preload.js",
	"features": [
		{
		  "code": "demo",
		  "explain": "测试",
			"cmds":["demo"]
		}
	]
}

第二步---->utools输入框输入什么都能展示我们的插件

要想实现这个功能,我们可以先去官网找找

我们很快就发现了这一个,插件应用功能 | uTools 将内容配置到plugin.json中

{
	"main": "index.html",
	"logo": "logo.png",
	"preload": "preload.js",
	"features": [
		{
			"code": "demo",
			"explain": "测试",
			"cmds": [
				{
					"type": "over",
					"label": "百度一下",
					"exclude": "/xxx/",
					"minLength": 1,
					"maxLength": 500
				}
			]
		}
	]
}

重新测试一下

成功了

第三步 如何获取到utools输入框里面的内容

这里可能就涉及到了生命周期,也就是当我们点击搜索后就会进入到该插件,也就是启动插件

我们可以看到payload即可获得我们输入的内容,我们可以将官方的实例填入到preload.js中

第四步 如何打开我们默认浏览器前往指定搜索网站并搜索相关信息

首先我们已经获得到了我们输入框的内容,那么现在只要能打开默认浏览器即可

我们可以直接调用该方法即可 preload.js

utools.onPluginEnter(({ code, type, payload }) => {
    utools.shellOpenExternal('https://www.baidu.com/s?word=' + payload)
})

问题

但我们输入完后确实跳转到百度进行搜索了但是有一个比较严重的问题就是

出现了这个,这个肯定不是我们想要的,那要怎么去除,其实这个的出现是因为我们加了index.html,也就是要展示页面,要想不展示页面,我们只要这样做就行了

修改plugin.json文件即可

{
	"logo": "logo.png",
	"preload": "preload.js",
	"features": [
		{
			"code": "demo",
			"explain": "测试",
			"cmds": [
				{
					"type": "over",
					"label": "百度一下",
					"exclude": "/xxx/",
					"minLength": 1,
					"maxLength": 500
				}
			]
		}
	]
}

修改完后再次运行会出现这个,这是因为没有了index.html,preload.js不知道如何展示,要想解决这个问题很简单,

preload.js

window.exports = {
    "demo": { // 注意：键对应的是 plugin.json 中的 features.code
        mode: "none",  // 用于无需 UI 显示，执行一些简单的代码
        args: {
            // 进入插件应用时调用
            enter: (action) => {
                var { payload } = action
                window.utools.shellOpenExternal('https://www.baidu.com/s?word=' + payload)
                //退出插件
                window.utools.outPlugin()
            }
        }
    }
}

其中enter等价于onPluginEnter(callback) 再次运行即可实现我们最初想要的需求

优化

其实这个有很多优化或者改进的点,不过读者如果想提升就可以试试以下优化点

1. 能否选择多个搜索网站进行搜索
2. 实现网页快开的一些功能
3. 输入一些内容能自动提示相关信息,例如百度一样
4. 能否选择指定浏览器打开网站