抖音直播间模拟用户输入操作-自动发评论插件

简介: 本插件通过延迟等待和模拟用户输入功能,实现网页自动化操作。使用 JavaScript 的 Promise 和 setTimeout 实现延迟,并结合 Chrome 扩展的调试器 API 注入代码,精准控制页面元素,触发真实用户交互事件,适用于自动化测试与表单填写等场景。

插件中延迟等待功能的实现

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
(async () => {
    while(true) {
        console.log("Start");
        await delay(5000);
        console.log("End"); // 5秒后应该输出
        await delay(5000);
    }
})();

网页中模拟用户输入操作

我们唯一客服浏览器插件实现了自动化发评论

content.js

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
(async function() {
    while(true) {
        var arr = ["你好", "加油"];
        for (let value of arr) {
            console.log(value);
            chrome.runtime.sendMessage({
                action: "simulateInput",
                xpath: '//div[@contenteditable="true"]',
                input: value
            });
            await delay(10000);
        }
    }
})();

background.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        // 处理模拟输入事件
        if (request.action === "simulateInput") {
            let xpath=request.xpath;
            executeSimulateEditableInput(sender.tab.id,xpath,request.input)
        }
});
// 发送 POST 请求
function executeSimulateEditableInput(tabId, xpath, input) {
    const code = `
      function simulateEditableInput(xpath, input) {
        const result = document.evaluate(
          xpath,
          document,
          null,
          XPathResult.FIRST_ORDERED_NODE_TYPE,
          null
        );
        const element = result.singleNodeValue;
  
        if (element) {
          // 确保元素可编辑
          element.focus();
          element.value = input;
          element.innerHTML = input;
          
          // 触发完整事件链
          ['focus', 'input', 'change'].forEach(eventType => {
            element.dispatchEvent(new Event(eventType, {
              bubbles: true,
              cancelable: true
            }));
          });
        }
      }
      simulateEditableInput(${JSON.stringify(xpath)}, ${JSON.stringify(input)});
    `;
  
    chrome.debugger.attach({ tabId }, '1.3', () => {
      chrome.debugger.sendCommand({ tabId }, 'Runtime.evaluate', {
        expression: code,
        awaitPromise: true
      }, (result) => {
        console.log('Execution result:', result);
        chrome.debugger.detach({ tabId });
      });
    });
  }

具体原理

  1. 消息监听部分:
  1. 监听扩展内部发送的消息
  2. 当收到 action: "simulateInput" 的消息时,提取 XPath 选择器和输入内容
  3. 调用 executeSimulateEditableInput 函数执行实际模拟
  1. 调试器注入部分:
  1. 使用 chrome.debugger.attach 附加到目标标签页
  2. 通过 Debugger Protocol 的 Runtime.evaluate 命令注入代码
  3. 执行完成后断开调试器连接
  1. 核心模拟逻辑(在目标页面中执行的代码):
  1. 使用 document.evaluate 通过 XPath 查找目标元素
  2. 对找到的元素执行以下操作:
  • focus():模拟获取焦点
  • 设置 valueinnerHTML 属性
  • 依次触发三个关键事件:
  • focus 事件 - 模拟元素获得焦点
  • input 事件 - 模拟用户输入
  • change 事件 - 模拟内容变更确认
  1. 事件触发机制:
  1. 使用 dispatchEvent 创建并派发合成事件
  2. 设置 bubbles: true 让事件冒泡
  3. 设置 cancelable: true 允许事件被取消

为什么使用 Debugger API

  • 普通内容脚本可能无法完全模拟所有输入场景
  • Debugger API 提供了更底层的页面控制能力
  • 可以确保事件触发的完整性和真实性

注意事项

  1. 需要扩展拥有 debugger 权限
  2. 这种方式会短暂中断页面上的所有调试会话
  3. 相比直接内容脚本注入,这种方式能更好地模拟真实用户交互

这种实现方式特别适合需要高度模拟真实用户输入的场景,比如自动化测试或表单填写扩展。

目录
相关文章
|
3月前
|
存储 人工智能 Android开发
为什么微信发送的APP安装不了,.apk转化为.apk.1
微信发送的APP文件常被改为.apk.1格式导致无法安装,推荐使用夸克或QQ浏览器解决。
258 14
|
3月前
|
存储 SQL 关系型数据库
uid转二维码工具,抖音号转UID软件,数据互站共通【易语言版】
该程序包含5个核心模块:主界面、二维码生成、抖音接口、数据库存储和工具类。使用时需
抖音快手直播间打字脚本,直播间发言循环弹幕插件,自动打广告发送文字信息源码
这是一款用于快手直播间的自动化营销工具源码,可实现直播间自动发送非重复随机广告信息、虚拟欢迎语、持续点赞等功能。
电力系统直流潮流计算研究【IEEE9节点】(Matlab代码实现)
电力系统直流潮流计算研究【IEEE9节点】(Matlab代码实现)
545 0
抖音评论脚本,全自动评论留言插件,autojs工具开发
自动评论系统包含主脚本、配置文件和说明文档。主脚本实现了完整的自动浏览和评论功能,
抖音直播间刷屏打字发言脚本,全自动弹幕插件发广告插件,按键精灵智能防风控版
这是一款用于直播间批量发送弹幕信息的插件源码,可实现自动刷屏、虚拟欢迎与持续点赞功能。通过预设广告文字和随机话术,模拟真实用户行为以规避风控
|
11月前
|
JavaScript
可自由配置的jQuery消息提示框插件toast
jquery.toast.js是一款可自由配置的jQuery消息提示框插件。该消息提示框可以自定义背景和前景色,提示框的位置,提示框的显示时间,提示框的动画效果等。
301 2
|
人工智能 文字识别 自然语言处理
Nougat:一种用于科学文档OCR的Transformer 模型
随着人工智能领域的不断进步,其子领域,包括自然语言处理,自然语言生成,计算机视觉等,由于其广泛的用例而迅速获得了大量的普及。光学字符识别(OCR)是计算机视觉中一个成熟且被广泛研究的领域。它有许多用途,如文档数字化、手写识别和场景文本识别。数学表达式的识别是OCR在学术研究中受到广泛关注的一个领域。
520 0
|
前端开发
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果(中)
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
338 1