Question

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

这是我的文件结构：

- 根
- manifest.json
- popup.html
- script.js
- js
- jQuery.js
- clip.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>

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

Answer 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'"

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

1 个答案: