我将如何去做这件事？ （Chrome扩展程序） [英] How would I go about this? (Chrome extension)
问题描述
我是新创建的扩展程序，我试图让它们变得更加舒适。基本上，我试图创建一个简单的扩展，它可以执行以下操作：
- 打开一个新窗口（实现）。
- 有能力从扩展程序中'点击'按钮（未实现）。
我是不确定如何处理扩展点击新窗口中的按钮。我该如何解决这个问题？这就是我现在所拥有的：
popup.html
< html>
< body>
< input type =buttonid =the_buttonvalue =My button>< / input>
< / body>
< script src =popup.js>< / script>
< / html>
popup.js
$ b
document.getElementById（the_button）。addEventListener（click，function（）{
var win = window.open（http://www.roblox.com，roblox，400，400）
//现在我可以做些什么来外部点击按钮？
}）
manifest.json
{
manifest_version：2，
name：Test，
description：Test Extension，
version：1.0，
图标：{
48：icon.png
}，
permissions：[
http：// * / *，
https：// * / *
]，
content_scripts：[{
matches：[http：// * / *，http：// * / *]，
js ：[jquery.js，popup.js]
}]，
browser_action：{
default_title：这是一个测试，
default_icon：icon.png，
default_popup：popup.html
}
}
首先，您使用< / input> 结束标记： < input> 标记不需要关闭！ 因此，将您的 popup.html 改为：
< HTML>
< body>
< input type =buttonid =the_buttonvalue =我的按钮>
< / body>
< script src =popup.js>< / script>
< / html>
现在，回到真正的问题：
您需要创建一个新选项卡，然后将内容脚本注入页面。 以下是一个快速解决方案：
$ b
-
添加
标签 manifest.json：> c $ c> 。
permissions：[
*：// * / *，//这会匹配http和https :)
标签
]，
...
删除
popup.js，这没用！您不需要它。清单中的内容脚本...
content_scripts：[{//删除！
匹配：[http：// * / *，http：// * / *]，//删除！
js：[jquery.js，popup.js] //删除！
}]，//删除！
...
警告：当我说删除我的意思是从你的
manifest.json中删除这些行，不要使用注释（//），并且不要将我的代码复制并粘贴到您的代码中，只需删除那四行即可。 现在， code> popup.js 当你打开标签时，你可以在你的页面内插入一个内容脚本，如下所示： -
这将创建一个新选项卡并在其中注入脚本
click_the_button.js，您将用它来点击按钮inid （加载时），其代码为：var thing = $（a＃roblox-confirm- BTN）;
thing.click（）;
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}）;
//这里是注入内容脚本的地方^^
}
}）;
注意：如果你想在你的 click_the_button.js 脚本中使用jQuery，你可以在它之前的标签中注入它：
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}）;
}
}）;
您可能会觉得有用的资源：
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"
}
}
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
tabspermission to yourmanifest.json:... "permissions": [ "*://*/*", // this will match both http and https :) "tabs" ], ...Remove the
popup.jscontent 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.jsyou 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:
这篇关于我将如何去做这件事？ （Chrome扩展程序）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
