可以自动点击网页按钮的 Chrome 插件（manifest_v3 20241008）

0XIX0

于 2024-10-08 21:03:03 发布

阅读量322

点赞数 4

文章标签： chrome 前端 javascript 浏览器插件

本文链接：https://blog.csdn.net/ddzr972435946/article/details/142768402

版权

这是我针对一个 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 才能直接给出准确的代码。