想法来源

在一个公众号号主群里，有新人进来的时候就会甩出这样的一个列表。

这如果一个一个加到公众号转载白名单里，可能就想退群了

。于是就有了做一个批量添加公众号转载白名单的想法。

必备神器

我立刻就想到了用油猴脚本（Tampermonkey）来实现。

Tampermonkey 是一款免费的浏览器扩展和最为流行的用户脚本管理器，它适用于 Chrome, Microsoft Edge, Safari, Opera Next, 和 Firefox。 虽然有些受支持的浏览器拥有原生的用户脚本支持，但 Tampermonkey 将在您的用户脚本管理方面提供更多的便利。它提供了诸如便捷脚本安装、自动更新检查、标签中的脚本运行状况速览、内置的编辑器等众多功能， 同时Tampermonkey还有可能正常运行原本并不兼容的脚本。

简单的说，在控制台执行的任何 js 操作，处理 dom 、发送网络请求等，都可以通过油猴脚本在某个网站打开的时候去自动执行。

之所以可以想到油猴脚本，是因为前段时间我已经写过了一个油猴脚本，主要是可以过滤美团一些内部网站的评论区中的 1（我也不知道为什么会有评论区刷 1 的习惯），甚至在美团内部得到了各个官方号的推荐。主要原理就是重写了全局的 fetch 函数，拿到数据后将评论区内容进行一遍过滤，然后再 return 出去，通过这个脚本对油猴有了一个初步的认识。

MVP 验证

走一遍添加转载白名单的过程，抓一抓接口然后在控制台执行一下，看是否能成功。

首先搜索会发一个请求。

选择搜索出来的公众号，添加也会发一次请求。

将刚刚添加的 小甜文 公众号删除，然后将请求导出 fetch 代码，在控制台执行。

完美！如下图，执行完上边的网络请求后成功添加了「小甜文」。

有了上边的实验基本可以确定这个功能肯定是可以做的，我们只需要传入一个公众号数组进行遍历，首先发送 search 请求得到相关信息，最后将信息传入到 add 请求中即可。

关键代码

dom 操作

为了方便用户操作，我们需要加一些 dom 元素，比如 批量添加 这个 button，因为之前没在油猴脚本写过 dom ，所以同样先在控制台试了一下。

const fatherNode = document.getElementsByClassName(
      "global-article__add-button"
)[0]; //得到包含「添加」 button 的父元素，如下图
const addNode = fatherNode.firstElementChild.cloneNode(true); //复制原有的「添加」 button
addNode.innerText = "批量添加";
addNode.style = "margin-left:10px";
fatherNode.appendChild(addNode); //添加到原有的「添加」button 后边

上边的代码在控制台执行，成功添加了 button。

之后就是再写一个对话框，用来让用户输入公众号，这个过程慢慢调样式就可以了。

token

还有一个关键的地方就是发送请求的参数有一个 token 参数。

这个 token 参数从哪里来呢？因为大学的时候写过一些爬虫，所以对这个参数很敏感，第一反应就是去网页的源代码中拿。

下边验证了一下，打开源代码搜索 token。

会发现 html 中有很多 token ，我们随便从一个 dom 元素中去拿即可。

const getToken = () => {
  try {
    const url = document.getElementsByClassName(
      "weui-desktop-account__nickname"
    )[0].href;
    return url.match(/.*token=(\d+)&.*/)[1];
  } catch (e) {
    return "";
  }
};

Ps:

原本以为上边就足够了，文章写完把下边的整个名单都输入的时候

掘金开发者社区,不正经的前端,前端公虾米,编程微刊,胡哥有话说,若川视野,前端壹栈,Vue中文社区,深圳湾码农,编程如画,前端UpUp,印记中文,全栈面试,前端森林,全栈修炼,前端GitHub,洛竹早茶馆,前端简报,前端布道师,前端Q,脑洞前端,前端三元同学,歪立邪说,前端加加,前端下午茶,前端那些趣事,前端皮小蛋,前端开发攻城狮,前端技术优选,前端自学社区,前端印象,前端迷,前端技术江湖,iCSS前端趣闻,全栈前端精选,前端复习课,前端迷社区,最帅的坏兔子,技术漫谈,1024译站,前端进阶指南,前端宇宙,全栈成长之路,豆皮范儿,小生方勤,前端巅峰,前端桃园,秋风的笔记,前端秦爱德,程序员自习室,前端食堂,鱼头的Web海洋,TianTianUp,前端从进阶到入院,编程每日一题,Hello FE

没想到翻了车。。。由于调用的过快，微信把搜索公众号的接口给我封了，而且不是封的 token ，是按照账号封的，重新登录获取新的 token 也不行了。无法通过公众号名称搜了，只能通过公众号的微信号来搜。

为了防止上边的问题出现，代码里需要停顿一下，模拟一个 sleep 函数。

const sleep = async (time) => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(), time);
  });
};

调用完搜索接口停顿 2 秒，调用完添加接口停顿 1秒 sleep(1000) 。

pps:

又找了一个号测试了一下，发现事情并不简单。虽然限制了速度，但另一个号测试的时候发现搜索接口调用到大概 100 次的时候，出现了同样的问题，不能通过公众号名称搜索，只能通过微信号搜索。我猜测，公众号的名称搜索接口的每日调用量做了限制，会在第二天某个时间点恢复。

第二天的时候，果然搜索接口正常了，然后我又重复了几次批量调用，果然又不能正常搜索了。。。

最终效果

使用方法：

在浏览器插件市场安装 Tampermonkey，Chrome 的安装地址如下

https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo

img

打不开的话我下了一个油猴脚本离线的包，可以从百度网盘下，链接: https://pan.baidu.com/s/1S0KmVvuoYGjul3l1XCh-mA 密码: 6bfd ，下载好后把文件拖到 Chrome 的扩展程序页面就自动安装了

然后通过下边的链接安装公众号脚本：

https://greasyfork.org/zh-CN/scripts/428231-%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E6%89%B9%E9%87%8F%E6%B7%BB%E5%8A%A0%E5%85%A8%E5%B1%80%E5%8F%AF%E8%BD%AC%E8%BD%BD%E8%B4%A6%E5%8F%B7

安装成功后进入微信公众号 -> 原创 -> 全局可转载账号，会发现多了一个「批量添加」的 button，输入所有的公众号然后添加即可。

感受

很久没有写过原生的 dom 操作了，有种奇妙的感觉。再次感叹下油猴脚本的强大，大家浏览器上有什么痛点的话也可以试一试。另外还见识到了微信的风控能力。。。应该就是为了防止用户去爬公众号的信息。

文章本来周一早上就该发出来了，没想到逻辑都好了却遇到了微信这一出。用几个公众号做了几次实验，得出的结论大概是：

公众号搜索接口调用频率太快以及调用次数超过某个值的时候，就无法通过公众号名称搜索公众号了，只能通过微信号进行搜索。调用过快引起的话过一会儿就恢复了，但如果是调用过多需要第二天才能恢复了。

公众号文中的连接无法打开，可以打开全文到知乎获得源码链接以及安装地址或者后台回复「批量添加」。