plasmo开发浏览器插件动态setIcon修改插件图标和setBadgeText显示徽标

动态修改图标和设置徽标主要用到action这个api，官网地址：developer.chrome.com/docs/extens...

如果你使用官方原生的方式开发，加载和修改图标应该是比较简单的，但是如果你使用的是plasmo框架开发浏览器插件的话，就会遇到加载图片的路径不正确，导致设置图标错误的问题。这里就说一下在plasmo框架里面加载图标并动态设置。

动态设置图标

因为动态设置图标只能填写两种方式，一个是imageData，另外一个就是加载一个path，使用imageData的方式可以使用canvas画一张图，然后加载上去：

javascript 复制代码

 // change action icon
    const setIcon = () => {
        const canvas = new OffscreenCanvas(16, 16)
        const context = canvas.getContext('2d')
        context.clearRect(0, 0, 16, 16)
        context.fillStyle = '#00FF00' // Green
        context.fillRect(0, 0, 16, 16)
        const imageData = context.getImageData(0, 0, 16, 16)
        chrome.action.setIcon({ imageData: imageData }, () => {
            console.log('set icon callback')
        })
    }

这是一种比较简单的方式，但是如果你想加载一张本地的图片，动态设置为图标该怎么办？

plasmo官方文档加载资源的方式：Import Resolution -- Plasmo

可以加载scss的文件：

javascript 复制代码

import styleText from "data-text:~/assets/style.scss"

// 会自动转成css
console.log(styleText)

也可以加载原始图片路径：

javascript 复制代码

import imageUrl from "raw:~/assets/image.png"
 
console.log(imageUrl) // chrome-extension://<extension-id>/image.<hashA>.png

也可以加载base64格式的图片：

javascript 复制代码

import iconBase64 from "data-base64:~/assets/icon.png"
 
console.log(iconBase64) // data:image/png;base64,etc...

我们这个使用setIcon动态设置图标的时候，只能使用imageData的格式，因为原始图片路径和base64格式的都不行，所以需要将base64/图片路径格式的转为imageData格式的才可以：

javascript 复制代码

import someImage from 'data-base64:~assets/icon.png'

// set custom icon
    const setPngIcon = () => {
        var img = new Image()
        img.onload = function () {
            const canvas = new OffscreenCanvas(16, 16)
            const context = canvas.getContext('2d')
            context.drawImage(img, 0, 0, 16, 16)
            const imageData = context.getImageData(0, 0, 16, 16)
            chrome.action.setIcon({ imageData: imageData }, () => {
                console.log('set icon callback')
            })
        }
        img.src = someImage
    }

这样设置完就可以修改了：

图标也更换了：

更换后的图标：