Chrome 扩展：在使用 `document.getSelection()` 后不能使用 `document.querySelector().click()`

Question

我的扩展程序允许您从页面输入或复制一些文本（使用 document.getSelection()），然后尝试使用 document.querySelector 和 click 事件单击按钮.

如果我手动输入文本，一切都会按预期进行。但是，如果我使用 getSelection 将文本粘贴到扩展中，click 事件就会丢失。

作为参考，这是我的代码的缩写版本：

//content.js
function messagesFromReactAppListener(msg, sender, sendResponse) {
    switch (msg.method) {
        case "getSelection":
            sendResponse({ text: document.getSelection().toString() });
            break;
        case "replyToEmail":
            const replyBtn = document.querySelector(...);
            if (replyBtn) {
                replyBtn.click();
                sendResponse(true);
            } else {
                sendResponse(false);
            }
            break;
    return true;
}

// paste function, called when button pressed on extension
export function pasteText(): Promise<PasteTextRespType> {
    return new Promise((resolve) => {
        chrome.tabs &&
            chrome.tabs.query(
                {
                    active: true,
                    currentWindow: true,
                },
                (tabs) => {
                    chrome.tabs.sendMessage(tabs[0].id || 0, { method: "getSelection" }, (response: PasteTextRespType) => {
                        resolve(response);
                    });
                }
            );
    });
}

// associated with a submit button on the extension
handleSubmit(event: any) {
        ...

        chrome.tabs && chrome.tabs.query({
            active: true,
            currentWindow: true
        }, tabs => {
            chrome.tabs.sendMessage(
                tabs[0].id || 0,
                { method: REACT_MSG_METHODS.replyToEmail },
                (resp) => {
                    ...
                }
            );
        });
        event.preventDefault();
    }

我知道最好在发送响应之前有一个点击事件的监听器，但我无法以正确的方式做到这一点。也将不胜感激，但在使用上面的 paste 后，点击只是不起作用。

Answer 1

我只花了 5 天时间就弄明白了，这让我快要发疯了。事实证明，当您执行 document.getSelection() 时，会将焦点设置在您 select 的任何内容上，从而防止 click 事件在其他元素上触发。这很奇怪，因为我可以，例如，更改 selected 元素的背景 css。解决方案是将 getSelection 案例更改为：

        case "getSelection": {
            let sel = document.getSelection();
            sendResponse({ text: sel.toString() });
            sel.removeAllRanges();
            break;
        }

移除焦点/select离子并使click开火。

Chrome 扩展：在使用 `document.getSelection()` 后不能使用 `document.querySelector().click()`

Chrome extension: cannot use `document.querySelector().click()` after using `document.getSelection()`

javascript

click

typescript

reactjs

chrome-extension-manifest-v3