分享程序员开发的那些事...
更新时间：2023-12-03 08:05:28
您似乎误解了内容脚本的行为.
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 以使其直接点击页面上的按钮.manifest.json removing the "content_scripts" field.popup.js file to add in your popup.html page.popup.js to inject the content_script.js file using chrome.tabs.executeScript() (Manifest V2) or chrome.scripting.executeScript() (Manifest V3).content_script.js to make it click the button directly on the page.注意:自 2021 年 1 月起，您应该使用新的 清单 V3.如果您使用的是 Manifest V3，请参阅下面的最新答案.
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.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()