Chrome擴展程序Javascript不會觸發動作

我的朋友和我正在創建我們的第一個Chrome擴展程序作爲類項目，但似乎無法克服此駝峯。點擊右上角的擴展圖標後，我們有一個帶按鈕的下拉菜單，點擊後，它應該會觸發一個javascript函數。從頂部開始，我們創建了一個帶有測試功能的虛擬按鈕，該按鈕應該會觸發console.log，但不管我們什麼都沒有在控制檯（或檢查彈出控制檯）中顯示任何內容。Chrome擴展程序Javascript不會觸發動作

JS + HTML：

document.getElementById("DOMContentLoaded", function() { 
 
    var btnStart = document.getElementById('startSc'); 
 
    btnStart.addEventListener('click', function() { 
 
     console.log("hi"); 
 
    }); 
 
});

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <title>First Extension</title> 
 
    <script src="popup.js"></script> 
 
    <link rel='stylesheet' href="TBStyle.css"> 
 
</head> 
 

 
<body> 
 
    <h1>Go Chrome!</h1> 
 
    <a href="#" id="startSc">Start</a> 
 
</body> 
 

 
</html>

清單：

{ 
 
    "name": "My First Extension", 
 
    "version": "1.0", 
 
    "manifest_version": 2, 
 
    "description": "The first extension that I made.", 
 
    "browser_action": { 
 
    "default_icon": "icon.png", 
 
    "default_popup": "popup.html" 
 
    }, 
 
}

任何幫助非常感謝，提前致謝！

來源

2017-04-04 ZeFlaw

getElementById不能這樣工作。

我相信你想找的是這樣的：

document.addEventListener("DOMContentLoaded", function() { 
 
    var btnStart = document.getElementById('startSc'); 
 
    btnStart.addEventListener('click', function() { 
 
     console.log("hi"); 
 
    }); 
 
});

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <title>First Extension</title> 
 
    <script src="popup.js"></script> 
 
    <link rel='stylesheet' href="TBStyle.css"> 
 
</head> 
 

 
<body> 
 
    <h1>Go Chrome!</h1> 
 
    <a href="#" id="startSc">Start</a> 
 
</body> 
 

 
</html>

來源

2017-04-04 18:50:57 Ryan

Chrome擴展程序Javascript不會觸發動作

回答

相關問題