javascript - 我该怎么办呢？ (Chrome 扩展)

我是创建扩展程序的新手，我正在努力熟悉它们。基本上，我正在尝试创建一个简单的扩展来执行以下操作:

打开一个新窗口(已实现)。
能够“点击”扩展程序中的按钮(未实现)。

我不知道如何让扩展程序单击新窗口中的按钮。我该如何处理这个问题？这就是我现在所拥有的:

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"
  }
}

最佳答案

注意:自 2021 年 1 月起，请使用 Manifest V3与 chrome.scripting.executeScript() 和 scripting许可并移动"*://*/*"至host_permissions而不是使用已弃用的 chrome.tabs.executeScript()与 tabs许可。

<小时/>

首先，您使用 </input> 时犯了一个错误。结束标签: <input>标签不需要关闭!所以改变你的 popup.html进入这个:

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

<小时/>

现在，进入真正的问题:

您需要创建一个新选项卡，然后将内容脚本注入(inject)到页面中。 这是一个快速解决方案:

添加tabs允许您的manifest.json :

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

删除 popup.js list 中的内容脚本，那是没用的!你不需要它。

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

警告:当我说删除时，我的意思是真正从您的 manifest.json 中删除这些行。，不要使用注释 ( // )，也不要将我的代码复制并粘贴到您的代码上，只需删除那四行。

现在，在您的 popup.js 中当您打开选项卡时，您可以在页面中注入(inject)内容脚本，如下所示:

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

这将创建一个新选项卡并在其中注入(inject)脚本 click_the_button.js ，您将用来单击页面内的按钮(加载时)，其代码为:
```
var thing = $("a#roblox-confirm-btn");
thing.click();
```

注意:如果您想在 click_the_button.js 中使用 jQuery脚本，您也可以将其注入(inject)到它前面的选项卡中:

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

<小时/>

您可能会觉得有用的资源:

关于javascript - 我该怎么办呢？ (Chrome 扩展)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26321114/

javascript - 我该怎么办呢？ (Chrome 扩展)

上一篇：javascript - 如何将 Android 键盘设置为大写移动混合应用程序中的第一个字母

下一篇：javascript - 是否有相当于 css/sass 的 JavaScript