title: how to click a button in chrome with javascript
body: <p>i am tring to build google chrome extension that will click buttons (6-7 buttons)
  but for some reason none works.</p>
  
  <p>so i go to the console in chrome i try click on a button with the code :</p>
  
  <pre><code>document.getElementsByClassName("sidebarShowButton")[0].click();
  </code></pre>
  
  <p>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.</p>
  
  <p>what is the right way to click any button in the web?</p>
  
  <p>how can i implent it in the chrome extension?
  right now the extension not working. i click the button and nothing heppns.</p>
  
  <p>thank you.</p>
  
  <h1> Manifest.json </h1>
  
  <pre><code>{
      "manifest_version": 2,
      "name": "Help Desk SalesForce Helper",  
      "description": "Wow",  
      "version": "1.0",    
      "permissions": [    
      "&lt;all_urls&gt;",
      "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"
      }
  }
  </code></pre>
  
  <h1> popup.html</h1>
  
  <pre><code>&lt;!doctype html&gt; 
  &lt;html&gt;  
      &lt;head&gt;&lt;title&gt;HelpDesk SaleForce Helper&lt;/title&gt;&lt;/head&gt;  
  &lt;body&gt;
   &lt;div class="body"&gt;
      &lt;div class="right"&gt;
      &lt;h1&gt;Change Type&lt;/h1&gt;
      &lt;button id="Incident"&gt;Change to Incident &lt;/button&gt;
      &lt;button id="request"&gt;Change to Request &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="left"&gt;
      &lt;h1&gt;Foward&lt;/h1&gt;
      &lt;button id="B7"&gt; Forward to B7 &lt;/button&gt;  
      &lt;button id="Sdom"&gt;Forward to Sdom &lt;/button&gt;
      &lt;button id="Rotem"&gt;Forward to Rotem &lt;/button&gt;   
      &lt;button id="NH"&gt;Forward to NH &lt;/button&gt;
      &lt;button id="TLV"&gt;Forward to TLV &lt;/button&gt;
      &lt;/div&gt;
      &lt;script src="popup.js"&gt;&lt;/script&gt; 
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;  
  </code></pre>
  
  <h1>popup.js</h1>
  
  <pre><code>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);
  </code></pre>
  
  <h1>Content_script</h1>
  
  <pre><code>function clickrequest() {
  
      console.log('DOM fully loaded and parsed');
  
   document.getElementsByClassName("sidebarShowButton")[0].click();
  
  
  
  
  }
  
  clickrequest();
  
  </code></pre>