这是我针对一个 vue 单页应用做的自动点击插件。他可以在这个 vue 单页应用的某一个子页面加载时，自动点击页面上的按钮。
分享那个这个案例的意义在于，vue 单页应用不同于一般的网页，他有很多事件是不触发的，需要自己想办法处理。在这里要感谢“智谱清言”，只要问题问的够明确，他就可以帮助写出代码。
本项目包含如下几个文件：
background.js 代码如下：
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
if (changeInfo.status === 'complete') {
console.log(`插件：Tab ${tab.url} has completed loading.`);
// 发送消息给对应的tab的contentscript
chrome.tabs.sendMessage(tabId, "插件：background消息", function(response) {
// 处理来自contentscript的响应（如果需要）
console.log('插件：Response from contentscript:', response);
});
}
});content-script1.js 代码如下：
// 这个函数的运行过程要去网页端 console 去看
// 获取当前时间
var currentTime = new Date();
var currentHour = currentTime.getHours();
var currentMinute = currentTime.getMinutes();
var currentSecond = currentTime.getSeconds();
console.log('插件------------------');
console.log('插件开始执行。当前时间：' + currentHour + ':' + currentMinute + ':' + currentSecond);
function checkURL(url){
// console.log('插件：checkURL:'+url);
var flag = false;
if(typeof url == "undefined" || null == url)
url = window.location.href;
// var regex = /.*\:\/\/.*\/form.php/;
// var regex = /https\:\/\/.*pretreatment.*/;
var regex = /http\:\/\/.*\/#\/basic\/list\?type=1/;
var match = url.match(regex);
if(typeof match != "undefined" && null != match) {
console.log('插件：匹配到待签收页面。');
flag = true;
}
return flag;
}
function getCurrentTab(){
return window.location.href;
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
class XFXS_filter{
constructor() {
}
find_inputButton(){
this.XFXS_input = document.evaluate('//label[contains(text(),"形")]/following-sibling::div/div/div/input', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
if (this.XFXS_input == null){
// console.log('插件：XFXS_input为空。');
return null;
} else {
// console.log('插件：XFXS_input不为空。');
// console.log(this.XFXS_input);
return this.XFXS_input;
}
}
changeColor_XFXS() {
// 修改背景色
// 查找所有具有指定类名的div
var divs = document.querySelectorAll('div.el-form-item.el-form-item--mini');
// 过滤出包含innerText为"事项"的label的div
var targetDiv = Array.from(divs).find(function(div) {
return Array.from(div.querySelectorAll('label')).some(function(label) {
return label.innerText.includes("xing");
});
});
// console.log('插件：targetDiv:');
// console.log(targetDiv); // 输出找到的div元素，如果没有找到则为undefined
targetDiv.style.backgroundColor = "red";
var labels = document.querySelectorAll('label.el-form-item__label');
for (var i = 0; i < labels.length; i++) {
// 检查 innerText 是否为“形”
if (labels[i].innerText === '形') {
// 如果是，则执行相应操作，例如打印出来或者修改样式
// console.log('插件：targetlabel:');
// console.log(labels[i]);
// 例如，将找到的 label 文本颜色设置为蓝色
labels[i].style.color = 'yellow';
}
}
}
async click_to_find_listnode(){
this.XFXS_input.click();
let sleep_gap = 150;
await sleep(sleep_gap);
this.XFXS_dropdown_w = document.evaluate('//div[contains(@style, "position: absolute")]/div[@class="el-scrollbar"]/div/ul/li/span[text()="网"]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
this.ChaXun = document.evaluate('//span[@class="btn matters" and text()="询"]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
this.XFXS_dropdown_w.click();
await sleep(sleep_gap);
console.log('插件：已点击。');
this.ChaXun.click();
await sleep(sleep_gap);
console.log('插件：点选按钮结束。');
}
}
function inputValue(dom, st) {
var evt = new InputEvent('input', {
inputType: 'insertText',
data: st,
dataTransfer: null,
isComposing: false
});
dom.value = st;
dom.dispatchEvent(evt);
}
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
console.log('插件：Received details:'+message);
sendResponse({msg: "插件：content_script_response"});
console.log('插件：check_action 开始。');
if (checkURL(getCurrentTab())) {
var XFXS_filter_instance = new XFXS_filter();
XFXS_filter_instance.find_inputButton();
if ( null != XFXS_filter_instance.XFXS_input && XFXS_filter_instance.XFXS_input.value == '' ){
console.log('插件：XFXS_filter_instance.XFXS_input 找到了且值为空。');
// console.log(XFXS_filter_instance.XFXS_input);
XFXS_filter_instance.changeColor_XFXS();
XFXS_filter_instance.click_to_find_listnode();
} else {
console.log('插件：XFXS_filter_instance.XFXS_input 没找到或有值。');
}
}
});
document.addEventListener("DOMContentLoaded", function() {
var xpathExpression = "//*[contains(@style, 'position: absolute')]";
var result = document.evaluate(xpathExpression, document, null, XPathResult.ANY_TYPE, null);
var node;
while (node = result.iterateNext()) {
// 这里可以对找到的每个节点进行处理
console.log("插件：发现一个可见节点。"); // 例如，打印节点
}
});
manifest.json 的代码如下：
{
"manifest_version": 3,
"name": "助手",
"description": "辅助",
"version": "1.0",
"host_permissions": [ "http://11.11.11.11/" ],
"permissions": [
"tabs",
"activeTab",
"scripting",
"webRequest",
"webRequestBlocking"
],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["http://11.11.11.11/"],
"js": ["content-scripts1.js"]
}
],
"action": {
"default_icon": "Bw.png",
"default_title": "辅助",
"default_popup":"usr_input.html"
}
}
写几点经验：
1、调试时 background.js 的 console.log 的输出可以在浏览器插件页面（如下图的按钮点进去）中看到。content-script1.js 的日志输出是在网页打开后，打开“开发者工具”的控制台，里面可以看到。因为content-script1.js 是注入到特定网页的。
2、本项目涉及到的这个 vue 单页应用的网址中是包含“#”号的。但是子网页变化时，它并不触发onoad、onhashchange 事件。所以这里使用了 onUpdated 事件。在 manifest.json 配置文件中，想在网址中填带“#”的网址也是没用的，插件不支持。所以就直接填“#”前面的网址了。
3、学习插件最快的方式还是看官方 文档 。先了解全貌，然后才能向 AI 问出有针对性的问题，AI 才能直接给出准确的代码。