动态切换chrome插件 icon

动态切换chrome插件 icon

大家有时候在用插件的时候，会看到插件的图标，一会亮一会暗，从而来标识插件是否能用。那么，它是如何实现的呢？

1. 更换icon

   首先我们要明确的是，这里其实是两张icon，而不是想我们常见的多个class或者少个class，所以我们需要准备两张不同状态的icon。其次是切换icon的api

   // 该tab变量为chrome.tabs.Tab 
     chrome.action.setIcon({
       tabId: tab.id,
       path: {
         128: '1.png',
       },
     });
   

2. 有了更换icon的能力，我们需要封装一个函数，当在不同的时机时，需要调用该函数，然后做点逻辑判断一下要用哪个状态下的icon

   export const handleIconChange = async (tab: chrome.tabs.Tab) => {
     \... 判断逻辑
     chrome.action.setIcon({
       tabId: tab.id,
       path: {
         128: '1.png',
       },
     });
   }
   

3. 在合适的时机去调用该函数去更换icon，比较合适的时机是页面刷新的时候和用户切换了当前浏览的tab的时候

   • 页面刷新

     chrome.tabs.onUpdated.addListener(async (tabId) => {
       const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
       if (tabId === tab?.id) {
         handleIconChange(tab);
       }
     });
     ​
     chrome.tabs.onActivated.addListener(async () => {
       const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
       handleIconChange(tab);
     });
     

   • 用户切换了当前浏览的tab

     这个比较复杂，我们如何判断用户切换了当前浏览的tab呢？一个巧妙的做法时，利用content-script会被页面自动注入的特点。当content-script被调用时，说明用户打开了一个新的tab页面，此时我们向background发送个消息告诉我们更换icon

     // content-script
     /**
      * 注入后，更新当前icon图标
      */
     chrome.runtime.sendMessage({msg: 'updateIcon'});
     ​
     

     // background
     chrome.runtime.onMessage.addListener(async (data: {msg: string}) => {
       if (msg === 'updateIcon') {
         const [tab] = await chrome.tabs.query({ currentWindow: true, active: true });
         handleIconChange(tab);
         return true;
       }
     });