Question

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

到目前为止我已经知道了

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

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

Uncaught TypeError: Cannot read property 'click' of undefined

我已经花了几个小时摆弄这个，但我无法让它工作。任何和所有的帮助表示赞赏！

Answer 1

问题

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

引用官方文件：

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

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

解决方案

要执行您想要的操作，您需要为popup.html创建不同的脚本，并为该按钮添加一个侦听器，因此当单击它时，您可以将content_script.js脚本注入页面单击“planet”元素。

所以你必须：

修改manifest.json删除"content_scripts"字段
在popup.js页面

popup.html

为popup.js内的按钮点击添加一个监听器，使用content_script.js

chrome.tabs.executeScript()

修改您的content_script.js，使其直接点击页面上的按钮

首先，修改您的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_script.js中删除popup.html并将其替换为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脚本并将侦听器添加到将脚本注入当前页面的按钮中：

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会等待自己注入脚本。因此，您的新content_script.js将是：

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

    clickplanet.click();
}

clickPlanet();

工作示例

从HERE下载扩展程序的工作示例。

文档

我强烈建议您查看文档，了解我的示例中使用的方法，以充分了解其行为及其属性，以下是您可能会觉得有用的链接：

Chrome extension content scripts
chrome.tabs API
- chrome.tabs.query方法
- chrome.tabs.executeScript方法

通过Chrome扩展程序点击页面上的元素

1 个答案:

问题

解决方案

工作示例

文档