在瀏覽器動作時點擊圖標點擊

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

（未經測試）

請注意，使用瀏覽器操作的切換，你不能有一個瀏覽器操作彈出了。如果您需要這樣的彈出窗口，請考慮在彈出窗口中放置一個切換按鈕。