how to click a button in chrome with javascript

Question

i am trying to build google chrome extension that will click buttons (6-7 buttons) but for some reason none works.

so i go to the console in chrome i try click on a button with the code :

document.getElementsByClassName("sidebarShowButton")[0].click();

it didn't work, but when i click the button with the "Select an element in the page to inspect it" from chrome options and then i use the console, it works.

what is the right way to click any button in the web?

how can i implent it in the chrome extension? right now the extension is not working. i click the button and nothing happens.

thank you.

Manifest.json

``` { "manifest_version": 2, "name": "Help Desk SalesForce Helper", "description": "Wow", "version": "1.0", "permissions": [ "", "tabs", "activeTab", "*://*/*", "https://icl--bmcservicedesk.eu14.visual.force.com/*" ] , "browser_action": { "default_icon": { "19": "images/icons/19.png", "38": "images/icons/38.png" }, "default_popup": "popup.html" }, "icons": { "16": "images/icons/16.png", "19": "images/icons/19.png", "38": "images/icons/38.png", "64": "images/icons/64.png", "128": "images/icons/128.png" } } ```

popup.html

<!doctype html> 
<html>  
    <head><title>HelpDesk SaleForce Helper</title></head>  
<body>
 <div class="body">
    <div class="right">
    <h1>Change Type</h1>
    <button id="Incident">Change to Incident </button>
    <button id="request">Change to Request </button>
    </div>
    <div class="left">
    <h1>Foward</h1>
    <button id="B7"> Forward to B7 </button>  
    <button id="Sdom">Forward to Sdom </button>
    <button id="Rotem">Forward to Rotem </button>   
    <button id="NH">Forward to NH </button>
    <button id="TLV">Forward to TLV </button>
    </div>
    <script src="popup.js"></script> 
</div>
</body>
</html>

popup.js

``` function injectTheScript() { // Gets all tabs that have the specified properties, or all tabs if no properties are specified (in our case we choose current active tab) chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { // Injects JavaScript code into a page chrome.tabs.executeScript(tabs[0].id, {file: "content_script.js"}); }); } // adding listener to your button in popup window document.getElementById('request').addEventListener('click', injectTheScript); ```

Content_script

function clickrequest() {

    console.log('DOM fully loaded and parsed');

 document.getElementsByClassName("sidebarShowButton")[0].click();



  
}

clickrequest();

For what you describe, I think the problem is that the button you want to click is in an iframe in the page, but you are injecting your code only on the main frame. You have to specify allFrames:true in the second argument of chrome.tabs.executeScript. — Iván Nokonoko
– Iván Nokonoko, Commented Aug 20, 2019 at 11:45

Iván Nokonoko · Accepted Answer · 2019-08-20 15:06:45Z

By what you say here:

it didnt work, but when i click the button with the "Select an element in the page to inspect it" from chrome options. and then i use the console. it works.

it seems that the element you are targeting is not in the main document's browsing context, but an iframe.

Try with the following code:

popup.js

function injectTheScript() {
    // if you don't specify a tab id, executeScript defaults to active tab in current window
    chrome.tabs.executeScript({file:'content_script.js', allFrames:true});
    // by adding allFrames:true, the code will be run in all the iframes of the webpage, not only the top context
}

document.getElementById('request').addEventListener('click',injectTheScript);

content_script.js

var theButton = document.querySelector('.sidebarShowButton');  //a shorter way to select the first element of a class
if (theButton) {
    // if the element is present in this context, click on it.
    theButton.click();
}

Collectives™ on Stack Overflow

how to click a button in chrome with javascript

Manifest.json

popup.html

popup.js

Content_script

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Manifest.json

popup.html

popup.js

Content_script

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related