Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >How to get the extension icon data in Manifest V3

How to get the extension icon data in Manifest V3

作者头像
jgrass
发布于 2024-12-25 10:25:10
发布于 2024-12-25 10:25:10
6000
代码可运行
举报
文章被收录于专栏:蔻丁杂记蔻丁杂记
运行总次数:0
代码可运行

需求

在 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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 不支持了。可以直接使用 indexedDBglobalThis.indexedDB

2 canvas

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

也可以直接使用 OffscreenCanvas

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023年8月30日 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
谷歌插件之一键关闭同域名页面
在日常的网页浏览中,我们常常会打开多个相同域名的页面,特别是在进行某些重复性工作或者浏览新闻网站时,这种情况尤为常见。手动关闭这些页面既费时又费力。为了解决这个问题,我们可以开发一个简单的谷歌插件,实现一键关闭所有同域名的页面,极大地提升浏览效率。本文将带你一步一步完成这个插件的开发过程。
一只牛博
2025/05/31
1060
谷歌插件之一键关闭同域名页面
谷歌插件之页面标记
你是否曾经在浏览网页时,发现了一篇非常有用的文章或者复杂的数据图表,但是随后又发现自己需要在其中标注、勾画或添加注释?今天,我们将介绍一款神奇的谷歌插件,它不仅让你在网页上任意使用画笔进行标注,还能帮助你快速捕捉灵感、整理思路,甚至和同事、朋友分享你的发现。让我们一起揭开这个功能的魔幻面纱,看看它究竟能为我们带来怎样的便利!
一只牛博
2025/05/31
1150
谷歌插件之页面标记
写html页面没意思,来挑战chrome插件开发
谷歌浏览器插件开发是指开发可以在谷歌浏览器中运行的扩展程序,可以为用户提供额外的功能和定制化的体验。谷歌浏览器插件通常由HTML、CSS和JavaScript组成,非常利于前端开发者。 开发者可以利用这些技术在浏览器中添加新的功能、修改现有功能或者与网页进行交互。
winty
2024/04/25
6200
写html页面没意思,来挑战chrome插件开发
全网最详细的谷歌插件开发小册📚
可能是全网最详细的谷歌插件开发小册👏🏻,之前写谷歌插件的时候绕了一圈网上的教程,没有发现比较好的文档教程,索性根据官方文档梳理一遍,避免后面学习的同学继续踩坑!!!
linwu
2023/07/26
1.6K0
带你快速走进Chrome扩展开发的大门
Chrome 扩展程序通过可以向 Chrome 浏览器添加特性和功能来增强浏览体验,可以构建一些强大的生产力工具,也可以丰富网页的内容,还可以做一些信息的聚合等等。本篇文章将带你通过三个简单的案例带你快速走进Chrome扩展开发的大门。
前端小鑫同学
2023/04/22
8930
带你快速走进Chrome扩展开发的大门
Manifest V3扩展Content Script绕过CSP限制点击页面内元素
在Manifest V3中,谷歌对CSP策略的限制变得更加严格。例如,不允许使用unsafe-inline指令,这避免扩展执行远程代码,然而,这也意味着注入到页面中隔离环境的Content Scripts受到了扩展CSP策略的约束。因此,当页面中的链接包含内联的事件处理器/javascript:伪协议时,如果尝试在Content Scripts中点击链接,将发生错误,如下图所示:
戴兜
2023/03/18
2.7K0
Manifest V3扩展Content Script绕过CSP限制点击页面内元素
chrome浏览器扩展v3版本配置项整理备忘
2、除了在插件内部contenscript background 和 popup之间传递消息以外,其他网站也可以给插件发送消息。方法如下 首先,需要增加配置 externally_connectable:{matches:[“https://*.xxx.com/”]}指定允许哪些网站可以给当前插件发送消息,相当于白名单,只有在白名单中的站点发送的消息,扩展才会监听
fastmock
2023/10/23
6420
Chrome插件manifest.json文件详解
开发Chrome插件首先就是配置manifest.json文件了,利用它我们可以定义在什么时机以及在什么网页执行什么脚本,有一些什么行为,下面我一起来看看这个文件有哪些配置项以及有什么作用:
越陌度阡
2022/05/06
2K0
chrome插件 manifest 2 to 3
影响到我们的API(主要是contentScript与background通讯的部分):
biaoblog.cn 个人博客
2022/08/11
2.4K0
chrome插件 manifest 2 to 3
从零到一:腾讯云 AI 代码助手 + DeepSeek 写一个浏览器插件
这个实现方案完全使用矢量图形绘制,不依赖任何图片素材,核心游戏逻辑与UI组件分离,便于维护和扩展。游戏控制逻辑完整包含开始/暂停/重置功能,并实现了经典贪吃蛇的所有核心机制。
全栈若城
2025/02/28
1680
从零到一:腾讯云 AI 代码助手 + DeepSeek 写一个浏览器插件
从油猴脚本管理器的角度审视Chrome扩展
在之前一段时间,我需要借助Chrome扩展来完成一个需求,当时还在使用油猴脚本与浏览器扩展之间调研了一波,而此时恰好我又有一些做的还可以的油猴脚本 TKScript (点个star吧 😁),相对会比较熟悉脚本管理器的能力,预估是不太能完成需求的,所以趁着这个机会,我又学习了一波浏览器扩展的能力。那么在后来需求的开发过程中,因为有些能力是类似于脚本管理器提供的基础环境,致使我越来越好奇脚本管理器是怎么实现的,而实际上脚本管理器实际上还是一个浏览器扩展,浏览器也并没有给脚本管理器开后门来实现相关能力,而让我疑惑的三个问题是:
WindRunnerMax
2024/05/14
4320
Manifest V3中的declarativeNetRequest是否支持js重定向
我们在代码中直接监听请求,在请求前看请求js的url是否以nodeModules_eeb5887.js结尾,如果是的话直接替换为vue_2.6.14.js。
用户8671053
2021/09/26
2.5K0
开发一个渐进式Web应用程序(PWA)前都需要了解什么?
自苹果推出了iPhone应用商店以来,App成为了我们生活中不可或缺的一部分,而对于实体业务也是如此,现在各行业都在推出自己的App,但有没有人想过这样一种场景,如果自己的潜在客户还没有安装你的App亦或是即便安装但因为客户的手机存储空间紧张而卸载掉了你的App?那有没有使App更轻量,更易安装的技术实现呢?答案是“有的”。
葡萄城控件
2020/09/14
1.8K0
开发一个渐进式Web应用程序(PWA)前都需要了解什么?
Chrome Extension
Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件,它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包
江米小枣
2020/06/15
3.1K0
Chrome扩展开发入门
近几年,随着 IE 浏览器的落幕,Chrome(包括使用Chrome内核的浏览器)其实质上已经垄断整个浏览器行业了,就连微软的 Edge 都用上了 Chrome 内核。 可以说,Chrome 的标准,事实上就可以看做是行业标准了。可以预见,Chrome 的发展前景将会非常广阔。
epoos
2022/09/19
4.2K0
Chrome扩展开发入门
浏览器插件开发-manifest文件解读「建议收藏」
"content_security_policy": "script-src 'self' https://*.xxx.com; object-src 'self'"
全栈程序员站长
2022/07/28
2.8K0
chrome扩展应用开发快速科普
本文通过对chrome插件的各个部分进行快速的介绍,从而让大家了解插件各个部分的关系,并且知道如何将其进行组装成一个完整的chrome插件。
黄Java
2018/09/18
1.1K0
chrome扩展应用开发快速科普
浏览器架构的温故知新
【引子】前端可能是一个日新月异的领域,我们很难了解其中的方方面面。但是,前端系统一般都以浏览器作为运行环境, 对浏览器的进一步理解有助于我们更好地开发前端应用。这也是本文的由来之一,也作为对runtime的一次实例分析。
半吊子全栈工匠
2024/03/22
3010
浏览器架构的温故知新
Chrome扩展程开发初探
最近学习了一些前端知识,准备找点方向和项目在工作之余练练手。偶然间被ChatGPT提醒,觉得Chrome拓展开发是一个非常不错的方向。
FunTester
2024/07/30
2810
Chrome扩展程开发初探
从零实现的Chrome扩展
Chrome扩展是一种可以在Chrome浏览器中添加新功能和修改浏览器行为的软件程序,例如我们常用的TamperMonkey、Proxy SwitchyOmega、AdGuard等等,这些拓展都是可以通过WebExtensions API来修改、增强浏览器的能力,用来提供一些浏览器本体没有的功能,从而实现一些有趣的事情。
WindRunnerMax
2023/07/24
7290
相关推荐
谷歌插件之一键关闭同域名页面
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验