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

Question

我正在尝试将jQuery加载到我的Chrome扩展程序中，并使它等于一个对象，但我想知道该如何操作？基本上，我想要像这样的东西...

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

我该如何做到这一点？

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

- Skizit

---

将注入代码放在内容脚本还是后台页面？ - serg

我正在向内容脚本注入代码。 - Skizit

如果你在这里寻找如何将jQuery添加到弹出式扩展程序中（就像我一样），请参考这个问题：https://dev59.com/8mct5IYBdhLWcg3whtqh - Pro Q

Answer 1

您可以将jquery.js放入扩展文件夹中，并在清单中引用它：

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

内容脚本是沙盒化的，因此您不必担心与父页面上的jQuery发生冲突。

- serg

---

但是如果我想要以下内容怎么办.. _$ = function(selector,context){ return new jQuery.fn.init(selector,context||document); }; 并且将监听器附加到 _$ 对象上呢？另外，您在那里提供的“matches”参数是做什么用的？ - Skizit

@Skizit，你可以像在普通页面上一样使用jQuery做任何你想做的事情。我不是完全理解你在尝试做什么。你可以在这里阅读有关内容脚本的信息，这将回答你的清单问题：http://code.google.com/chrome/extensions/dev/content_scripts.html - serg

我收到了“无法从：~/work/ba/chromeExtensions/buyamerica加载扩展 无法为内容脚本加载javascript 'jquery-2.1.3.min.js'。”但是该文件确实存在。 - Elia Weiss

我也遇到了和 @EliaWeiss 相同的错误。你解决了吗？ - Do Minh Phong

我不记得具体的细节，但从代码中可以看到我在HTML中使用了<script type="text/javascript" src="jquery.js"></script>。 - Elia Weiss

这是我的清单： `{ "manifest_version": 2, "name": "BuyAmerica", "version": "1.0", "background": { "scripts": ["jquery.js","background.js"] }, "content_scripts": [{ "matches": ["<all_urls>"], "js": ["jquery.js","content.js"] }], "page_action": { "default_title": "BuyAmerica", "default_popup": "popup.html" }, "permissions": [ "activeTab", "storage" ]}` - Elia Weiss

Answer 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，您仍然会访问通过DOM（document）访问页面的jQuery对象的自己的实例。

- jdc

---

“background_page” 和 “content_script.js” 是什么？ - Elia Weiss

Answer 3

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

- Ankush Ganatra

Answer 4

请在此同一线程中查看jdc的答案。

编辑：该答案已经相当老旧，不再反映当前的惯例。感谢您的提醒。

- Please treat your mods well.

---

不会因为不同意而谴责你，但是如果能分享一下给这个帖子点踩的原因，大家就可以学习和讨论了。 - Please treat your mods well.

嗨，罗德里戈，抱歉，我通常会留下评论，但可能忘了。在堆栈溢出上，仅使用参考链接作为答案是不可行的，因为如果链接失效，您的答案将变得无用。我代表您进行了编辑并取消了我的负评。希望对您有所帮助！ - jamesmortensen

@jmort253，很高兴你编辑了这篇文章，因为链接已经失效（6年过去了，所以也不奇怪）。此外，这个解决方案要么不完整，要么就是错误的。为了从外部源加载文件，开发者需要设置内容安全策略。"content_security_policy": "[策略字符串放在这里]"参考：https://developer.chrome.com/extensions/contentSecurityPolicy在我看来，最好的方法是使用jdc发布的方法。 - richb01

Answer 5

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

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

- Life Of Pai