持续创作，加速成长！这是我参与「AdminJS日新计划 · 10 月更文挑战」的第3天，点击查看活动详情
阅读本文大概需要 5 分钟
碎碎念
以前AdminJS抽奖总能抽到“Bug”，一直不知道有啥用。直到有一天，我发现 Bug是可以换钻石的。据不完全统计
1. 一周满勤，大概可以获得 45 个Bug
2. 一个月就是 45*4 = 220 个Bug
3. 攒够5个月，就是 1100 个Bug
4. 当你有了 1100 个Bug，就能拿一个好名次，最终兑换比可以达到 1：100
5. 也就是5个月，获得 11w 的钻石（怎么算完之后感觉没那么诱人呢。。。）
作为一个肝帝，每天收集一下Bug还不是毛毛雨。不过没有自动化的摸鱼不是好jy，于是这篇文章就应运而生了。
自动收集，我想到两种方式：
- 调用AdminJS API
- 使用 chrome 插件
正巧项目中有需要插件的地方，所以就选择了后者：写一个Chrome插件，自动收集AdminJSBug
思路
我之前收集Bug，属于收菜模式，每次访问到 Bug 收集页面，然后手动把Bug点一遍（每个Bug的留存时间是3天，3天后自动消失）
我们的插件只需要模拟人工的动作就行了
- 新 Tab 中访问 Bug收集页面 Admin.net/user/center…
- 模拟点击界面上的每个 Bug
准备工作
获取Bug的Dom标签
为了完成“模拟点击每个Bug”，我们需要拿到Bug元素的Dom标签，老规矩，F12
很顺利的，发现每个Bug的最外层 Div 都用到了 class="bug-item-web"，有了它，我们就能轻松拿到所有的Bug的Dom标签了，比如：
const doms = document.querySelectorAll(".bug-item-web")
模拟Bug的Dom标签的点击
模拟标签点击的好处显而易见，我不用关心前端如何与后端通信。老规矩，F12
天助我也，这里我看到了这个标签有一个 click 方法，那接下来就顺理成章了：
const doms = document.querySelectorAll(".bug-item-web")
for (let index = doms.length - 1; index >= 0; index--) {
const element = doms[index];
element.click();
}
拿到所有 Dom 标签后，一个for循环，依次调用他们的 click 方法，就完成了Bug的自动收集
Chrome 插件
Chrome插件的开发，其实没啥复杂的技术。主要分为多个“组件”，每个组件负责不同的功能
先来看下本文涉及到哪些“组件”
| “组件” | 简介 |
|---|---|
| manifest.json | 相当于插件的配置文件 |
| popup | 一个弹出的“页面”，可作为配置或者操作页面 |
| content | 用于与当前网页交互 |
manifest.json
具体每个参数的含义，大家有兴趣的可以翻阅文末的参考文章
这里主要对 manifest.json 提两点
{
"name": "Play Juejin",
"description": "1. 自动收集AdminJSBug",
"version": "1.0.1",
// 插件版本，3表示v3版本
"manifest_version": 3,
"author": "bigflower",
// 图标（貌似jpg不行）
"icons": {
"16": "icons/juejin.png",
"48": "icons/juejin.png",
"128": "icons/juejin.png"
},
// popup
"action": {
"default_icon": "icons/juejin.png",
"default_title": "automatic tools menu",
"default_popup": "src/popup.html"
},
// content
"content_scripts": [
{
"matches": [
"https://Admin.net/*"
],
"js": [
"src/content-bugfix.js",
"constants.js"
]
}
],
// 权限
"permissions": [
"tabs"
]
}
popup
当点击右上角的插件时，弹出的页面
这其实就是一个 html 页面，你可以在这里画“任何”你想画的页面。
popup.html
<body>
<ul>
<li id="jumpItem">跳转新Tab 并收集Bug</li>
<li id="send2BackgroundItem">[Test] 发送消息给 background</li>
</ul>
<script src="popup.js"></script>
</body>
popup.js
window.onload = () => {
const jumpItem = document.getElementById('jumpItem')
jumpItem.onclick = function () {
jumpItem.innerHTML = "Jump Over"
jump2Url('https://Admin.net/user/center/bugfix?enter_from=bugFix_bar');
}
}
/**
* 新 Tab，跳转到某个地址
* @param {新的地址} url
*/
function jump2Url(url) {
chrome.tabs.create({ url: url })
}
content.js
content 主要用于与网页的元素进行交互。比如我的这个插件，用于获取 Bug的Dom标签，并完成模拟点击
const SELECTOR_NAME_BUG = ".bug-item-web";
/**
* 页面加载完成，自动获取 bug 的 dom，并模拟 dom 的 click 完成bug收集
*/
window.onload = () => {
console.log('welcome to content-bugfix onload', SELECTOR_NAME_BUG)
const doms = document.querySelectorAll(SELECTOR_NAME_BUG)
console.log('welcome to content-bugfix onload', doms)
for (let index = doms.length - 1; index >= 0; index--) {
const element = doms[index];
element.click();
}
}
一个插件可以有多个 content，也可以在 manifest.json 中指定每个 content 的作用域，指定他们仅在某些页面才生效
后记
本文的代码已经上传到 gitee.com/bigflowerfa…
后续会更新一篇 自动收集AdminJSBug 的 2.0 版本，将会新增以下内容
- popup, background, content 之间的通信
- 通过 background 做一个定时的通知，每隔三天提醒jy们收集bug
- 进行扩展，简述 Chrome 插件还有哪些有益于日常开发的点
附录，如何加载非官方的 chrome 插件
参考文章
-
www.cnblogs.com/liuxianan/p…
-
Admin.net/post/712408…
-
Admin.net/post/702107…