Иконка расширения: icon16.png, icon48.png, icon128.png. Пробовал в Opera. Чтобы изменить цвет и фон Off/On, нужно в js\popup.js найти function checkBudgeText() {. Было так:
function checkBudgeText() {
chrome.action.getBadgeText({}, function (badgeText) {
if (badgeText === 'On') {
myMain.classList.add('connected')
gradient.style.display = 'block'
circle.style.animation = 'circle-progress 0s ease-out forwards'
button.style.boxShadow = '0px -13px 53px 0px #34E99261'
chrome.action.setBadgeTextColor({ color: '#34e992' })
connectStatus.innerHTML = 'Вы подключены'
} else {
myMain.classList.remove('connected')
gradient.style.display = 'none'
connectStatus.textContent = 'Вы не подключены'
chrome.action.setBadgeTextColor({ color: 'tomato' })
}
})
}
Цвет текста изменить в chrome.action.setBadgeTextColor, после них добавить строчку для фона:
chrome.action.setBadgeBackgroundColor({ color: 'НУЖНЫЙ ЦВЕТ' })
Для примера такая функция checkBudgeText:
function checkBudgeText() {
chrome.action.getBadgeText({}, function (badgeText) {
if (badgeText === 'On') {
myMain.classList.add('connected')
gradient.style.display = 'block'
circle.style.animation = 'circle-progress 0s ease-out forwards'
button.style.boxShadow = '0px -13px 53px 0px #34E99261'
chrome.action.setBadgeTextColor({ color: '#ffffff' })
chrome.action.setBadgeBackgroundColor({ color: 'green' })
connectStatus.innerHTML = 'Вы подключены'
} else {
myMain.classList.remove('connected')
gradient.style.display = 'none'
connectStatus.textContent = 'Вы не подключены'
chrome.action.setBadgeTextColor({ color: 'blue' })
chrome.action.setBadgeBackgroundColor({ color: 'yellow' })
}
})
}
С таким результатом:
Стоит учитывать кэш, у меня Opera после запуска ещё отображала старые цвета, но после нажатия на расширение становилось правильно.
UPD: Для сброса кэша выкл. и вкл. расширение. Как вы поняли, после каждого обновления расширения придётся лезть в код.