单击 badgeText 上的计数器

Question

有人可以指导我如何更正此代码以在 Chrome 扩展程序中创建可点击按钮计数器徽章吗？现在它正在迅速上升，但我只需要在单击名为 "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"
    }
}

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

Answer 1

您必须设置内容脚本才能处理点击并将有关该事件的消息发送到后台脚本，这将更改徽章图标文本。

这是解决方案。它适用于 Google 的 "Google Search" 按钮。

manifest.json

{
    "manifest_version": 2,
    "name": "Click counter",
    "version": "1.0.0",

    "content_scripts": [
      {
        "matches": ["https://*/*"],
        "run_at": "document_end",
        "js": ["content-script.js"]
      }
    ],

    "background": {
      "scripts": ["background.js"]
    },

    "browser_action": {
      "default_title": "Click counter"
    }
}

内容-script.js

document.body.addEventListener('click', e => {
    if(e.target.matches('input[type="submit"]')) { // your button
        chrome.runtime.sendMessage('clicked')
    }
});

background.js

let counter = 0;

chrome.runtime.onMessage.addListener(message => {
    if(message === 'clicked') {
        counter += 1;
        chrome.browserAction.setBadgeText({
            text: counter.toString()
        });
    }
});

不要忘记为您的网站配置 "matches" URL。

单击 badgeText 上的计数器

Click Counter on badgeText

javascript

counter

google-chrome-extension