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

Question

I am using a chrome extension that dynamically adds a new button to a webpage. The extension works fine, but requires a human to click the added button on the webpage to start. I am trying to create an extension that click the button automatically.

I have tried the code below, but it doesn't seem to work. It interacts with the webpage around it, but not the added button.

*To be clear, I am not trying to click a button inside an extension popup. This extension adds a button to the pages HTML as the page loads.

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

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

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

If I call

document.getElementById("button-id")

it returns:

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

so the console sees the button, but the click function is not triggering anything.

Answer 1

Based on the native behavior of the target element you would like to achieve you can or cannot use it programmatically created events. In example if you would like to trigger a click - so simply create a mouse event and dispatch it on target node:

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

Some of the native behavior cannot be triggered with such manually created events. Eg native select cannot be opened as the event dispatched on it should have isTrusted field set to true, while with manual creation it will be set to false with property descriptor configurable set to false as well.

Answer 2

My guess is your JS file is being called before the extensions file has run meaning the button has not yet been added to the DOM when your code runs.

If you're able to call your code after the other extension has been run that might be your solution. Otherwise try this hacky workaround..

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 );

This will loop every 100ms until the button is found and will trigger the click event.

Working example: https://jsfiddle.net/zkyfv1wj/

Another possibility is the extension isn't listening to the click event but the mousedown or mouseup events. To trigger these just change the eventType variable.

¯\\_(ツ)_/¯

Answer 3

I think you should change run_at field to document_end in manifest.json like below.

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

I hope this is helpful for you.