How to get the extension icon data in Manifest V3

需求

在 background 中，拿到了扩展 icon 的 URL 链接，如：chrome://extension-icon/mciiogijehkdemklbdcbfkefimifhecn/128/0，如何获取其二进制数据。

目的：对于记录扩展安装卸载的功能而言，能够获取扩展的 icon 数据并保存下来，可以优化用户界面展示。如果此扩展已经卸载，而没有提前将其 icon 保存，在查看历史记录时，就会无法显示其 icon。

现状

先说结论：没有办法可以实现。

在 Manifest V3 中，background 使用 service-workers 实现，也就是没有了 BOM 和 DOM 相关的内容。

Chrome extensions: Use the “background.service_worker” key instead manifest_version 3 - Stack Overflow

1 无法使用 Image 元素，让其帮忙渲染 Icon 图片。

2 无法使用 XMLHttpRequest 来下载数据。

3 service-worker 中有 fetch，但是其不支持 chrome:// 协议。

所以，就无法获取到 icon 的具体数据了。

Chrome 的同学收到了反馈，并记录了 issue，但并没有打算处理。

How to get the extension icon data in Manifest V3

1257227 - Cannot retrieve extension icons in JS using the chrome.management API - chromium

曲线救国

在讨论中，Simeon Vincent 提到了一个曲线救国的方案，在 background 中监听到有扩展安装之后，打开一个新的 HTML 页面（这个页面是有完整 BOM 和 DOM 支持的），在这个页面中完成 icon 数据的获取。

background.js

chrome.management.onInstalled.addListener((info) => {  spawnSyncIconsPage();});
function spawnSyncIconsPage() {  return chrome.windows.create({    url: chrome.runtime.getURL('sync-icons.html'),    state: chrome.windows.WindowState.MINIMIZED,  });}

可以实现目的，但是会打开一个新的页面，用户会觉得很奇怪。虽然这个页面是最小化的，而且完成工作之后会被自动关闭。

service-worker 的其它影响

没有了 window 全局对象，可以使用 globalThis

1 indexedDB

如果习惯于使用 window.indexedDB，还以为 indexedDB 在 service-worker 不支持了。可以直接使用 indexedDB 或 globalThis.indexedDB

2 canvas

在网页中，习惯使用 HTMLCanvasElement 或者 document.createElement('canvas') 来创建 canvas。

也可以直接使用 OffscreenCanvas

​

原文链接: https://cloud.tencent.com/developer/article/2481572

本作品采用 「署名 4.0 国际」 许可协议进行许可，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。