将 JQuery 加载到 Chrome 扩展程序中？答案

【问题标题】：Load JQuery into a Chrome extension?将 JQuery 加载到 Chrome 扩展程序中？
【发布时间】：2011-02-09 16:17:34
【问题描述】：

我正在尝试将 JQuery 加载到我的 Chrome 扩展程序中并使其等于一个对象，但我想知道我该怎么做？基本上我想要类似...

jQuery = loadLibraries("jquery-1.4.2.min.js");

我该怎么做？

编辑：我正在注入内容脚本。

【问题讨论】：

将 where - 注入内容脚本或后台页面？
我正在注入内容脚本
如果你在这里寻找如何将 jQuery 添加到弹出扩展中（就像我一样），请参阅这个问题：stackoverflow.com/questions/12035242/…

标签： jquery google-chrome-extension

【解决方案1】：

您可以将 jquery.js 放入扩展文件夹并将其包含在清单中：

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ],
  ...
}

您无需担心与父页面上的 jQuery 冲突，因为内容脚本是沙盒化的。

【讨论】：

但是如果我想要以下.._$ = function(selector,context){ return new jQuery.fn.init(selector,context||document); }; 并将侦听器附加到 _$ 对象怎么办？另外，您在那里输入的“匹配”参数是什么？
@Skizit 用 jQuery 随心所欲，就像在普通页面上一样。我不完全理解你在那里试图做什么。您可以在此处阅读内容脚本，这将回答您的清单问题：code.google.com/chrome/extensions/dev/content_scripts.html
我收到“无法从以下位置加载扩展：~/work/ba/chromeExtensions/buyamerica 无法为内容脚本加载 javascript 'jquery-2.1.3.min.js'。”但文件在那里
我遇到了同样的错误@EliaWeiss。你修好了吗？
我记不太清了，但是通过查看代码我可以看到我在 html 中做了<script type="text/javascript" src="jquery.js"></script>

【解决方案2】：

您可以通过 background_page HTML 中的脚本执行此操作：

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(null, { file: "jquery.min.js" }, function() {
    chrome.tabs.executeScript(null, { file: "content_script.js" });
  });
});

然后在 content_script.js 中随心所欲：

  $('#header').hide();

请注意，即使您注入的页面已经加载了 jQuery，您仍然会访问您自己的 jQuery 对象实例，它通过 DOM 访问页面。（文件）。

【讨论】：

什么是“background_page”和“content_script.js”？

【解决方案3】：

"content_scripts": [ {
    "matches": ["http://*/*"],
    "js": ["jquery.min.js"]
} ]

【讨论】：

【解决方案4】：

在同一线程中查看answer by jdc。

编辑：这个答案已经很老了，不再反映当前的做法。感谢您的提醒。

【讨论】：

不因为不同意而谴责，但如果能分享不赞成票的原因，这样每个人都可以学习/讨论，那就太好了。
嗨 Rodrigo，对不起，我通常会离开 cmets，但一定忘记了。单独的参考链接不应该是 Stack Overflow 上的答案，如果它们坏了，你的答案将毫无用处。我继续代表您进行了编辑并删除了我的反对票。希望这会有所帮助！
@jmort253，我很高兴你编辑了这篇文章，因为链接已经失效（它已经 6 岁了，所以不足为奇）。此外，此解决方案不完整或不正确。为了从外部源加载文件，开发人员需要设置内容安全策略。 "content_security_policy": "[POLICY STRING GOES HERE]" Per: developer.chrome.com/extensions/contentSecurityPolicy 恕我直言，最好的方法是使用 jdc 发布的方法。

【解决方案5】：

除了上面的答案，如果你想通过CDN添加jQuery，你需要在manifest.json文件中添加以下内容

"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"

【讨论】：