Clicking an element on a page through Chrome Extension

Question

Quoting the official documentation:

Content scripts are JavaScript files that run in the context of web pages. By using the standard Document Object Model (DOM), they can read details of the web pages the browser visits, or make changes to them.

So, using your content_script.js in your popup.html doesn’t make much sense, and results in an error because you don’t have any button with class="planet-name" in your popup.html page.

To do what you want, you need to create a different script for your popup.html, and add a listener to that button, so when it gets clicked, you can inject the content_script.js script into the page to click the “planet” element.

So you’ll have to:

Edit your manifest.json removing the "content_scripts" field.
Create a popup.js file to add in your popup.html page.
Add a listener for the button click inside popup.js to inject the content_script.js file using chrome.tabs.executeScript() (Manifest V2) or chrome.scripting.executeScript() (Manifest V3).
Edit your content_script.js to make it click the button directly on the page.

Manifest V3 Solution

Edit your manifest.json, it should look like this:

{
    "manifest_version": 3,

    "name": "Such Activity",
    "description": "Wow",
    "version": "1.0",
    "permissions": ["scripting"],
    "host_permissions": ["<all_urls>"],

    "action": {
        "default_title": "Click Me",
        "default_popup": "popup.html"
    }
}

Then, remove your content_script.js from the popup.html and replace it with the popup.js script:

<!doctype html>  
<html>  
    <head><title>activity</title></head>  
<body>  
    <button id="clickactivity">click</button>  
    <script src="popup.js"></script> 
</body>
</html>

Create the popup.js script and add the listener to the button that will inject the script into the current page:

function injectTheScript() {
    // Wuery the active tab, which will be only one tab and inject the script in it.
    chrome.tabs.query({active: true, currentWindow: true}, tabs => {
        chrome.scripting.executeScript({target: {tabId: tabs[0].id}, files: ["https://stackoverflow.com/questions/26390322/content_script.js"]})
    })
}

document.getElementById('clickactivity').addEventListener('click', injectTheScript)

Now, in your content_script.js, you’ll need to click the button directly, and also you will not need to use DOMContentReady, because Chrome waits to inject the script by itself. So, your new content_script.js will be:
```
const planets = document.getElementsByClassName("planet-name")
const elementToClick = planets[Math.floor(Math.random() * planets.length)]
elementToClick.click()
```

Manifest V2 Solution (deprecated!)

NOTE: since January 2021, you should use the new Manifest V3. See above for an up-to-date answer if you are using Manifest V3.

First of all, edit your manifest.json, it should look like this:

{  
    "manifest_version": 2,  

    "name": "Such Activity",  
    "description": "Wow",  
    "version": "1.0",    
    "permissions": ["tabs", "<all_urls>"],  

    "browser_action": {  
        "default_icon": "icon.png",  
        "default_popup": "popup.html"  
    }
}

Then, remove your content_script.js from the popup.html and replace it with the popup.js script:

<!doctype html>  
<html>  
    <head><title>activity</title></head>  
<body>  
    <button id="clickactivity">click</button>  
    <script src="popup.js"></script> 
</body>
</html>

Create the popup.js script and add the listener to the button that will inject the script into the current page:

function injectTheScript() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        // query the active tab, which will be only one tab
        //and inject the script in it
        chrome.tabs.executeScript(tabs[0].id, {file: "content_script.js"});
    });
}

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

Now, in your content_script.js, you’ll need to click the button directly, and also you will not need to use DOMContentReady, because Chrome waits to inject the script by itself. So, your new content_script.js will be:

function clickPlanet() {
    var planets = document.getElementsByClassName("planet-name"),
        randomplanet = Math.floor(Math.random() * planets.length),
        clickplanet = planets[randomplanet];

    clickplanet.click();
}

clickPlanet();

Manifest V3 Solution

Manifest V2 Solution (deprecated!)

Leave a Comment Cancel reply