Skip to content Skip to sidebar Skip to footer
Home / Google Chrome / Google Chrome Extension / Html / Javascript / Jquery

How Would I Go About This? (Chrome Extension)

Post a Comment
I'm new to creating extensions, and I'm trying to become more comfortable with them. Basically, I'm trying to create a simple extension that does the following: Open a new window

Solution 1:

NOTE: since January 2021, use Manifest V3 with chrome.scripting.executeScript() and the scripting permission and move "*://*/*" to host_permissions instead of using the deprecated chrome.tabs.executeScript() with the tabs permission.

First of all, you're making a mistake using the </input> closing tag: <input> tags don't need to be closed! So change your popup.html into this:

<html>
    <body>
        <input type="button" id="the_button" value="My button">
    </body>
    <script src="popup.js"></script>
</html>

Now, getting to the real question:

You need to create a new tab, then inject a content script into the page. Here is a quick solution:

  1. Add the tabs permission to your manifest.json:

    ...
"permissions": [
    "*://*/*", // this will match both http and https :)
    "tabs"
],
...

    Remove the popup.js content script from the manifest, that's useless! You don't need it.

    ...
"content_scripts": [{                         // remove!
     "matches": ["http://*/*", "http://*/*"], // remove!
     "js": ["jquery.js", "popup.js"]          // remove!
 }],                                          // remove!
...

    WARNING: When I say remove I mean trurly remove that lines from your manifest.json, do not use comments (//) and do not copy and paste my code over your code, just delete that four lines.

  2. Now, in your popup.js you can inject a content script inside your page when you open the tab, like this:

    document.getElementById("the_button").addEventListener("click", function() {
    chrome.tabs.open({url:"http://www.roblox.com", active:"true"}, function(tab) {
        chrome.tabs.executeScript(tab.id, {file:"click_the_button.js", run_at: "document_end"});
        // here is where you inject the content script ^^
    }
});

  3. This will create a new tab and inject inside it the script click_the_button.js, the one you will use to click the button inside the page (when it's loaded), whose code would be:

    var thing = $("a#roblox-confirm-btn");
thing.click();

NOTE: if you want to use jQuery in your click_the_button.js script, you can as well inject it in the tab before it:

document.getElementById("the_button").addEventListener("click", function() {
    chrome.tabs.open({url:"http://www.roblox.com", active:"true"}, function(tab) {
        chrome.tabs.executeScript(tab.id, {file:"jQuery.js", run_at: "document_start"});
        chrome.tabs.executeScript(tab.id, {file:"click_the_button.js", run_at: "document_end"});
    }
});

Resources you may find useful:


Solution 2:

You need tabs permission. I had the same problem before. The answer is here:

Chrome extension; open a link from popup.html in a new tab


You may like these posts

Post a Comment for "How Would I Go About This? (Chrome Extension)"