jquery - $(document).ready は chrome 拡張機能で動作しませんか?

Question

重複の可能性:
Google Chrome 拡張機能 - ポップアップ ページが正しく表示されない

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>

拡張機能のアイコンをクリックすると、開いたスライドに「こんにちは...」という文字列が表示されるはずでした。実際には、空のスライドが開かれます。誰かがここで何が間違っているのか説明してもらえますか?

(jquery-1.8.2.js という名前の jquery ファイルは、popup.html と同じフォルダーに配置されます)

編集: フィードバックを得た後、次のように 2 番目のスクリプトを外部ファイルに移動しました。

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

popup.js:

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

しかし、それはまだ機能していません。なんで？