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

由于某种原因，当我尝试访问default_popup上的browser_action的DOM时，我无法......没有js错误，它看起来像脚本正在运行在与我预期不同的背景下。下面是相关的代码段从manifest.json，browser_action.html & browser_action.jsChrome扩展程序：如何操作browser_action.default_popup DOM

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 
})();

来源

2017-03-12 Ronen Cypis

右击弹出，然后'Inspect'以显示其devtools控制台。 [Google Chrome浏览器/ Firefox在控制台中看不到扩展名输出]（// stackoverflow.com/a/38920982） – wOxxOm

谢谢，已经这样做了（注意问题中的console.log及其结果...）。问题是，当脚本执行时，DOM还没有准备好...... –

啊，那个'// 0'注释...下一次在代码下面的一个单独的块中写下来，使它明确而明显。 – wOxxOm

等待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>

来源

2017-03-12 10:21:52 mehulmpt

当然!!!我一直在寻找一种解决方案，以至于我错过了“DOM Ready”部分......谢谢！ –

或者，使用推迟脚本属性并将它们放在头部。 –

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

回答

相关问题