通过Chrome扩展程序单击页面上的元素 [英] Clicking an element on a page through Chrome Extension

查看：2330
本文介绍了通过Chrome扩展程序单击页面上的元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想创建一个Chrome扩展程序，当您点击扩展程序上的按钮时，点击网页上的元素，但由于某种原因，无论我尝试什么。



我到目前为止



manifest.json 

  {
manifest_version：2，
 
name：这样的活动，
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] 
} 
] 
}

popup.html 

 <！doctype html& 
< html> 
< head> 
< title> activity< / title> 
< style> 
< / style> 
< script src =content_script.js>< / script> 
< / head> 
< body> 
< button id =clickactivity>点击< / 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）; 
}）;

我似乎得到的是这个错误

 未捕获TypeError：无法读取未定义的属性click

我已经花了几个小时的时间，但我不能让它工作。

解决方案

问题





引用官方文档：


内容脚本是在Web页面上下文中运行的JavaScript文件。通过使用标准文档对象模型（DOM），他们可以读取浏览器访问的网页的详细信息，或对其进行更改。


因此，在您的 popup.html 中使用 content_script.js / strong>，并且显然导致错误，因为您的 popup.html中没有任何按钮 class =planet-name


$ b



解决方案



为 popup.html 创建一个不同的脚本，并向该按钮添加一个监听器，因此当它被点击时，您可以注入 content_script.js



所以你必须：


  1. 编辑您的 manifest.json 删除content_scripts / li>
  2. 创建要添加到 popup.html 页面中的 popup.js

  3. 为 popup.js 中的按钮添加一个侦听器以注入 content_script.js 文件 chrome.tabs.executeScript（）

  4. 编辑 content_script.js 可直接点击页面上的按钮






  1. 首先，修改 manifest.json ，应该如下：

      {
    manifest_version：2，
     
    name：这样的活动，
    description：Wow，
    version：1.0，
    permissions：[tabs，< all_urls>]，
     
     browser_action：{
    default_icon：icon.png，
    default_popup：popup.html
    } 
    }

  2. 然后 content_script.js code> popup.html 并将其替换为 popup.js 脚本：

     <！doctype html> 
    < html> 
    < head>< title> activity< / title>< / head> 
    < body> 
    < button id =clickactivity>点击< / button> 
    < script src =popup.js>< / script> 
    < / body> 
    < / html>

  3. 创建 popup.js script ，并将监听器添加到将脚本注入当前页面的按钮：

      injectTheScript（）{
     chrome.tabs.query（{active：true，currentWindow：true}，function（tabs）{
     //查询活动标签页，只有一个标签
     //并注入脚本
     chrome.tabs.executeScript（tabs [0] .id，{file：content_script.js}）; 
    }）; 
    } 
     
     document.getElementById（'clickactivity'）。addEventListener（'click'，injectTheScript）;


  4. 现在，在 content_script.js ，您需要直接点击按钮，也不需要使用 DOMContentReady ，因为Chrome等待自己注入脚本。因此，您的新 content_script.js 将是：

      function clickPlanet ）{
     var planets = document.getElementsByClassName（planet-name），
     randomplanet = Math.floor（Math.random（）* planets.length），
     clickplanet = planets [randomplanet ]; 
     
     clickplanet.click（）; 
    } 
     
     clickPlanet（）;




工作示例



下载扩展程序的工作示例 点击

> 查看文档以了解我的示例中使用的方法，以完全了解他们的行为及其属性，以下是一些您可能会发现有用的链接：

I am trying to create a chrome extension that will click on an element on a webpage when you click a button on the extension, but for some reason it does nothing no matter what I try.

I've got this so far

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"  
  },  
     "content_scripts": [  
        {  
            "matches": [ "<all_urls>" ],  
           "js": ["content_script.js"]  
            }  
        ]  
}

popup.html

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

All I seem to be getting is this error

Uncaught TypeError: Cannot read property 'click' of undefined

I've been fiddling around with this for hours, but I can't get it to work. Any and all help is appreciated!

解决方案

Issue

Looks like you are misunderstanding the content script's behavior.

Quoting the official documentation:

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.

So, using your content_script.js in your popup.html doesn't make much sense, and obviously results in an error because you don't have any button with class="planet-name" in your popup.html page.

Solution

To do what you want, you need to create a different script for your popup.html, and add a listener to that button, so when it gets clicked, you can inject the content_script.js script into the page to click the "planet" element.

So you'll have to:

  1. Edit your manifest.json removing the "content_scripts" field
  2. Create a popup.js file to add in your popup.html page
  3. Add a listener for the button click inside popup.js to inject the content_script.js file using chrome.tabs.executeScript()
  4. Edit your content_script.js to make it click the button directly on the page

  1. First of all, edit your manifest.json, it should look like this:

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

  2. Then, remove your content_script.js from the popup.html and replace it with the popup.js script:

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

  3. Create the popup.js script and add the listener to the button that will inject the script into the current page:

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

  4. Now, in your content_script.js, you'll need to click the button directly, and also you will not need to use DOMContentReady, because Chrome waits to inject the script by itself. So, your new content_script.js will be:

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

    clickplanet.click();
}

clickPlanet();

Working example

Download a working example of the extension clicking here.

Documentation

I strongly suggest you to take a look at the documentation for the methods used in my example to fully understand their behavior and their properties, here are some links you may find useful:

这篇关于通过Chrome扩展程序单击页面上的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆