jquery - $(document).ready 在 chrome 扩展中不起作用？

Question

可能重复：
谷歌浏览器扩展 - 弹出页面未正确显示

我在 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>

但它仍然无法正常工作。为什么？