$（document）.ready在chrome扩展中不起作用？

Question

  

可能重复：
  google chrome extension- popup page not showing correctly

我在popup.html中有这个简单的代码

头脑中：

<script src='jquery-1.8.2.js'></script>
<script>
    $(document).ready(function() {
        foo();
    });
    function foo() {
        document.getElementById('popup').innerHTML = "Hi, I entered foo";
    }
</script>   

身体：

<div id="popup">        <!--place holder-->
</div>

单击扩展程序的图标时，我打算在打开的幻灯片中收到字符串“Hi ...”。实际上，打开了一张空幻灯片。有人可以解释这里有什么问题吗？

（名为jquery-1.8.2.js的jquery文件与popup.html放在同一个文件夹中）

编辑：收到反馈后，我将第二个脚本移动到外部文件，如下所示：

<script src='popup.js'></script>

popup.js：

<script>
    $(document).ready(function() {
        foo();
    });
    function foo() {
        document.getElementById('popup').innerHTML = "Hi, I entered foo";
    }
</script>

但它仍然没有用。为什么呢？