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

回答

相關問題