我该怎么办？（Chrome 扩展）答案

【问题标题】：How would I go about this? (Chrome extension)我该怎么办？（Chrome 扩展）
【发布时间】：2014-12-06 21:41:29
【问题描述】：

我是创建扩展程序的新手，我正在努力让它们变得更舒服。基本上，我正在尝试创建一个执行以下操作的简单扩展：

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

我不确定如何让扩展程序在新窗口中单击按钮。我该如何处理？这就是我现在拥有的：

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

【问题讨论】：

请编辑您的问题标题，使其更具描述性（并且无需在其中复制标签）

标签： javascript jquery html google-chrome google-chrome-extension

【解决方案1】：

注意：自 2021 年 1 月起，将Manifest V3 与chrome.scripting.executeScript() 和scripting 权限一起使用，并将"*://*/*" 移动到host_permissions，而不是将已弃用的chrome.tabs.executeScript() 与@ 一起使用987654330@权限。

首先，你在使用</input>结束标签时犯了一个错误：<input>标签不需要关闭！所以把你的popup.html改成这样：

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

现在，进入真正的问题：

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

将tabs 权限添加到您的manifest.json：

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

从清单中删除popup.js 内容脚本，这没用！你不需要它。

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

警告：当我说 remove 时，我的意思是真正从您的manifest.json 中删除这些行，不要使用 cmets (//)，也不要复制和粘贴我的代码覆盖了你的代码，只需删除那四行。

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

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

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

注意：如果你想在 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"});
    }
});

您可能会发现有用的资源：

【讨论】：

警告词：.json 文件中的// comments 是语法错误！
是的，我知道了，谢谢，这些 cmets 只是为了突出显示要从 messages.json 文件中删除的代码部分
人们倾向于只复制代码。在代码块外解释一下

【解决方案2】：

您需要标签权限。我以前也有同样的问题。答案就在这里：

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

【讨论】：