Chrome 扩展：如何从活动标签页中获取元素答案

【问题标题】：Chrome Extension: How to get Element from active Tab PageChrome 扩展：如何从活动标签页中获取元素
【发布时间】：2017-03-15 07:41:18
【问题描述】：

我正在尝试制作 chrome 扩展。我的 popup.html 上有一个按钮，可以单击活动选项卡中的元素。从理论上讲，我认为我了解如何做到这一点，但现在我被困在这里：

网站上的 HTML：

<td class="confirmButtons">
<form action="modcp.php" method="post">
<input class="formAction" type="hidden" name="" value="">
<ul>
<li class="button"><a href="javascript:void(0);" class="formAction" rel="confirm" tabindex="2"><strong>Ja</strong></a></li>
</ul>

<ul class="buttonGroup">
<li class="first"></li>
<li class="button"><a href="javascript:void(0);" class="formAction" rel="cancel" tabindex="2"><strong>Nein</strong></a></li><a href="javascript:void(0);" class="formAction" rel="cancel" tabindex="2">
<li class="last"></li>
</a></ul></form></td>

我在 content_script.js 中使用的代码：

function clickJa() {
    console.log("clickJA");
    var confirmButton = document.getElementsByClassName("confirmButtons"); 
    console.log(confirmButton);        
}

现在，我的问题：当我将代码粘贴到控制台中时，它会返回一个包含 1 个元素的数组 - 这很好。当我在扩展 ut 中按下我的按钮时，返回一个包含 0 个元素的数组 - 这不好，我不知道有什么问题......你有什么想法吗？

问候和感谢每一个想法和回答石灰

【问题讨论】：

这意味着在您运行内容脚本时该站点还没有按钮。根据目标和注入方式，有多种解决方案，例如计时器、MutationObserver、事件。
请edit 成为主题的问题：包括一个重复问题的minimal reproducible example。对于 Chrome 扩展程序或 Firefox WebExtensions，这几乎总是意味着包含您的 manifest.json 和一些背景、内容和/或弹出脚本/HTML。寻求调试帮助的问题（“为什么这段代码没有按我想要的方式工作？”）必须包括：（1）期望的行为，（2）特定的问题或错误以及（3）重现它所需的最短代码在问题本身中。另请参阅：What topics can I ask about here? 和 How to Ask。
wOxxOm 所说的是最有可能的问题。但是，如果没有足够的代码来复制问题（以及网站的 URL，因此我们知道在哪里进行测试），我们无法确定。

标签： javascript google-chrome-extension

【解决方案1】：

正如 cmets 中所说，我们需要更多细节。但是，让我们尝试理解：

您的弹出页面中有一个按钮
当您在按钮页面中单击此按钮时，您希望在活动页面中单击一个元素。

你从哪里调用函数：

clickJa()

从弹出页面？

如果它来自弹出页面，则该函数在弹出页面内执行，因此您将没有您的元素。（因为它不在弹出页面中，而是在活动选项卡上）

如果您的目标只是点击弹出页面中的某个元素，那么可能最简单的做法是：

chrome.tabs.executeScript( {
    code: "document.getElementsByClassName(\"confirmButtons\").click();"
}, function() {
      console.log("Element clicked !");
});

（虽然没有测试）

有关脚本执行的更多信息： https://developer.chrome.com/extensions/tabs#method-executeScript

【讨论】：