Click Counter on badgeText

Can someone guide me how to correct this code to create clickable button counter Badge in Chrome extension? Right now it is rising rapidly, but I need to raise only when I click on a button what was named “done”.

background.js

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);

popup.js

document.addEventListener("DOMContentLoaded", function () {
    //Get Reference to Functions
    backGround = chrome.extension.getBackgroundPage();
    //Call Function
    backGround.updateIcon();
});

manifest.json

{
    "name": "Bagde",
    "description": 
    "version": "1",
    "manifest_version": 2,
    "background": {
        "scripts": [
            "background.js"
        ]
    },
    "browser_action": {
        "default_title": "Clickable Badge",
        "default_popup": "popup.html"
    }
}

Thanks in advance. Let me know if you need html code for this button. But you can use any button you like.