chrome插件模拟isTrusted的事件

news2024/12/25 0:06:49

文章目录

  • 方法
  • 原理

使用js模拟的事件isTrusted的值时false。有的时候我们想要模拟sTrusted未true的事件就比较麻烦了。
我们可以利用chrome插件的 chrome.debugger解决改问题。

方法

大体思路是:模拟事件的请求从content_script.js发出,到达background.js进行模拟。

  • manifest中声明debugger的权限
    manifest.json:
{
    "manifest_version": 3,
    "name": "test",
    "description": "test",
    "version": "0.0.1",
    "background": {
        "service_worker": "background.js"
    },
    "action": {
        "default_popup": "./dist/index.html"
    },
    "content_scripts": [
        {
            "js": [
                "content_script.js"
            ],
            "run_at": "document_start"
        }
    ],
    "permissions": [
        "debugger",
    ]
}
  • content_script.js发出请求
// 该函数的作用是:通过触发element身上的mousedown事件来触发element的点击事件
function openDebuggerToClick(element) {
  return new Promise((resolve, reject) => {
    console.log('click目标是', element)
    const x = element.getBoundingClientRect().left + 5
    const y = element.getBoundingClientRect().top + 5

    // 根据按钮的mousedown事件来触发点击事件
    element.addEventListener(
      'mousedown',
      function (e) {
        if (!e.isTrusted) {
          e.preventDefault()
          let obj = { x, y }
          chrome.runtime.sendMessage(
            {
              action: 'mousedownToClick',
              params: obj
            },
            function (response) {
              console.log('响应结果是', response)
              if (response.code === 200) {
                resolve('click success')
              } else {
                reject('click fail')
              }
            }
          )
        }
      },
      true
    )
    // 触发click
    element.dispatchEvent(
      new MouseEvent('mousedown', {
        bubbles: true,
        cancelable: true
      })
    )
  })
}
  • background.js处理请求,模拟isTrusted未true的点击
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
 if (request.action === 'mousedownToClick') {
    const { params } = request
    impMousedownToClick(params, sender, sendResponse)
  }
  return true
})
//  ----------------------mouseDown模拟点击跳过限制----------------
const impMousedownToClick = (params, sender, sendResponse) => {
  chrome.debugger.attach({ tabId: sender.tab.id }, '1.2', function () {
    console.log('接收到content的消息---------', params, sender)
    let flag = true
    // sendResponse({ yourEvent: '正在调整, 需要时间生效' })
    const xC = params.x
    const yC = params.y
    //通过触发鼠标的按下和抬起事件来触发点击事件
    chrome.debugger.sendCommand(
      { tabId: sender.tab.id },
      'Input.dispatchMouseEvent',
      { type: 'mousePressed', x: xC, y: yC, button: 'left', clickCount: 1 },
      function () {
        if (chrome.runtime.lastError) {
          console.error(chrome.runtime.lastError.message)
          flag = false
          return
        }
      }
    )
    chrome.debugger.sendCommand(
      { tabId: sender.tab.id },
      'Input.dispatchMouseEvent',
      {
        type: 'mouseReleased',
        x: xC,
        y: yC,
        button: 'left',
        clickCount: 1
      },
      function () {
        console.log('鼠标弹起完成_ 处理返回逻辑')
        if (chrome.runtime.lastError) {
          console.error(chrome.runtime.lastError.message)
          flag = false
          return
        }
        setTimeout(() => {
          if (flag) {
            sendResponse({ code: 200, message: '点击成功' })
          } else {
            sendResponse({ code: 500, message: '点击失败' })
          }
          chrome.debugger.detach({ tabId: sender.tab.id }, () => {
            console.log('取消attach')
          })
        }, 5000)
      }
    )
  })
}

原理

什么是isTrusted属性?在web api官方网站mozilla.org有如下解释:“Event接口的 isTrusted 属性是一个只读属性,它是一个布尔值(Boolean)。当事件是由用户行为生成的时候,这个属性的值为 true ,而当事件是由脚本创建、修改、通过 EventTarget.dispatchEvent() 派发的时候,这个属性的值为 false 。”

所以如果我们使用Chrome DevTools Protocol协议的Input.dispatchMouseEvent接口,触发的事件isTrusted就为true。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2099324.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

通过 GitHub Actions 执行数据库 Schema 变更工作流

原文地址 https://www.bytebase.com/docs/tutorials/github-ci/ 教程库:https://github.com/bytebase/github-action-example 开发者们喜欢将 Schema 变更脚本与应用程序代码一起保存在 Git 中,这样变更脚本就能像应用程序代码一样接受审核和版本控制&…

2024年06月 C/C++(六级)真题解析#中国电子学会#全国青少年软件编程等级考试

C/C++编程(1~8级)全部真题・点这里 第1题:区块反转 给定一个单链表 L,我们将每 K 个结点看成一个区块(链表最后若不足 K 个结点,也看成一个区块),请编写程序将 L 中所有的区块链反转。例如:给定 L 为 1→2→3→4→5→6→7→8,K 为 3,则输出应该为 7→8→4→5→6→1→…

百度地图绘制电子围栏(包括移动端绘制操作)以及检测坐标是否在电子围栏内

由于本人在PC端仅使用了多边形绘制,但矩形跟多边形用法基本一样,圆形并未使用,如不符合读者需求也可以参考一下。 绘制后得到的数据可能不同,但绘制方法仅仅是传递的参数不同。 关于给坐标数组在地图绘制图形的效果在移动端部分包…

【读书笔记-《30天自制操作系统》-14】Day15

本篇内容开始讲解多任务。本篇内容结构很简单,先讲解任务切换的原理,再讲解任务切换的代码实践。但是涉及到的知识不少,理解上也有些难度。 1. 任务切换与多任务原理 1.1 多任务与任务切换 所谓多任务,指的是操作系统同时运行多…

ambari-hdp启动yarn报错Corruption: checksum mismatch

ambari-hdp启动yarn报错Corruption: checksum mismatch 页面报错 Traceback (most recent call last):File "/var/lib/ambari-agent/cache/stacks/HDP/3.0/services/YARN/package/scripts/nodemanager.py", line 102, in <module>Nodemanager().execute()Fil…

万字文档带你走进Python的世界

目录 Python基本使用语法 老生常谈 Python中的注释 Python变量 定义变量 变量类型 Python变量的特点 Python中的输入与输出 Python中的运算符 算术运算符 /和// **运算符 关系运算符 逻辑运算符 赋值运算符 Python运算符优先级 Python分支语句 if语句和if-else语句 if-else if-…

Java | Leetcode Java题解之第386题字典序排数

题目&#xff1a; 题解&#xff1a; class Solution {public List<Integer> lexicalOrder(int n) {List<Integer> ret new ArrayList<Integer>();int number 1;for (int i 0; i < n; i) {ret.add(number);if (number * 10 < n) {number * 10;} els…

Datawhale X 李宏毅苹果书 AI夏令营

文章目录 我认为苹果书是最好的深度学习原理教材 第三章开篇讲的就是为什么深度学习模型会优化失败&#xff0c;这个问题其它在我们训练深度学习模型的过程中是非常常见的一种现象&#xff1a;明明使用了更加深层的结构&#xff0c;但它的表现与之前一样&#xff0c;有时甚至不…

企业IT服务管理(ITSM)的实践与探索

随着信息技术的飞速发展&#xff0c;企业对IT服务管理&#xff08;ITSM&#xff09;的需求也日益增长。在这个背景下&#xff0c;某大型集团&#xff08;以下简称“该机构”&#xff09;逐步构建了完善的IT服务管理体系&#xff0c;其发展历程和实践经验对于广大运维团队而言&a…

OceanBase V4.2解析:如何用迭代器 Generator快速生成任意数据

前言 OceanBase 4.2 版本新增了迭代器 generator 函数。尽管这一功能在数据库领域中已属于通用能力&#xff0c;postgresql 也提供了类似的函数&#xff0c;然而&#xff0c;与MySQL和Oracle数据库在默认情况下是需要用户额外编写函数来实现的。OceanBase 4.2 的这一更新也是满…

鸿蒙(API 12 Beta6版)图形【AR物体摆放】 AR引擎服务

概要 本章节通过AR Engine识别设备周围的平面&#xff0c;并允许用户在平面上放置虚拟物体&#xff0c;实现虚拟和现实的融合。AR物体摆放可用于虚拟家具、数字展厅等应用&#xff0c;给用户提供虚实结合的新体验。通过本示例&#xff0c;您可以学习并掌握如何使用AR Engine开…

刷题记录(2)

1. HWOD机试 - 模拟消息队列(100) package com.yue.test;import org.junit.Test;import java.util.ArrayList; import java.util.Arrays; import java.util.LinkedList; import java.util.List;/*** Author: 夜雨* Date: 2021-12-08-10:31* Description:* Version 1.0*/ public…

C#编译成32和64位的区别

C#编译成32和64位的区别 背景 C#32位客户端项目在把代码提交到客户端之后&#xff0c;jinkens直接崩掉了。原因是内存占用100%运维同学建议改成64位&#xff0c;理由是电脑内存大&#xff0c;客观条件IT不给扩。那么在同一台电脑上&#xff0c;32位和64位在编译过程中有什么区…

【DEV工具-IDEA】idea的光标变成黑块了?

项目场景&#xff1a; 解决&#xff1a;windows&#xff1a;按一下insert键。

Python获取次幂数据公众号榜单数据

公众号排行榜,wx公众号排行榜,原创排行榜,赞赏排行榜,评论排行榜 教程仅供参考,请勿滥用,由此带来的法律责任,需由自己承担。 一、运行效果 二、程序代码 #!/usr/bin/python # -*- coding: UTF-8 -*- """ @author: Roc-xb """import request…

Java学习第六天

Java进阶知识面向对象 static&#xff1a;是静态的意思&#xff0c;可以修饰成员变量&#xff0c;表示该成员变量在内存中只存储一份&#xff0c;可以被共享访问。 静态成员变量&#xff08;有static修饰&#xff0c;属于类&#xff0c;内存中加载一次&#xff09;&#xff1a…

三元里等你!融合三个经典模型!Transformer-LSTM-SVM多变量时间序列预测(Matlab)

三元里等你&#xff01;融合三个经典模型&#xff01;Transformer-LSTM-SVM多变量时间序列预测&#xff08;Matlab&#xff09; 目录 三元里等你&#xff01;融合三个经典模型&#xff01;Transformer-LSTM-SVM多变量时间序列预测&#xff08;Matlab&#xff09;效果一览基本介…

I2C总线的标准收发代码

结合I2C总线协议的知识&#xff0c;我们可以知道I2C写数据由一下10个步骤组成。 第一步&#xff0c;发送一个起始信号。 第二步&#xff0c;发送7bit从机地址&#xff0c;即OZ9350的地址。此处需要注意&#xff0c;发送数据时&#xff0c;无法发送7bit数据&#xff0c;此处发…

求和放大器(单位/非单位增益加法器+比例加法器)+运算放大器实现积分器和微分器

2024-9-2&#xff0c;星期一&#xff0c;22:00&#xff0c;天气&#xff1a;晴转雨&#xff0c;心情&#xff1a;晴。新的一周开始了&#xff0c;新的一个月又开始啦&#xff0c;希望大家开开心心&#xff0c;以崭新的面貌迎接中秋和十一假期&#xff01;废话不多说&#xff0c…

LinkAI工作流支持广场访问和api调用啦

什么是工作流 LinkAI工作流&#xff08;WorkFlow&#xff09;是一种灵活的智能体搭建方式。可以自由选择「大模型、应用、知识库、插件、意图识别、转人工、渠道消息发送」等多种原子能力&#xff0c;通过可视化拖拉拽的方式进行组合编排&#xff0c;零代码搭出一个业务流程。…