'$' 在 Chrome 扩展弹出窗口中未定义答案

【问题标题】：'$' is undefined in Chrome extension popup'$' 在 Chrome 扩展弹出窗口中未定义
【发布时间】：2017-01-29 02:17:47
【问题描述】：

我正在制作我的第一个 Chrome 扩展程序，但在弹出窗口中使用 jQuery 时遇到了问题。当我检查弹出窗口时，我得到一个错误错误：Uncaught ReferenceError: $ is not defined 尽管我在manifest.json 中包含了我的本地 jQuery 副本。我可以在 popup.js 中使用 console.log，但是 jQuery 库显然没有加载。我搜索了相关问题，但无法确定问题 - 请告知

manifest.json

{
    "manifest_version":2,
    "name":"extension",
    "version":"0.1",
    "content_scripts":[
        {
            "matches": [
                "<all_urls>"
            ],
            "js":["jquery-3.1.1.min.js","content.js","popup.js"]
        }],
    "browser_action":{
                "default_icon":"icon.png",
                "default_popup":"popup.html"
            }
        ,
    "background":{
        "scripts":["background.js"]
    }       

}

popup.html

<!DOCTYPE html>
<script src="popup.js"></script>
<div>
Search RT for Movie: <input type="text" value=""><input type="submit" id="bleh">
</div>

popup.js

$(document).ready(function(){
    function d(c){
        console.log(c)
    }
    d('hi')
    $('#bleh').click(function(){d('bi')})
})

【问题讨论】：

您需要在页面中实际加载 jQuery。
我尝试将 jQuery 加载到 popup.js 中，但得到了同样的错误
您在弹出窗口和内容脚本中都加载了 popup.js。这通常是一个坏主意™。脚本，除非专门写在这两种情况下，否则只能在其中一种情况下使用。
请不要将jQuery加载到每个页面（content_scripts和matches）除非你需要到。 jQuery 是 85kiB 的最小化代码。对于每一页来说，这是一个很大的负担。我们这些打开了 100 个标签的人呢？虽然您可能真的需要加载 jQuery，但您这样做更有可能是为了方便在您自己的代码中保存几个/几百个字符，而不是使用 vanilla JavaScript。如果是这种情况（我们无法知道），从用户的角度来看，这样做是一个非常糟糕的权衡。

标签： javascript jquery google-chrome google-chrome-extension popup

【解决方案1】：

您的内容脚本与弹出窗口的上下文不同。您通过 manifest.json 中的 content_scripts 条目加载的内容不会影响弹出窗口的上下文。

您需要将 jQuery 加载到弹出窗口中。您可以通过为其添加<script> 标签来实现：

popup.html：

<!DOCTYPE html>
<script src="jquery-3.1.1.min.js"></script>
<script src="popup.js"></scrip>
<div>
    Search RT for Movie: <input type="text" value=""><input type="submit" id="bleh">
</div>

【讨论】：

谢谢，我能够使用您的建议使其工作。但是，它只会在弹出窗口的inspect Element 开发人员窗口中显示console.log。普通的开发者窗口只记录了“嗨”。你知道为什么吗？
有multiple different consoles。哪个用于对console.log() 的特定调用取决于console.log() 在什么范围和上下文中执行。我不太确定你所说的到底发生了什么。请明确说明您指的是哪个 DevTools。例如，哪个 DevTools 是“正常的开发者窗口”？
我的意思是浏览器控制台，谢谢我阅读了您之前关于控制台的帖子，我想我现在明白了