Search code examples
javascriptdomgoogle-chrome-devtoolsgoogle-chrome-console

Javascript performing click() in another Chrome tab using developer console


I'm using Google Chrome Dev Console to execute this script:

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

function checkbtn(btn) {
    if (btn.singleNodeValue != null) {
        console.log('Success!')
        btn.singleNodeValue.click();
        throw new Error();
    } else {
        console.log('button not here yet - next button');
    };
}

function check() {
    url = window.location.href;
    var newwindow = window.open(url, 'tab2');
    //sleep 250ms
    await sleep(250);
    var newwindow2 = window.open(url, 'tab3');
    //sleep 250ms
    await sleep(250);
    var newwindow3 = window.open(url, 'tab4');
    var loginbtn;
    while (true) {
        loginbtn = newwindow.document.evaluate("//*[text()='5544']/../../td[@class='action']/form/input[@type='submit' and not(@disabled)]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
        console.log('trying button 1');
        checkbtn(loginbtn);
        loginbtn = newwindow2.document.evaluate("//*[text()='5544']/../../td[@class='action']/form/input[@type='submit' and not(@disabled)]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
        console.log('trying button 2');
        checkbtn(loginbtn);
        loginbtn = newwindow3.document.evaluate("//*[text()='5544']/../../td[@class='action']/form/input[@type='submit' and not(@disabled)]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
        console.log('trying button 3');
        checkbtn(loginbtn);     
    };
};

However, this leads to nothing but the click being performed in the currently active tab, in which's console I post the code. Is there a way to make the Click happen in e.g. the third tab or is this impossible because of security reasons?

EDIT: As of duplication reasons to this: Call a javascript function across browser tabs: The given post doesn't clarify if the code is ran from the browser console. I want to know if there is any way that I could manipulate the other tab (locally) to click a button. Also: if not possible: is it possible with an extension?


Solution

  • This is possible using a browser extension. You could have a content script file injected in all tabs to manipulate the DOM and a background script to query the desired tabs. This option would require querying tabs in background and then sending messages to the content script in order to execute the JS code.

    Or you could use chrome.tabs.query and chrome.tabs.executeScript, which are available only in the background context, thus you wouldn't need to use content scripts as injected files.