在 Chrome 扩展程序上运行 jQuery 的问题答案

【问题标题】：Issue on Running jQuery on Chrome Extension在 Chrome 扩展程序上运行 jQuery 的问题
【发布时间】：2014-02-13 19:00:15
【问题描述】：

我正在尝试开发一个简单的 cheome 扩展，但我无法设置 jQuery 来使用它：

这是我的文件结构：

--root
-- manifest.json
-- popup.html
-- 脚本.js
-- js
-- jQuery.js
-- 剪辑.js

这是我在manifest.json 中的代码

{
  "manifest_version": 2,

  "name": "My ext",
  "description": "This is a Development.",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "https://secure.flickr.com/"
  ],

  "content_scripts": [
    {
    "all_frames": false,
    "matches": ["<all_urls>"],
    "exclude_matches": [],
      "css": [
        "css/content/page.css"
      ],
      "js": [
        "js/jquery.js",
        "js/clip.js"
        ]
    }
  ]
}

和 popup.html 为：

<!doctype html>
<html>
  <head>
    <title>My app</title>
    <style>body {min-width: 357px;overflow-x: hidden;} </style>
    <!--
      - JavaScript and HTML must be in separate files: see our Content Security
      - Policy documentation[1] for details and explanation.
      -
      - [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html
     -->
    <script src="script.js"></script>
  </head>
  <body>
  <table style="width:300px">
<tr>
  <td id="fname">Jill</td>
  <td>Smith</td> 
  <td>50</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
  <td>94</td>
</tr>
</table>
  </body>
</html>

最后 script.js 为：

$( "#fname" ).on( "click", function() {
  alert( "HI");
});

我还尝试通过从 cdn 调用 jQuery 并在页面上声明文档就绪 JavaScript 来通过 <head> 运行 jQuery，但它也不起作用。

<!doctype html>
<html>
  <head>
    <title>My app</title>
    <style>body {min-width: 357px;overflow-x: hidden;} </style>
    <!--
      - JavaScript and HTML must be in separate files: see our Content Security
      - Policy documentation[1] for details and explanation.
      -
      - [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html
     -->
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
    $( document ).ready(function() {
     $( "#fname" ).on( "click", function() {
       alert( "HI");
      });
    });
    </script>
  </head>
  <body>
  <table style="width:300px">
<tr>
  <td id="fname">Jill</td>
  <td>Smith</td> 
  <td>50</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
  <td>94</td>
</tr>
</table>
  </body>
</html>

你能告诉我我做错了什么吗？

【问题讨论】：

标签： jquery google-chrome google-chrome-extension google-chrome-app

【解决方案1】：

您的设置似乎有几个问题。

您可能需要阅读内容脚本，因为它们似乎并没有按照您的想法执行。内容脚本是当您注入另一个站点的页面时。这不是你的页面。您实际上是将 jquery 文件插入到他们的页面中。
https://developer.chrome.com/extensions/content_scripts.html

内容脚本

内容脚本是在网页上下文中运行的 JavaScript 文件。通过使用标准的文档对象模型 (DOM)，他们可以读取浏览器访问的网页的详细信息，或进行更改

此外，如果不设置安全策略，您将无法运行内联 javascript： http://developer.chrome.com/extensions/contentSecurityPolicy.html#JSExecution

内联 JavaScript 不会被执行

内联 JavaScript 将不会被执行。此限制禁止内联块和内联事件处理程序（例如）。

您是否尝试过将 jQueryCDN 和您的 script.js 包含在 HTML 的头部？像这样：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="script.js"></script>

您的 manifest.json 还应包括以下内容：

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

【讨论】：

感谢 Esteban Felix，这很有帮助，但是，解决方案怎么样？如何将 jquery 添加到扩展中？
@user3162145 我更新了我的答案，你几乎得到了它！您只需将这两种方法结合起来！
是的，实际上在帖子的最后代码示例我将代码添加到但 jquery 无法正常工作！
我的意思是加载时可以，例如，如果我想在加载时提醒一条消息，它可以工作但不能处理这样的代码：$("#test").hover(function() { $( this ).addClass( "hover" ); }, function() { $( this ).removeClass( "hover" ); } );
与其使用 Google 的 jquery CDN，不如使用您已经包含在扩展中的 jquery.js 文件可能更容易。