javascript - 通过 Chrome 扩展程序单击页面上的元素

coder 2024-05-07 原文

我正在尝试创建一个 chrome 扩展程序，当您单击扩展程序上的按钮时，它会单击网页上的元素，但出于某种原因，无论我尝试什么，它都没有任何反应。

我已经知道了

list .json

{  
  "manifest_version": 2,  

  "name": "Such Activity",  
  "description": "Wow",  
  "version": "1.0",    
  "permissions": [  
        "tabs", "<all_urls>"  
    ],  

  "browser_action": {  
    "default_icon": "icon.png",  
    "default_popup": "popup.html"  
  },  
     "content_scripts": [  
        {  
            "matches": [ "<all_urls>" ],  
           "js": ["content_script.js"]  
            }  
        ]  
}

弹出窗口

<!doctype html>  
<html>  
  <head>  
    <title>activity</title>  
    <style>  
    </style>  
    <script src="content_script.js"></script>  
  </head>  
  <body>  
  <button id="clickactivity">click</button>  
  </body>  
</html>

content_script.js

function ClickPlanet()
    {
        var planets = document.getElementsByClassName("planet-name");
        var randomplanet = Math.floor(Math.random() * planets.length);
        var clickplanet = planets[randomplanet];
        clickplanet.click();
        setInterval(function () { ClickPlanet() }, 2000);
    }

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('clickactivity').addEventListener('click', ClickPlanet);
});

我似乎得到的只是这个错误

Uncaught TypeError: Cannot read property 'click' of undefined

几个小时以来我一直在摆弄这个，但我无法让它工作。感谢您提供任何帮助!

最佳答案

看来您误解了内容脚本的行为。

引用官方文档:

Content scripts are JavaScript files that run in the context of web pages. By using the standard Document Object Model (DOM), they can read details of the web pages the browser visits, or make changes to them.

因此，在 popup.html 中使用 content_script.js 没有多大意义，而且显然会导致错误，因为您没有任何按钮在您的 popup.html 页面中使用 class="planet-name"。

为了做你想做的事，你需要为你的 popup.html 创建一个不同的脚本，并为那个按钮添加一个监听器，所以当它被点击时，你可以注入(inject) content_script.js 脚本进入页面以点击“planet”元素。

所以你必须:

编辑您的 manifest.json 删除 “content_scripts” 字段。
创建一个 popup.js 文件以添加到您的 popup.html 页面中。
为 popup.js 中的按钮点击添加一个监听器，以使用 chrome.tabs.executeScript() 注入(inject) content_script.js 文件( list V2)或 chrome.scripting.executeScript() ( list V3)。
编辑您的 content_script.js 使其直接点击页面上的按钮。

list V2 解决方案(已弃用!)

注意:自 2021 年 1 月起，您应该使用新的 Manifest V3 .如果您使用的是 Manifest V3，请参阅下面的最新答案。

首先，编辑您的 manifest.json，它应该如下所示:

{  
    "manifest_version": 2,  

    "name": "Such Activity",  
    "description": "Wow",  
    "version": "1.0",    
    "permissions": ["tabs", "<all_urls>"],  

    "browser_action": {  
        "default_icon": "icon.png",  
        "default_popup": "popup.html"  
    }
}

然后，从 popup.html 中删除您的 content_script.js 并将其替换为 popup.js 脚本:

<!doctype html>  
<html>  
    <head><title>activity</title></head>  
<body>  
    <button id="clickactivity">click</button>  
    <script src="popup.js"></script> 
</body>
</html>

创建 popup.js 脚本并将监听器添加到将脚本注入(inject)当前页面的按钮:

function injectTheScript() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        // query the active tab, which will be only one tab
        //and inject the script in it
        chrome.tabs.executeScript(tabs[0].id, {file: "content_script.js"});
    });
}

document.getElementById('clickactivity').addEventListener('click', injectTheScript);

现在，在您的 content_script.js 中，您需要直接点击按钮，而且您不需要使用 DOMContentReady，因为 Chrome等待自己注入(inject)脚本。因此，您的新 content_script.js 将是:

function clickPlanet() {
    var planets = document.getElementsByClassName("planet-name"),
        randomplanet = Math.floor(Math.random() * planets.length),
        clickplanet = planets[randomplanet];

    clickplanet.click();
}

clickPlanet();

Manifest V3 解决方案

编辑您的 manifest.json，它应该如下所示:

{
    "manifest_version": 3,

    "name": "Such Activity",
    "description": "Wow",
    "version": "1.0",
    "permissions": ["scripting"],
    "host_permissions": ["<all_urls>"],

    "action": {
        "default_title": "Click Me",
        "default_popup": "popup.html"
    }
}

然后，从 popup.html 中删除您的 content_script.js 并将其替换为 popup.js 脚本:

<!doctype html>  
<html>  
    <head><title>activity</title></head>  
<body>  
    <button id="clickactivity">click</button>  
    <script src="popup.js"></script> 
</body>
</html>

创建 popup.js 脚本并将监听器添加到将脚本注入(inject)当前页面的按钮:

function injectTheScript() {
    // Wuery the active tab, which will be only one tab and inject the script in it.
    chrome.tabs.query({active: true, currentWindow: true}, tabs => {
        chrome.scripting.executeScript({target: {tabId: tabs[0].id}, files: ['content_script.js']})
    })
}

document.getElementById('clickactivity').addEventListener('click', injectTheScript)

现在，在您的 content_script.js 中，您需要直接点击按钮，而且您不需要使用 DOMContentReady，因为 Chrome等待自己注入(inject)脚本。因此，您的新 content_script.js 将是:
```
const planets = document.getElementsByClassName("planet-name")
const elementToClick = planets[Math.floor(Math.random() * planets.length)]
elementToClick.click()
```

关于javascript - 通过 Chrome 扩展程序单击页面上的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26390322/

javascript Chrome code 34 script google-chrome google-chrome-extension click

有关javascript - 通过 Chrome 扩展程序单击页面上的元素的更多相关文章

ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2
我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0
ruby - 通过 rvm 升级 rubygems 的问题 - 2
尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub
ruby - 如何指定 Rack 处理程序 - 2
Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack
ruby - 在 Ruby 中编写命令行实用程序 - 2
我想用ruby编写一个小的命令行实用程序并将其作为gem分发。我知道安装后，Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用，我需要在我的gemspec中指定什么。最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序
ruby - 使用 C 扩展开发 rubygem 时，如何使用 Rspec 在本地进行测试？ - 2
我正在编写一个包含C扩展的gem。通常当我写一个gem时，我会遵循TDD的过程，我会写一个失败的规范，然后处理代码直到它通过，等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb，如何运行我的规范并仍然加载我的C扩展？当我更改C代码时，我需要采取哪些步骤来重新编译代码？这可能是个愚蠢的问题，但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时，我确实得到了一个Makefile(在整个项目的根目录中)，然后当
ruby-on-rails - Rails 应用程序之间的通信 - 2
我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此
ruby - 无法运行 Rails 2.x 应用程序 - 2
我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r
ruby - 通过 erb 模板输出 ruby 数组 - 2
我正在使用puppet为ruby程序提供一组常量。我需要提供一组主机名，我的程序将对其进行迭代。在我之前使用的bash脚本中，我只是将它作为一个puppet变量hosts=>"host1,host2"我将其提供给bash脚本作为HOSTS=显然这对ruby不太适用——我需要它的格式hosts=["host1","host2"]自从phosts和putsmy_array.inspect提供输出["host1","host2"]我希望使用其中之一。不幸的是，我终其一生都无法弄清楚如何让它发挥作用。我尝试了以下各项:我发现某处他们指出我需要在函数调用前放置“function_”……这
ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗？ - 2
刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr
ruby - 通过 ruby 进程共享变量 - 2
我正在编写一个gem，我必须在其中fork两个启动两个webrick服务器的进程。我想通过基类的类方法启动这个服务器，因为应该只有这两个服务器在运行，而不是多个。在运行时，我想调用这两个服务器上的一些方法来更改变量。我的问题是，我无法通过基类的类方法访问fork的实例变量。此外，我不能在我的基类中使用线程，因为在幕后我正在使用另一个不是线程安全的库。所以我必须将每个服务器派生到它自己的进程。我用类变量试过了，比如@@server。但是当我试图通过基类访问这个变量时，它是nil。我读到在Ruby中不可能在分支之间共享类变量，对吗？那么，还有其他解决办法吗？我考虑过使用单例，但我不确定这是

javascript - 通过 Chrome 扩展程序单击页面上的元素

list V2 解决方案(已弃用!)

Manifest V3 解决方案

有关javascript - 通过 Chrome 扩展程序单击页面上的元素的更多相关文章

随机推荐