Chrome扩展程序:如何操作browser_action.default_popup DOM

时间:2017-03-12 10:19:53

标签: javascript jquery google-chrome google-chrome-extension

出于某种原因,当我尝试访问default_popup上的browser_action的DOM时,我无法...没有js错误,看起来好像脚本正在运行在不同于我预期的背景下。 以下是manifest.jsonbrowser_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
})();

1 个答案:

答案 0 :(得分: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>