编写第一个油猴脚本，实现在公众号文章管理页按Ctrl+K将光标聚焦到搜索框

本文链接：https://blog.csdn.net/wannianchuan/article/details/134720728

光说不练假把式，在浏览器自定义脚本管理插件系列介绍中介绍了几款比较流行的油猴插件，今天就动手实际写一个简单的油猴脚本，实现在公众号文章管理页按Ctrl+K快捷键时将光标聚焦到搜索框的功能。

本公众号的老读者可能知道，我是一个键盘控，所有的操作都想用键盘来实现，不太喜欢用鼠标，感觉不舒服、不效率。平时在写公众号文章的时候，有时会需要在已发布的文章列表里搜索一下以前的文章作为参考，会习惯性的按 Ctrl+K 或者 / ，希望光标能聚焦到搜索框。而公众号文章管理页面并没有提供这个功能，感觉就很不方便。

要是以前的话，我可能会通过写控制台脚本来实现这个功能。实现起来很简单，但是有个问题，那就是不方便复用。下次再用到的时候，需要先从别的地方拷贝过来，再粘贴到控制台中运行。或者存成devtools代码片段，能比从别的地方拷过来强一些，但是要想让代码生效的话，也得先打开控制台，运行一下才行，还是挺麻烦。有了油猴插件，就能解决这个问题了。下面我们就从头写一个油猴脚本来实现这个功能。

首先当然要先安装油猴插件，这里的油猴插件就统指用户脚本管理插件了。我装的是篡改猴(Tampermonkey)。装好之后，将其固定到导航栏，方便使用：

然后点击篡改猴插件图标，在弹出的菜单中点击添加新脚本。

就会打开脚本编辑器了，里面默认是模版代码，我们可以在它的基础上修改

修改后的效果如下

源代码：

// ==UserScript==
// @name         给公众号后台文章管理界面增加按Ctrl+K快捷键将光标聚焦到搜索框的功能
// @namespace    wbms
// @version      0.1
// @description  实现在微信公众号后台文章管理界面按Ctrl+K快捷键时将光标聚焦到搜索框
// @author       cmdyu
// @match        https://mp.weixin.qq.com/cgi-bin/appmsgpublish?*
// @icon         <$ICON$>
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var $bodyContainer = document.querySelector('body')
    var $searchInput = document.querySelector("div.weui-desktop-form__input-area > span > input")

    $bodyContainer.addEventListener('keydown', function (e) {
        if (e.ctrlKey && e.key === 'k') {
            $searchInput.focus()
        }
    })
})();

其中最重要的一个属性是@match，它决定了在哪个网页上运行这个用户脚本。保存之后，就可以在已安装的脚本列表中看到这个脚本了：