Chrome擴展程序：如何處理browser_action.default_popup DOM

Question

出於某種原因，當我嘗試在browser_action上訪問default_popup的DOM時，我無法...沒有js錯誤，似乎該腳本在與我預期不同的上下文中運行。 以下是manifest.json ， browser_action.html和browser_action.js中的相關代碼部分

manifest.json：

  "browser_action": {
    "default_icon": "icons/icon.png",
    "default_title": "title goes here",
    "default_popup": "src/browser_action/browser_action.html"
  },

browser_action.html：

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="browser_action.js"></script>
<div id="mainPopup">
    <h1 id="title">Main Title</h1>
    <img src="http://placehold.it/700x350" alt="chart" id="chart" />
</div>

browser_action.js：

(function(){
  var $title = $('#title');
  console.log($title.length); // 0
})();

Answer 1

等待DOM准備自己：

$(function() {
var $title = $('#title');
  console.log($title.length);

});

或者，將腳本文件下移：

<div id="mainPopup">
    <h1 id="title">Main Title</h1>
    <img src="http://placehold.it/700x350" alt="chart" id="chart" />
</div>

...
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="browser_action.js"></script>
</body>