badgeTextのカウンターをクリックして

Question

Chrome拡張機能のクリック可能なボタンカウンターのバッジを作成するには、このコードを修正する方法を教えてもらえますか？今は急速に増えていますが、私は「完了」という名前のボタンをクリックしたときにだけ募集をする必要があります。

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検索」ボタンにも使用できます。

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

ドゥあなたのウェブサイトの "マッチ" URLを設定することを忘れないでください。