Clicking Buttons on a Website with a chrome extension

14,155

Now it works. Install it and check it out. To see how the extension works, you should be on this site (StackOverflow) and provide all these files and icon.png

manifest.json

{
    "manifest_version": 2,
    "name": "Button Click",  
    "description": "Be able to press buttons",  
    "version": "1.0",    
    "browser_action": { 
        "default_icon": "icon.png",
        "default_popup": "popup.html"  
    },
    "permissions": ["tabs", "<all_urls>"]
}

popup.html

<!doctype html>  
<html>  
    <head><title>Fill</title></head>  
    <body>
        <h2 id="htwo">Button presser</h2>
        <button id="press">Go to activity tab</button>  
        <script src="popup.js"></script> 
    </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: "utilities.js"});
    });
}
// adding listener to your button in popup window
document.getElementById('press').addEventListener('click', injectTheScript);

utilities.js

/**
 * Gets the desired element on the client page and clicks on it
 */
function goToActivityTab() {
    var activityTab = document.getElementsByClassName("my-profile")[0];

    activityTab.click();
}

goToActivityTab();

For more information use these links

chrome.tabs
Content Scripts
Tutorial for beginners from Google

14,155

Author by

Edward Chen

Updated on July 26, 2022

Comments

Edward Chen almost 2 years

I am trying to make a google chrome extension that allows the user to press a button in the chrome extension menu and that causes a button on a selected webpage to be clicked.The problem I have currently is the syntax and code in my injector.js. It says unexpected token ; and unexpected token [. I would appreciate any help. Here is my manifest.json:

    {
  "manifest_version":2,

  "name": "Button Click",
  "description": "Be able to press buttons",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "storage"
  ]
}

Here is my html

    <!DOCTYPE html>

<html>  
    <head>
    <title>Fill</title>

    </script><script src="popup.js"></script>

    </head>
  <body>
    <h2 id="htwo">Button presser</h2>
    <button id="press">Press Button</button>
  </body>

</html>

and my javascript:

window.onload=function(){
    if(document.getElementById("press")){
        document.getElementById("press").addEventListener('click',function(){
            document.getElementById("htwo").innerHTML="yay";
            chrome.tabs.executeScript({
                file:"injector.js"
            });
        });
    }
}

injector.js:

function pressButton(){
    var buttons=document.getElementsByClassName("button"),
    button[0].click();
}
pressButton();

By the way, the button I am trying to click is an input button in which I inspect element, I get: "(input type="submit" name="commit" value="add to cart" class="button")" for some reason wont display This button can be found here: http://www.supremenewyork.com/shop/accessories/p840x2jsc/yks6zay73

Note: I know there were other people asking questions about the same topic, but the method that they used didn't work for me. Thanks for helping me out!

Edward Chen about 6 years

if I wanted to choose another button, how would I do it?
Edward Chen about 6 years

would I just find the class of the button and replace my-profile?
Edward Chen about 6 years

sorry to bother you so much, but I have a few questions
Edward Chen about 6 years

what does chrome.tabs.query({active: true, currentWindow: true}, function(tabs) do? and also what does chrome.tabs.executeScript(tabs[0].id, {file: "utilities.js"}); this do.
Kas Elvirov about 6 years

@EdwardChen I've added comments and links that answer your questions
Kas Elvirov about 6 years

@EdwardChen If the answer satisfies you then you can mark it as correct
Edward Chen about 6 years

Ok thanks for the help. I got it working by changing some of the javascript. Instead of using document.getElementsByClassName, I just used document.getElementsByName.Also you needed to add a window.onload function or else the program would start too early I think.Anayways, thanks so much for the help