个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 07:54:13 24 4
gpt4 key购买 nike

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

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

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

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)到页面中。 这是一个快速解决方案:

  1. 添加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 中删除这些行。 ，不要使用注释 ( // )，也不要将我的代码复制并粘贴到您的代码上，只需删除那四行。

  2. 现在，在您的 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 ^^
        }
    });

  3. 这将创建一个新选项卡并在其中注入(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/

24 4 0
文章推荐： javascript - 是否有相当于 css/sass 的 JavaScript
文章推荐： c++ - 英尺到米的单位换算
文章推荐： javascript - 如何将 Android 键盘设置为大写移动混合应用程序中的第一个字母
文章推荐： c++ - 使用 std::freopen 重定向 stderr C++
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com