How would I go about this? (Chrome extension)

Question

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 (achieved).
Have the ability to 'click' a button from the extension (not achieved).

I'm not sure how to approach having the extension click the button in a new window. How can I approach this? This is what I have right now:

popup.html

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

popup.js

document.getElementById("the_button").addEventListener("click", function() {
    var win = window.open("http://www.roblox.com", "roblox", 400, 400)
    //Now what can I do to externally click buttons?
})

manifest.json

{
  "manifest_version": 2,
  "name": "Test",
  "description": "Test Extension",
  "version": "1.0",

  "icons": { 
    "48": "icon.png"
   },

  "permissions": [
    "http://*/*", 
    "https://*/*"
  ],

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

  "browser_action": {
    "default_title": "This is a test",
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

Please edit your question title to be more descriptive (and no need for duplicating tags in there) — Xan, Oct 12 '14 at 10:17

Marco Bonelli · Accepted Answer · 2021-12-16T23:18:47.837

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:

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.

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 ^^
    }
});

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:

Word of warning: `// comments` in .json files are a syntax error! — Xan, Oct 12 '14 at 10:16
Yes I know, thanks, those comments are just to highlight the part of code to remove from the `messages.json` file — Marco Bonelli, Oct 12 '14 at 10:28
People tend to just copy code. Explain it outside the code block — Xan, Oct 12 '14 at 10:29

score -1 · Answer 2 · edited May 23 '17 at 11:57

-1

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

edited May 23 '17 at 11:57

Community

1
1

answered Oct 12 '14 at 02:05

Karl Henselin

1,015
12
17

How would I go about this? (Chrome extension)

2 Answers2

Linked