I’m developing a Chrome Extension for a specific website. The script is injected after page load, the script clicks a button, and an iframe popup is loaded.
inject.js
chrome.extension.sendMessage({}, function(response) {
var readyStateCheckInterval = setInterval(function() {
if (document.readyState === "complete") {
clearInterval(readyStateCheckInterval);
document.getElementById(‘aButton’).click();
NOTE: Unlike many similar questions on SO, the resulting iframe is same-origin. It is NOT from an external site, and there are no warnings in the inspector. (Also confirmed in Sources tab)
The script waits 3 seconds for the popup to fully load, accesses the iframe’s document object, then clicks on the target – AND nothing happens.
setTimeout(() => {
let doc = document.getElementById('iframeOne');
let innerDoc = doc.contentDocument || doc.contentWindow.document;
let innerDocElem = innerDoc.getElementById('innerDocElem');
innerDocElem.click();
}, 3000);
What I’ve Tried:
I’ve set my file’s content scripts to include all frames, and since the iframe is of same origin, the wildcard in matches should give the script access to the iframe.
manifest.json
"content_scripts": [{
"matches": "https://awebsite.com/*" ,
"js": "src/inject/inject.js" ,
"allframes": true
}]
I’ve tried using css transforms to move the element to top-left, and then using x,y coordinates to click on the iframe’s buttons
document.elementFromPoint(250, 204).click();
I’ve also tried replacing the click() method with a simulated mouse event as suggested in these answers:
How to simulate a mouse click using JavaScript?
JavaScript click() method only works once in Chrome extension