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:
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"
}
}
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:
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments