在浏览器动作时点击图标点击

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

（未经测试）

请注意，使用浏览器操作的切换，你不能有一个浏览器操作弹出了。如果您需要这样的弹出窗口，请考虑在弹出窗口中放置一个切换按钮。