携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情
前言
大家好，我是小阵 🔥，一路奔波不停的码字业务员
如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~😋
加我微信：zzz886885，邀你进群，一起学习交流，摸鱼学习两不误🌟
开开心心学技术大法~~
来了来了，他真的来了~
正文
标题既然是油猴脚本了，就需要一些关于油猴脚本的前置知识，这篇temperMonkey插件初开发大概阅读时长两三分钟，感兴趣的可以稍作了解。
当然不了解也不影响下面内容的解读，只是完全没接触过油猴的同学可能会需要自己去理解一小部分概念。
多么痛的领悟
某一天，我打开了某官方文档，我要搜索某个组件或api，哇哦，它提供了cmd + k的快捷搜索耶，不错不错，幸福指数瞬间拉满。
例如以下taro的官网：
同一天，我打开了又一个官方文档，emm，没法快捷搜索，我需要移动鼠标找到搜索框，输入搜索之后发现找的内容不对，然后又要去找搜索框。。
麻烦的雅痞，这时我就想，要是有一个cmd + k的功能多好呀！
然后一段工具脚本就出现了，是的，出现的缘由就是以上。。
思想blingbling
来想一下我们怎样实现类似于cmd + k的功能
-
首先我要有一个能运行在浏览器上的容器，来让我的工具代码生效
-
没错，说的就是油猴，油猴本身是一个
chrome插件，他为我们提供了一个开阔的容器，可以用来装载并在合适的时机运行我们的js代码- 比如，油猴自带有
@match、@include、@exclude等关键key让你来定位你要拓展的网页url - 举个🌰，我要一键聚焦
juejin.cn的搜索框，那@match匹配到掘金的域名https://juejin.cn/即可。当然，你也可以写正则。 - 油猴通过关键key匹配到指定页面之后，会运行你的工具脚本
- 比如，油猴自带有
-
容器问题解决了，接下来就是工具脚本本身
-
我要在键入某个快捷键的时候让焦点定位到指定搜索框
-
0.0？这不是很容易吗，是哦，就是这么容易
-
一个键盘监听事件+input的focus操作即可，当然也可以是textarea的focus，具体内容取决于你要拓展的网页搜索框的dom元素
我们来思考下，我们以上的动作做到的事情
- 匹配到需要拓展的指定页面
- 运行工具脚本实现快捷键聚焦到搜索框功能
然后没了，是的，我们没办法完全做到cmd + k之后的智能提示，除非是该网页本身有这样的联想词功能。试想一下，假设没有接口来提供这样的联想词搜索，单凭前端是没办法实现这样的功能的。
但即便如此，也很大的解放了右手的劳动力不是，哦，也解放了大脑的劳动力，同时针对某些键盘发烧友来说，通过噼里啪啦的按键就完成了别人的鼠键组合不是很酷吗？😎！
我本人是被这种搜索方式给深深的吸引了。
上才艺
说了那么多，不如来点实际的。
虽然说要上才艺，但是奈何要展示就如上面说的一样简单且纯粹！
我截取一段代码用作示例
document.onkeydown = function (event) {
var e = event || window.event;
console.log(e, e.keyCode);
// meta + g
if (e && e.metaKey && e.keyCode == 71) {
e.preventDefault();
// npmjs.com的搜索框定位
if (window.location.origin.includes('www.npmjs.com')) {
document.querySelector('input[type='search']').focus()
}
// npmjs docs 搜索框定位
if (window.location.origin.includes('docs.npmjs.com')) {
document.querySelector('input[type=text]').focus()
}
// 掘金搜索
if (window.location.origin.includes('juejin')) {
[...document.querySelector('.main-header').classList].includes('visible') ? null : document.querySelector('.main-header').classList.add('visible')
document.querySelector('input[type="search"]').focus()
}
}
}
当然，你可以加上更多的官网搜索，比如
- prettier
- eslint
- bilibili
- mdn
- npmjs
- 谷歌api
- vscodeapi
- 诸如此类。。。
完整代码是我已经用了很久并且一直在持续更新的纯粹且行之有效的油猴脚本
该脚本没有任何技术门槛，单纯是靠一个想法一点一点堆积出来的。
所以欢迎更多热血的兄弟们加入进来，一起pr，一起issues，一起dis，一起成长！
对了，为了谷歌翻译中英文更方便，我甚至加了切换中英的快捷键在里面，导致脚本命名跟实际作用出现了一点点偏差。。。具体情况，代码一看便知
2023.07.06补充
给贡献者
如果想要提供贡献，请依据最新的方式提供配置
/**
* config是一个基础对象
* key 为 要匹配的url
* value 为 针对已匹配的url所触发的键盘监听事件等一系列配置
* value {string | object | array[string|array|object]}
* 为string时
* 默认赋值给searchSelectorStr，其他options使用默认值
* 例如：'www.baidu.com':'input'等同于'www.baidu.com':{searchSelectorStr:'input'}
* 为object时
* keyCode {number} 监听键盘的keycode
* metaKey {boolean} 是否按下command或windows按键
* searchSelectorStr {string|array} 搜索框的css选择器，最终选择效果由document.querySelector(searchSelectorStr)来决定
* 为string时，在触发指定键盘按键事件之后自动调用该选择器所选择元素的focus事件，也就是自动聚焦
* 为array时，允许设置多个选择器字符串，这些字符串之间的关系是`||`，位于数组更前方的选择器优先级更大
* isESCblur {boolean} 是否在键入`ESC`按键之后取消聚焦状态
* cb {function} 触发指定键盘事件之后的回调函数
* escCb {function} 触发`ESC`之后的回调函数
* 为array时
* 允许配置多个键盘监听事件
* array item为string时，参考value为string的情况
* array item为array时，参考searchSelectorStr为array的情况
* array item为object时，参考value为object的情况
*
*
* value的默认值为
*
* const defaultOpts = {
metaKey: true,
isESCblur: true,
keyCode: 71,
isPreventDefault: true,
searchSelectorStr: '',
cb: () => { },
escCb: () => { }
}
* 常用keyCode
71 g
70 f
13 回车
27 esc
*/
// 例如
const config = {
'csdn.net': 'input', // csdn 搜索
'www.runoob.com': '#s', // 菜鸟搜索
'cn.vuejs.org': '#search-query-nav', // vue官方文档 搜索
'react': '#algolia-doc-search', // react 官网搜索
'www.npmjs.com': {
keyCode: 71,
metaKey: true,
searchSelectorStr: 'input[type=\'search\']',
isESCblur: true,
cb: () => {
}
}
}
结语
如果文章真的有帮到你，希望可以多多点赞、收藏、关注支持一波呀！！小阵会很开心哒~
文章如有错误或不严谨之处，还望指出，感谢感谢！！！
往期好文推荐「我不推荐下，大家可能就错过了史上最牛逼vscode插件集合啦！！！(嘎嘎嘎~)😄」
