Question

我有一个Chrome自定义插件，它有一个像

这样的按钮

<body>
<div class="wrapper">  
 <button  class="btn" id="loader"> Find</button>
</div>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="custom.js"></script>
</body>

在custom.js中我有

 $(function(){
   $( "#loader" ).on( "click", function( e ) {
      e.preventDefault();
      $("#res a").each(function(){
        console.log("You Got It!");
      });
   });
 });

我想要做的是在页面中找到<a> div中的所有#res，但看起来查询只是搜索附加组件！你能告诉我怎么做吗？

更新：Manifest JSON

{
    "name": "Data",
    "version": "0.1",
    "manifest_version": 2,
     "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html",
        "default_title": "Get Data"
    }
}

Answer 1

正如之前的回答所示，首先您需要访问页面标签才能执行此操作。（我相信"permissions": ["activeTab"]会为你完成这项工作。）

其次，您的JS代码在弹出窗口上运行而不是在当前选项卡窗口上运行。因此，您正在经历的行为是预期的。您的文档是弹出文档的文档。它是你加载jquery的地方，你的点击处理程序已经注册，你的dom查询就会运行。我理解你想要的是，当弹出窗口中的事件发生时，在活动选项卡的文档中运行一些查询。

我相信在你的情况下你需要使用程序化的JS注入（阅读here关于此。）为了解释自己，我想你想在触发弹出窗口上的事件时在活动选项卡的窗口中注入一些JS代码。你可以很容易地使用chrome.tabs.executeScript来做到这一点。（参见方法here的完整文档）。

例如，尝试将代码更改为

$(function(){
    $( "#loader" ).on( "click", function( e ) {
        e.preventDefault();
        chrome.tabs.executeScript({
            code: 'console.log(document.getElementById("res"))'
        });
    });
});

看看会发生什么。我希望有所帮助！

Answer 2

由于您的扩展程序没有任何权限，因此这可能是个问题。尝试将其设置为

{
"name": "Data",
"version": "0.1",
"manifest_version": 2,
 "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html",
    "default_title": "Get Data"
},
"permissions": [
    "activeTab"]
}

Chrome自定义插件在浏览器当前页面中选择元素的问题

2 个答案: