Chrome擴展的HTML/Javascript不太好用

所以我試圖做一個Chrome擴展。我的代碼運行正常時，我作爲一個普通的HTML頁面運行，但是當我使用瀏覽器操作時，我的啓用/禁用按鈕不起作用。當我按下啓用（它應該切換到禁用狀態）時，它不會執行任何操作。想知道是否有什麼我不知道的權限或什麼的。我沒有在我的json頁面中設置任何權限，但我不認爲這是問題。想知道你們是否可以看一看，看看我錯過了什麼。這是我的代碼。Chrome擴展的HTML/Javascript不太好用

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="nosidebar.css"> 
     <script type="text/javascript"> 
      function enableBtn(){ 
       document.getElementById("btn1").style.display = "none"; 
       document.getElementById("btn2").style.display = ""; 
       return false; 
      } 

      function disableBtn(){ 
       document.getElementById("btn2").style.display = "none"; 
       document.getElementById("btn1").style.display = ""; 
       return false; 
      } 

     </script> 
    </head> 
    <body> 
    <div id="button"> 
     <a href="javascript:void(0)" class="myButton1" title="Click to disable" id="btn1" style="display:;" onclick="enableBtn(); return false;">Enabled</a> 
     <a href="javascript:void(0)" class="myButton2" title="Click to enable" id="btn2" style="display:none;" onclick="disableBtn(); return false;">Disabled</a> 
    </div> 
    <div id="text"> 
     You must refresh the page for the change to take effect. 
    </div> 
    </body> 
</html>

感謝@duskwuff我已經解決了我的問題。我創建了一個單獨的js文件並使用下面的代碼。作爲谷歌的Chrome擴展程序的一部分，總有一個內容安全策略設置禁止內嵌腳本

function enableBtn(){ 
    document.getElementById("btn1").style.display = "none"; 
    document.getElementById("btn2").style.display = ""; 
    return false; 
} 

function disableBtn(){ 
    document.getElementById("btn2").style.display = "none"; 
    document.getElementById("btn1").style.display = ""; 
    return false; 
} 

document.addEventListener('DOMContentLoaded', function() { 
    document.getElementById("btn1").addEventListener("click", enableBtn); 
    document.getElementById("btn2").addEventListener("click", disableBtn); 
});

來源

2015-04-07 Ben

明確何方。彈出？內容？ –

@ZigMandel對不起，這是彈出頁面。我認爲黃昏時分回答了我的問題，但今天有空，我需要在今天的某個時候嘗試。 – Ben

@Ben強烈建議您將您的解決方案作爲（另一個）答案發布，但請不要將其編輯到問題中。 – Xan

HTML頁面，無論是在屬性（例如，onclick）和內嵌<script>標籤。您需要在單獨的Javascript文件中定義這些腳本，並在該腳本中綁定事件處理程序，例如

<script src="nosidebar.js"></script>

，並在該文件中：

function enableBtn() { ... } 
function disableBtn() { ... } 

document.getElementById("btn1").addEventListener("click", enableBtn); 
document.getElementById("btn2").addEventListener("click", disableBtn);

有關內容安全策略以及它與Chrome瀏覽器擴展程序，請參見更多信息：

https://developer.chrome.com/extensions/contentSecurityPolicy

來源

2015-04-07 04:10:48 duskwuff

Chrome擴展的HTML/Javascript不太好用

回答

相關問題