Question

我查看了几篇关于在开发chrome扩展时添加jquery的帖子 - 但大多数都是旧的并且使用了不推荐使用的清单选项（例如＆＃34; background_page＆＃34;）。我已经添加了＆＃34; content_scripts＆＃34;会员。我仍然得到＆＃34; 未捕获的ReferenceError：$未定义＆＃34;。

采用最简单的方案 - 在Chrome的扩展示例的基础上添加jquery - 我们会有类似的内容：

清单：

{
  "manifest_version": 2,

  "name": "myExt",
  "description": "myExt Desc",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },

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

myScript.js：

//var myObj = {
//    execute: function () {
//        $("#btn1").click(function () {
//            alert('I was clicked indeeeed!');
//        });
//    }
//}

//document.addEventListener('DOMContentLoaded', function () {
//    myObj.execute();
//});

$("#btn1").click(function () { alert('iae'); });

popup.html：

＆＃13;

    <html>
    <head>
    
        <title>Getting Started Extension's Popup</title>
        <style>
            body
            {
                min-width: 357px;
                overflow-x: hidden;
            }
            img
            {
                margin: 5px;
                border: 2px solid black;
                vertical-align: middle;
                width: 75px;
                height: 75px;
            }
        </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="myScript.js"></script>
        
    </head>
    <body>
        <table>
            <tr>
                <td>
                    Hey 
                </td>
                <td>
                    There
                </td>
            </tr>
            <tr>
                <td>
                    This is an extension!
                </td>
                <td>
                    <input type="button" id="btn1" value="Click Me" />
                </td>
            </tr>
        </table>
    </body>
    </html>

＆＃13;

我将所有文件放在同一目录中（popup.html，icon.png，manifest.json，myScript.js，jquery.js）。 html和脚本中都没有任何错误。我点击[Inspect popup]时遇到的唯一错误是： 未捕获的ReferenceError：$未定义

我错过了什么？！？

Answer 1

事实上，你没有为你的弹出窗口包含jQuery。

清单中定义的内容脚本仅适用于您在清单中指定的页面。在您的情况下，http和https计划中的任何页面 - 但弹出窗口都有有效的网址chrome-extension://yourextensionsidhere/popup.html，因此不会注入。

从概念上讲，内容脚本适用于您无法控制的页面。因此，即使您可以让Chrome注入脚本，由于isolated context原则，它仍然不适用于页面中的代码。

由于您可以完全控制扩展程序的页面，因此您需要手动添加带有<script>标记的脚本。

<script src="jQuery.js"></script>
<script src="myScript.js"></script>

阅读Architecture Overview，以便更好地了解内容脚本的功能以及它们与您分机的页面的关系。

顺便说一句，您仍然需要将代码包装在$(document).ready()中，因为您的代码将在#btn位于DOM之前执行。

Answer 2

听起来你说你正在加载的页面（+内容脚本）的dev工具控制台没有错误，但弹出窗口的dev工具控制台（从你的扩展的“Inspect Popup”激活）显示您提到的错误。

我猜你的popup.html在某些内联脚本中使用$，或者你的jquery.js在某种程度上是空的。如果是前者，请确保在使用之前加载<script>标记以加载jquery。您的内容脚本应该已经可以访问它了，就像您在清单中所做的那样，但我不相信它会使弹出窗口可用。

在开发chrome扩展时添加jquery

2 个答案: