Javascript 关于通过Chrome自定义加载项在浏览器当前页面中选择元素的问题_Javascript_Jquery_Google Chrome_Google Chrome Extension_Google Chrome Devtools

Javascript 关于通过Chrome自定义加载项在浏览器当前页面中选择元素的问题

javascript jquery google-chrome google-chrome-extension google-chrome-devtools

Javascript 关于通过Chrome自定义加载项在浏览器当前页面中选择元素的问题,javascript,jquery,google-chrome,google-chrome-extension,google-chrome-devtools,Javascript,Jquery,Google Chrome,Google Chrome Extension,Google Chrome Devtools,我有一个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="c

我有一个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>

我想做的是在页面中的

#res

div中查找所有

，但看起来查询只是在搜索加载项主体！你能告诉我怎么做吗

更新：清单JSON

由于您的扩展没有任何权限，这可能就是问题所在。尝试将其设置为

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

正如前面的答案所建议的，首先，您需要访问页面的选项卡才能做到这一点。（我相信

“权限”：[“activeTab”]

会帮你完成这项工作。）

其次，JS代码运行在弹出窗口上，而不是当前选项卡窗口上。因此，您正在经历的行为是预期的。您的文档是弹出窗口的文档。它是加载jquery、注册单击处理程序和运行dom查询的地方。据我所知，您希望在弹出窗口中发生事件时，在活动选项卡的文档中运行一些查询

我相信在您的情况下，您需要使用编程JS注入（阅读本文）为了解释我自己，我认为当弹出窗口上的事件被触发时，您需要在活动选项卡的窗口中注入一些JS代码。使用

chrome.tabs.executeScript

可以很容易地做到这一点。（请参阅该方法的完整文档）

例如，尝试一下将代码更改为

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

看看会发生什么。我希望这有点帮助

你能发布manifest.json吗？可能有一些线索。谢谢@MattiPrice，我刚刚用

Manifest

jsontanks更新了帖子。Matti我更新了清单，但看起来仍然没有访问当前页面的元素？我只是通过添加

$（'body'）.css（'background'，'red'）再次测试这一点并且它只是更改了加载项的弹出元素的背景颜色，而不是当前页面。那么，当前未发生的预期行为是什么？谢谢Faiakism，我尝试了您的解决方案，但在运行tabs时遇到此错误未选中runtime.lastError。executeScript:无法访问弹出窗口上的chrome://URL
控制台当您在chrome://extensions/tab或其他什么？默认情况下，您无法访问chrome://url页面。当您要查询的页面位于活动选项卡上时，也可以查看该选项卡的控制台。
{
"name": "Data",
"version": "0.1",
"manifest_version": 2,
 "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html",
    "default_title": "Get Data"
},
"permissions": [
    "activeTab"]
}

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