通过 Chrome 扩展点击页面上的元素 [英] Clicking an element on a page through Chrome Extension
问题描述
我正在尝试创建一个 chrome 扩展程序，当您单击扩展程序上的按钮时，该扩展程序将单击网页上的元素，但由于某种原因，无论我尝试什么，它都无济于事.
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.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
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!
推荐答案
您似乎误解了内容脚本的行为.
Looks like you are misunderstanding the content script's behavior.
引用官方文档:
内容脚本是在网页上下文中运行的 JavaScript 文件.通过使用标准的文档对象模型 (DOM)，他们可以读取浏览器访问的网页的详细信息，或对其进行更改.
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".
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.
为了做你想做的事，你需要为你的 popup.html 创建一个不同的脚本，并为那个按钮添加一个监听器，这样当它被点击时，你可以注入 content_script.js 脚本进入页面点击星球"；元素.
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.
所以你必须:
- 编辑您的
manifest.json，删除"content_scripts"字段. - 创建一个
popup.js文件以添加到您的popup.html页面中. - 为
popup.js内的按钮单击添加侦听器，以使用chrome.tabs.executeScript()(Manifest V2) 或chrome.scripting.executeScript()(Manifest V3). - 编辑您的
content_script.js以使其直接点击页面上的按钮.
- Edit your
manifest.jsonremoving the"content_scripts"field. - Create a
popup.jsfile to add in yourpopup.htmlpage. - Add a listener for the button click inside
popup.jsto inject thecontent_script.jsfile usingchrome.tabs.executeScript()(Manifest V2) orchrome.scripting.executeScript()(Manifest V3). - Edit your
content_script.jsto make it click the button directly on the page.
Manifest V2 解决方案(已弃用！)
注意:自 2021 年 1 月起，您应该使用新的 清单 V3.如果您使用的是 Manifest V3，请参阅下面的最新答案.
Manifest V2 Solution (deprecated!)
NOTE: since January 2021, you should use the new Manifest V3. See below for an up-to-date answer if you are using 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 脚本:
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>
创建 popup.js 脚本并将监听器添加到将脚本注入当前页面的按钮:
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);
现在，在你的content_script.js中，你需要直接点击按钮，而且你也不需要使用DOMContentReady，因为Chrome等待自己注入脚本.因此，您的新 content_script.js 将是:
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();
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 脚本:
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>
创建 popup.js 脚本并将监听器添加到将脚本注入当前页面的按钮:
Create the popup.js script and add the listener to the button that will inject the script into the current page:
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等待自己注入脚本.因此，您的新 content_script.js 将是:
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:
const planets = document.getElementsByClassName("planet-name")
const elementToClick = planets[Math.floor(Math.random() * planets.length)]
elementToClick.click()
这篇关于通过 Chrome 扩展点击页面上的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
