I want to clean my notification (badge). When click onto the icon a popup should be opened at the same time, but it doesn't work.
It works with tab but I don't want to show on tab it should be on popup.
Here is the code;
var i = 1;
function updateIcon() {
i=1;
chrome.browserAction.setBadgeText({text: ''});
chrome.browserAction.setPopup({popup:"popup.html"});
}
chrome.browserAction.onClicked.addListener(updateIcon);
chrome.browserAction.setBadgeBackgroundColor({color:[200, 0, 0, 100]});
window.setInterval(function() {
chrome.browserAction.setBadgeText({text:String(i)});
i++;
}, 4000);
Your Badge Text is growing because Background Page
lives until extension is uninstalled or disabled.
So your code
window.setInterval(function() {
chrome.browserAction.setBadgeText({text:String(i)});
i++;
}, 4000);
keeps badge to continue growing.
Moreover, chrome.browserAction.onClicked.addListener(updateIcon);
will not work second time!
What is you want to stop?
PS: You are using two conflicting functionalities ( browserAction.onClicked
and browserAction.setPopup
together.
Registered Background Page and Browser Action
{
"name": "Bagde",
"description": "http://stackoverflow.com/questions/14436053/chrome-extension-onclick-with-popup",
"version": "1",
"manifest_version": 2,
"background": {
"scripts": [
"background.js"
]
},
"browser_action": {
"default_title": "Hi",
"default_popup": "popup.html"
}
}
Used your code and eliminated conflicting browserAction.onClicked
Event
var i = 1;
function updateIcon() {
i = 1;
chrome.browserAction.setBadgeText({
text: ''
});
chrome.browserAction.setPopup({
popup: "popup.html"
});
}
chrome.browserAction.setBadgeBackgroundColor({
color: [200, 0, 0, 100]
});
window.setInterval(function () {
chrome.browserAction.setBadgeText({
text: String(i)
});
i++;
}, 4000);
Some trivial Page, used popup.js
to comply with CSP.
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
<p>Some Content ..</p>
</body>
</html>
Invoked Background Page function, so counter starts when ever icon is clicked
document.addEventListener("DOMContentLoaded", function () {
//Get Reference to Functions
backGround = chrome.extension.getBackgroundPage();
//Call Function
backGround.updateIcon();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.