Javascript 单击文本上的计数器

有人可以指导我如何更正此代码，在Chrome extension中创建可点击按钮计数器徽章吗？现在它正在迅速上升，但我只需要在我点击一个名为“完成”的按钮时才需要上升

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"
    }
}

---

提前谢谢。如果您需要此按钮的html代码，请告诉我。但是你可以使用任何你喜欢的按钮。

你必须设置一个内容脚本来处理点击，并将有关该事件的消息发送到背景脚本，背景脚本将更改徽章图标文本

这是解决办法。它适用于谷歌的谷歌搜索按钮

manifest.json

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

{ 清单版本：2， 名称：点击计数器， 版本：1.0.0， 内容和脚本：[ { 匹配项：[https://*/*]， 在以下位置运行：文档结束， js:[content script.js] } ], 背景：{ 脚本：[background.js] }, 浏览器操作：{ 默认标题：单击计数器 } } content-script.js

document.body.addEventListener'click'，e=>{ ife.target.matches'input[type=submit]{//您的按钮 chrome.runtime.sendMessage“单击” } }; 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);

设计数器=0； chrome.runtime.onMessage.addListenermessage=>{ ifmessage=='单击'{ 计数器+=1； chrome.browserAction.setBadgeText{ 文本：counter.toString }; } };

---

别忘了为你的网站配置匹配的URL

嗯，很明显，你需要删除setInterval并为“完成”按钮添加一个click listener，该按钮将增加背景。我和调用setBadgeText。嘿，是的，我也发现了这一点，但我仍然是这里的新手之一，你能告诉我更多细节吗？你真正想什么时候运行UpdateCon；？如果你想要按钮，为什么在弹出窗口加载时运行它？btn在哪里？我想像其他扩展一样运行它，例如AdBlock。对我来说，这个扩展是查看我在一个特定按钮上点击了多少次的最好方法。按钮类是：class=处理按钮它是一个用于单击的普通按钮。我需要知道我一天中点击了多少次这个按钮。你好，Deliaz，谢谢你抽出时间给我那个代码，我想我做错了什么。在清单中，我添加了您告诉我的网站，例如：匹配项：[，在按钮中，我添加了我的按钮示例：ife.target.matches'search。是的，我知道我只是javascript新手，但你能再次为我指出一个好的解决方案吗？@Mkik，上面的代码已经为谷歌网站进行了调整，并且是现成的。你可以阅读更多关于模式的信息。这里是关于。Deliaz你让我开心。这个链接是什么你告诉我具体需要做什么。我忘了使用as id和.as类。谢谢你的帮助。Deliaz我想重新打开这个问题，因为我发现了问题。计数器工作得很好由于一种情况，当你等待太久或使用很少的选项卡时，有时计数器会重置为1，我知道这可能是numBER不会存储在任何地方。我找到了可以存储在Chrome内存号中的解决方案。我想在这里提问，不想再提出关于这种情况的问题，在这里最好使用哪个变量？@Mkik，是的，你说得对。这是我的错误。发生这种情况是因为清单文件中的persistent:false。此指令切换到后台p老化为。解决此问题的第一种方法是将其设置为永久：true或简单地将其删除。另一种方法是使用本地存储或保留最新值。此外，我已更新了答案。