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을 구성하는 것을 잊지 마십시오.