Change icon when click button in popup.html

在 Chrome Extension 中有許多的 內容安全政策(Content Security Policy)

其中一個就是 Inline JavaScript will not be executed

表示例如 <button onclick=”clickHandler(this)”> 這樣的 onclick() 是無法被執行的

所以應該將程式碼改成以下的寫法把js獨立出來

並且使用document.addEventListener去設定動作

//popup.html
<button id='alertButton'>Change the icon</button>

//popup.js
function changeIcon(){
//
chrome.browserAction.setIcon({
path: 'enable16.png'
});
chrome.browserAction.setBadgeText({
text: 'haha'
});
}

document.addEventListener('DOMContentLoaded', function () {
document.getElementById('alertButton').addEventListener('click', changeIcon);
});

 

這樣就可以安全執行了~看到 Icon 改變的那刻真是感動~!!

 

[參考資料]

1. Ultra simple Chrome Extension doesn’t addEventListener to button onclick event

2. Chrome Extension 開發經驗篇 15 – 如何改變 browserAction 的圖示?