Question

我正在使用chrome扩展程序，该扩展程序可以动态地向网页添加新按钮。该扩展程序可以正常运行，但是需要有人点击网页上添加的按钮才能启动。我正在尝试创建一个扩展，该扩展会自动单击按钮。

我尝试了下面的代码，但似乎无法正常工作。它与周围的网页交互，但不与添加的按钮交互。

*为了清楚起见，我不尝试单击扩展弹出窗口内的按钮。此扩展程序在页面加载时向页面HTML添加按钮。

$("#button-id").click()

document.getElementsByClassName("class-name")[0].click()

document.getElementById("button-id").click()

如果我打电话

document.getElementById("button-id")

它返回：

<button class="button-class" tabindex="0" title="Button Title" id="button-id"></button>

因此控制台可以看到该按钮，但是单击功能不会触发任何操作。

Answer 1

根据目标元素的本机行为，您可以或不能使用以编程方式创建的事件来使用它。例如，如果您想触发点击-只需创建一个鼠标事件并将其分派到目标节点即可：

const clickEvent = new MouseEvent('click');
const targetNode = document.getElementById('xxx');
targetNode.dispatch(clickEvent);

某些本地行为无法通过此类手动创建的事件来触发。例如。无法打开本机选择，因为在其上调度的事件应将isTrusted字段设置为true，而在手动创建时将其设置为false，同时将属性描述符configurable设置为false。

Answer 2

我的猜测是，在扩展文件运行之前将调用您的JS文件，这意味着在您的代码运行时尚未将按钮添加到DOM。

如果在其他扩展程序运行之后能够调用代码，则可能是您的解决方案。否则，请尝试使用该变通方法。.

var buttonTrigger = setInterval( function() {
    var buttonElement = document.getElementById( 'button-id' );
    if ( buttonElement ) {

        var eventType = 'click'; // click | mousedown | mouseup | mouseover ..
        var eventObject = document.createEvent( 'MouseEvents' );
            eventObject.initEvent( eventType, true, false );

        buttonElement.dispatchEvent( eventObject );

        clearInterval( buttonTrigger );
    }
}, 100 );

这将每隔100毫秒循环一次，直到找到按钮为止并触发click事件。

工作示例：https://jsfiddle.net/zkyfv1wj/

另一种可能性是，扩展程序不是在监听click事件，而是在监听mousedown或mouseup事件。要触发这些，只需更改eventType变量。

¯\ _（ツ）_ /¯

Answer 3

我认为您应该将 manifest.json 中的 run_at 字段更改为 document_end ，如下所示。

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["jquery.min.js", "your.js"],
      "run_at": "document_end"
    }
  ],

我希望这对您有帮助。

单击由Chrome扩展程序添加的网页上的按钮

3 个答案: