ブラウザのアクション時にアイコンを切り替える

Question

ブラウザのアクションonclickで拡張機能のアイコンを切り替えるにはどうすればよいですか？

manifest.jsonを

{ 

    "manifest_version": 2, 
    "name": "Toggle Icon", 
    "description": "Toggle browser action Icon", 
    "version": "1.0", 
    "homepage_url": "https://www.stackoverflow.com/", 
    "icons": { 
    "48": "icons/message-48.png" 
    }, 


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

    "permissions": [ 
    "tabs" 
    ], 

    "browser_action": { 
    "default_icon": "icons/off.svg", 
    "default_title": "ON" 
    }, 

    "content_scripts": [ 
    { 
     "matches": ["http://localhost/*"], 
     "js": ["content-script.js"] 
    } 
    ] 

} 

background.js

browser.browserAction.setIcon({ 
    path: { 
    19: "icons/on.svg", 
    38: "icons/on.svg" 
    } 
}); 

- off.svg
-

on.svg

これで、ブラウザに拡張機能をロードするとすぐにアイコンが 'off.svg'から 'on.svg'に自動的に切り替わります。ブラウザアクションアイコンをクリックすると、同じことをどのように設定できますか？

Answer 1

おそらくこのような何か：

let isEnabled = true 
browser.browserAction.onClicked.addListener((tab) => { 
    isEnabled = !isEnabled 
    if (isEnabled) { 
     browser.browserAction.setIcon({ 
      path: { 
       19: "icons/on.svg", 
       38: "icons/on.svg" 
      } 
     }); 
    } else { 
     browser.browserAction.setIcon({ 
      path: { 
       19: "icons/off.svg", 
       38: "icons/off.svg" 
      } 
     }); 
    } 
}) 

（未テスト）

はトグルとして、ブラウザアクションを使用して、あなたはもう、ブラウザアクションのポップアップを持つことができませんのでご注意ください。そのようなポップアップが必要な場合は、ポップアップにトグルボタンを配置することを検討してください。