Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Clicking Buttons on a Website with a chrome extension

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!

like image 447
Edward Chen Avatar asked Mar 29 '18 01:03

Edward Chen


People also ask

How do you right-click with an extension?

Extension Metadata How to use the extension? Simply click on the toolbar button if the right-click is blocked on a website. That's it! Note that this extension uses a non-persistent background script which means it is not using any resource unless the toolbar button is pressed.


1 Answers

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
like image 175
Kas Elvirov Avatar answered Sep 19 '22 07:09

Kas Elvirov