Javascript JQuery 3.1在chrome内容脚本中使用时无法获取DOM

虽然我了解内容脚本和孤立世界的概念，但我对开发chrome扩展还是新手。我就是不能理解实际问题

我知道StackOverflow for Jquery中有很多帖子在内容脚本（Chrome扩展）中不起作用。大多数人似乎没有说明原因

我的代码如下

Manifest.json

{
  "manifest_version": 2,

  "name": "TestExtension",
  "description": "Chrome Extension",
  "version": "1.0",
  "browser_action": {
    "default_icon": "img/icon.png",
    "default_popup": "popup.html",
    "default_title": "MyExtension"
  },
  "content_scripts":[{
    "js":["js/lib/jquery-3.1.1.min.js","js/app/content.js"],
    "matches":["<all_urls>","http://*/*","https://*/*"],
    "run_at":"document_start"
  }],
  "content_security_policy": "script-src https://*.google.com 'unsafe-eval'; object-src 'self'",
  "minimum_chrome_version":"22",
  "web_accessible_resources" : [
    "js/lib/jquery-3.1.1.min.js"
  ],
  "permissions": [
    "activeTab",
    "http://*/*",
    "https://*/*",
    "unlimitedStorage",
    "contextMenus",
    "cookies",
    "tabs",
    "notifications",
    "identity",
    "*://*.google.com/*"
  ],
}

输出：

内容脚本被注入页面

Jquery已加载。我使用了noConflict（）来确保我没有遇到任何内部脚本冲突

Vanilla JS获取DOM元素

但是Jquery失败，无法获取任何内容。没有显示错误消息

问题：

我知道“chrome.runtime.sendMessage”和“chrome.runtime.onMessage”及其在消息传递过程中的必要性。但是我必须在这个onMessage中包装逻辑吗

此外，我还看到一些使用脚本注入的解决方案（chrome.tabs.executeScript），但这是唯一的解决方案。我觉得我在manifest.json中遗漏了什么。如果我遗漏了什么，有人能指出吗

---

提前谢谢

我尝试将run_at更改为document end、document start和document idle，但没有任何效果。页面会自动构造，因此元素在触发document_end很久之后出现。你可以在

gmonkey

对象中使用隐藏的gmail API，也可以在

窗口上收听
消息
事件：网站内部会发出类似
s.ready
的信息。或者使用通用方法：MutationObserver，在询问之前，请参阅：
HTMLCollection[0]
，控制台中的意思是在打印对象时，它有0个元素，但是当您扩展它时，live HTMLCollection会被现有元素填充。jQuery
ready
会等待浏览器触发的DOMContentLoaded事件，因此它完全没有用处，因为它与document\u end或document\u idle相同，后者是内容脚本的默认注入模式。我的意思是网站在那一刻之后开始更新页面。另外，你希望
ready
如何知道动态更新何时完成？这是绝对不可能的，因为该站点可能会继续使用JavaScript+ajax进行自我更新，而不会停止。这就是我把这个话题联系起来的原因。
console.log('I am Content Script');

var jq = $.noConflict();

if (typeof jq == 'undefined') {
    console.log('JQuery Not Loaded');   
}else{
    console.log('JQuery Loaded');   
}

jq(document).ready(function(){
    console.log(document.getElementsByClassName("editable"));
    console.log(jq("body").className);
});