MV3 上的 chrome.debugger.sendCommand() Input.dispatchMouseEvent 錯誤

Question

我現在已經為此苦苦掙扎了幾個小時..

我目前正在編寫 Chrome 擴展程序，其目標是自動點擊網站。 由於該網站正在檢查isTrusted屬性，我必須模擬來自chrome.debugger的點擊（或者至少，這是我找到的唯一方法）。

我其實沒有一個，而是兩個問題。

第一個：如果我“動態”設置 opts.x / opts.y，則會導致此錯誤： Uncaught (in promise) Error: {"code":-32602,"data":"Failed to deserialize params.x - BINDINGS: mandatory field missing at position 55","message":"Invalid parameters"}

第二個：嘗試直接輸入值，它正在工作，但它不是點擊提供的坐標，它實際上是點擊更低的坐標。

這是我的代碼：

背景.js

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    if (msg.text == "click that button please") {
        let infos = []
        chrome.debugger.attach({tabId: sender.tab.id}, "1.2", function() {
            let clicked  = false
            
            let x = Math.floor(msg.button.offsetLeft + msg.button.offsetWidth / 2)
            let y = Math.floor(msg.button.offsetTop + msg.button.offsetHeight / 2)

            opts = {type: "mousePressed", button: "left", x: x, y: y, clickCount: 1}

            chrome.debugger.sendCommand({tabId: sender.tab.id}, "Input.dispatchMouseEvent", opts)
                .then((e) => {
                    infos.push(e)
                });
    
            opts.type = "mouseReleased"
   
            chrome.debugger.sendCommand({tabId: sender.tab.id}, "Input.dispatchMouseEvent", opts)
               .then((e) => {
                   infos.push(e)
               });
        })
        sendResponse({clicked: infos});
    } else {
        sendResponse({error: 404});
    }
    return true;
});

內容.js

var buttons = {
    "market": "#app > div > div.mt-3 > div.d-flex.justify-content-between.align-items-baseline > div:nth-child(2) > button"
    }
}
!async function() {
    window.onclick = function(e) {
        console.log(e.target, e)
    }

    let target = document.querySelector(buttons['market']); // Working
    console.log(target);

    chrome.runtime.sendMessage({text: "click that button please", button: target})
        .then((result) => {
            console.log('Did it clicked?', result); // result = []
        });
}();

清單.json

{
    "name": "xxx",
    "description": "xxx",
    "version": "0.0.1",
    "manifest_version": 3,
    "author": "Me",

    "host_permissions": [
        "https://*.xxx.xxx/*"
    ],
    "permissions": [
        "debugger",
        "activeTab",
        "tabs",
        "scripting"
    ],
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [{
        "matches": ["https://*.xxx.xxx/*"],
        "js": ["content.js"]
    }]
}

Answer 1

您不能通過消息發送 DOM 元素。 它不可序列化，因此出現一個空的 object 並且您的公式導致NaN ，即不是數字。

解決方案：發送帶有元素坐標的對象/數組。

您對 offsetXXX 道具的使用不正確，AFAICT，因為 dispatchMouseEvent 的文檔說 x/y 是相對於視口的。

解決方案：getBoundingClientRect()。

const bb = elem.getBoundingClientRect();
chrome.runtime.sendMessage({x: bb.left, y: bb.top});

PS 另一種解決方案是在頁面的 MAIN 世界中替換 Document.prototype 的 EventTarget.prototype.addEventListener 或onclick setter，以便您的偵聽器將調用站點的偵聽器傳遞代理（事件，處理程序），其中處理程序為isTrusted返回 true .