I’m injecting a script which is supposed to click on an element as soon as it appears on the browser page. It is able to find the element, however .click() doesn’t actually click it, despite everything else seemingly running fine.

from popup.js, works as intended.

chrome.scripting.executeScript({
  target: {tabId: targetTab},
  files: [reaction-time.js]
})

reaction-time.js , everything runs (and logs), but the button.click() doesn’t click the element.

if(document.querySelector('#root')){
  const observer = new MutationObserver((mutations, observer)=>{
    for(let mutation of mutations){
      if(mutation.type ==='childList'){
        console.log("Mutation detected...")
        if(document.querySelector('.view-go')){
          button = document.querySelector('.view-go')
          console.log("About to click...",button) // works
          button.click() // nothing actually happens
          console.log("clicked.") // works
        }
      }
    }
  })

  observer.observe(document.querySelector('#root'), { childList: true, subtree: true });
}

manifest.json

{
"update_url": "https://clients2.google.com/service/update2/crx",

  "manifest_version": 3,

  "name": "testing stuff",
  
  "short_name": "testing stuff",

  "version": "0.1.2",
  
  "description": "Collection of projects",

  
  "icons": {
    "48": "images/Sparkle_Doll.png",
    "128": "images/Sparkle_Doll.png"
  },

  "permissions": ["tabs", "storage", "scripting"],

  "host_permissions": ["<all_urls>"],

  "content_security_policy": {
    "sandbox": "sandbox allow-scripts; 'unsafe-inline' 'self'"
  },

 
  "action": {
    "default_title": "testing stuff",
    "default_icon": "images/Sparkle_Doll.png",
    "default_popup": "popup.html"
  },
  
  "background": {
    "service_worker": "javascripts/background.js"
  },

  "web_accessible_resources": [{
    "resources": [
      "*.html",
      "*.woff2",
      "*.tff",
      "images/*",
      "javascripts/*",
      "styles/*",
      "reaction-time.js"
    ],
    "matches": ["<all_urls>"]
  }]
}

It should have clicked on the green area, but it did not.

Here I try it with a different element, but it still does not emulate the click.

I’ve gotten it working with puppeteer a while back also using the .click() function (video), so I’m not sure what I’m doing wrong now.

Update:
The .click() actually works on any other site I’ve tested this on but the one I was originally targetting. It seems like there are restrictions of some kind preventing isntances of .click() from going through. video: click() works on some sites, not on others

Solution (sort-of):
Replaced .click() with this, which works.