当前位置： 首页 > news >正文

开发 Chrome 扩展中的侧边栏图标设置实录（Manifest V3）

news 来源：原创 2025/8/16 2:59:29

在开发自己的 Chrome 扩展 Pocket Bookmarks（口袋书签） 的过程中，我遇到了一个看似简单却颇具挑战的问题：如何在扩展的侧边栏显示自定义图标？

这篇文章记录一下我踩过的坑，以及最终的解决方案。
这里说的侧边栏图标，即是下图中红框部分。
在这里插入图片描述

🎯 需求：更换侧边栏图标

在扩展的 UI 中，左上角默认显示的是一枚灰色的字母图标（即扩展名的首字母），这对一个精心设计的产品来说太简陋了。我希望它变成自定义的卡通袋鼠图标，以匹配品牌形象。

💡 初步尝试：在 manifest.json 中添加 sidebar_action

我首先参考了 Chrome 早期支持的 sidebar_action 配置：

"sidebar_action": {"default_title": "Pocket Bookmarks","default_icon": {"16": "icons/icon-16.png","32": "icons/icon-32.png","48": "icons/icon-48.png","128": "icons/icon-128.png"},"default_panel": "sidebar.html"
}

但经过实际测试，图标没有任何变化。查阅资料后发现，sidebar_action 是早期提案，现在基本废弃，且仅在部分测试通道中有效。

✅ 正确做法：设置扩展的主图标

Chrome 的侧边栏图标实际上取决于扩展的整体图标，即 manifest 中的 "icons" 字段：

"icons": {"16": "icons/icon-16.png","32": "icons/icon-32.png","48": "icons/icon-48.png","128": "icons/icon-128.png"
}

这不是用于 popup 或 action 的 icon，而是整个扩展打包上传到 Chrome Web Store 或加载到浏览器时显示的图标来源。

同时建议保留 action.default_icon，这样扩展工具栏也能显示一致的图标。

🧪 图标不显示的常见原因

在折腾过程中，我也踩了几个小坑：

问题原因解决办法
图标不显示图标尺寸不对或路径错误确保是 PNG 格式，分辨率为 16×16、32×32、48×48、128×128
图标变成灰色首字母没有设置 icons 字段在 manifest 顶层加上 icons
图标显示空白使用 SVG 或透明度错误推荐使用透明背景的 PNG，避免纯白图标在白色界面中“消失”

🧰 最终 manifest 配置

{"manifest_version": 3,"name": "Pocket Bookmarks","version": "1.0","description": "口袋书签，精准分类，高效导航。","action": {"default_popup": "popup.html","default_icon": {"16": "icons/icon-16.png","32": "icons/icon-32.png","48": "icons/icon-48.png","128": "icons/icon-128.png"}},"icons": {"16": "icons/icon-16.png","32": "icons/icon-32.png","48": "icons/icon-48.png","128": "icons/icon-128.png"},"side_panel": {"default_path": "sidebar.html"},...
}

✨ 小结

虽然侧边栏图标设置看似只是 manifest 中的几行配置，但实际上背后涉及：

  • Chrome 扩展图标的层级机制
  • Manifest V3 对旧 API 的兼容性问题
  • 浏览器界面的显示规则

最终，记得：设置扩展的 icons 字段，才是更换侧边栏图标的正确打开方式。

📌 参考链接

  • Chrome Extensions Manifest V3 官方文档
  • side_panel API 简介

插件正在开发中，敬请期待。

pc端和移动端体验效果：

口袋书签

点击上面面链接，可以体验实现效果。另外可以免费使用新一代跨平台书签系统：

  • 跨平台
  • AI助力
  • 自动抓取目前连接的关键数据
  • 一级分类，多标签标注
  • 收藏统计，有图有数据
  • 快捷访问，多种展示模式
  • 轻松实现全局分享和按分类分享
  • 常用top10、按分类，按标签快捷查
  • 按访问数和创建时间排序

相关文章：

开发 Chrome 扩展中的侧边栏图标设置实录（Manifest V3）

在开发自己的 Chrome 扩展 Pocket Bookmarks（口袋书签） 的过程中，我遇到了一个看似简单却颇具挑战的问题：如何在扩展的侧边栏显示自定义图标？ 这篇文章记录一下我踩过的坑，以及最终的解决方案。 这里说的侧…...

编程日记 2025/8/16 2:59:29

Baumer工业相机堡盟工业相机如何通过BGAPI SDK在Linux系统下设置多个USB相机（C++）

Baumer工业相机堡盟工业相机如何通过BGAPI SDK在Linux系统下设置多个USB相机（C） Baumer工业相机Baumer工业相机BGAPI SDK在Linux系统下设置USB相机的技术背景Linux系统内核 USB 模块内存的修改内存限制的确定使用 GRUB 引导加载程序修改内存限制使用 U-B…...

编程日记 2025/8/16 2:59:27

zst-2001 历年真题 知识产权

知识产权 - 第1题 发表权有时间限制 其他下面3个没有 c 知识产权 - 第2题 bd是财产权 c 知识产权 - 第3题 b 知识产权 - 第4题 d 知识产权 - 第5题 d 知识产权 - 第6题 d 知识产权 - 第7题 d 知识产权 - 第8题 b是国务院发布的 d没有复制权…...

编程日记 2025/8/16 2:59:26

设备与驱动：UART设备

大部分的嵌入式系统都包括一些I/O设备，例如仪器上的数据显示屏、工业设备上的串口通信、数据采集设备上模拟数据采样、用于保存数据的Flash/SD卡以及网络设备上的以太网接口等，都是嵌入式系统中容易找到的I/O设备例子。 本专栏主要是分享RT-Thread是如何…...

编程日记 2025/8/16 2:59:24

Linux 服务器静态 IP 配置初始化指南

✅ 第一步：确认网络管理方式 运行以下命令判断系统使用的网络管理服务： # 检查 NetworkManager 是否活跃 systemctl is-active NetworkManager# 检查 network（旧服务）是否活跃 systemctl is-active network或者检查配置路径&…...

编程日记 2025/8/16 2:59:22

【ROS2】Nav2源码之行为树定义、创建、加载

1、简述 在 Navigation2 里，机器人的导航是一项复杂的任务，包含路径规划、避障、恢复机制等多个子任务。行为树能把这些子任务组织成清晰的层次结构，让机器人可以依据不同的情况做出合理的决策。例如，当机器人在导航途中碰到障碍物时，行为树可以决定是重新规划路径、尝试…...

编程日记 2025/8/16 2:59:20

Redis持久化存储介质评估：NFS与Ceph的适用性分析

#作者：朱雷 文章目录 一、背景二、Redis持久化的必要性与影响1. 持久化的必要性2. 性能与稳定性问题 三、NFS作为持久化存储介质的问题1. 性能瓶颈2. 数据一致性问题3. 存储服务单点故障4. 高延迟影响持久化效率.5. 吞吐量瓶颈 四、Ceph作为持久化存储介质的问题1.…...

编程日记 2025/8/16 2:59:18

如何统一修改word中所有英文字母的字体格式

1.需求分析 我想让整篇论文中的所有英文字母格式都修改为Time New Roman格式。 2.直观操作流程 点击左上角开始 --> 点击替换 --> 点击更多 --> 点击特殊格式 --> 选择查找内容为任意字母(Y) --> 将光标点到替换内容 --> 点击格式 --> 点击字体 --> …...

编程日记 2025/8/16 1:17:24

服务器上机用到的设备

服务器上机通常需要以下硬件设备： 服务器主机： CPU：选择高性能的多核处理器，如英特尔至强（Xeon）系列或AMD EPYC系列，以满足高并发和多任务处理需求。 内存（RAM）&#xf…...

编程日记 2025/8/16 2:59:15

【Java ee 初阶】多线程（8）

Synchronized优化： 一、锁升级 锁升级时一个自适应的过程，自适应的过程如下： 在Java编程中，有一部分的人不一定能正确地使用锁，因此，Java的设计者为了让大家使用锁的门槛更低，就在synchronize…...

编程日记 2025/8/16 2:59:13

数字孪生大屏UI设计

近年来,5G、大数据、云计算等新一代信息技术的蓬勃发展,计算机仿真技术与拟真软件的成熟运用,让数字孪生技术开始蔓延渗透到“互联网”相关的产业中。数字孪生大屏给予了可视化的数据直观窗口,其中展现的动态映射与实时数据让业务流转效率得到了有效提升,管理、运营和决策都能高…...

编程日记 2025/8/16 2:59:11

【Java ee 初阶】多线程（9）上

一、信号量Semaphore 本质上就是一个计数器，描述了一种“可用资源”的个数 申请资源（P操作）：使得计数器-1 释放资源（V操作）：使得计数器1 如果计数器为0了，继续申请资源&#xff…...

编程日记 2025/8/16 2:59:09

eclipse开发环境中缺少JavaEE组件如何安装

新版本eclipse去掉server了吗？在最近新版本的eclipse里面，确实找不到server模块了，无法配置tomcat等web服务器插件了。我们需要自己手工安装一下javaEE组件才行。 1 1：找到自己当前eclipse版本号码 2：去这个地址&…...

编程日记 2025/8/16 2:59:07

stm32之ADC

目录 1.简介2.逐次逼近型ADC3.基本结构4.输入通道5.转换模式6.触发控制7.数据对齐8.转换时间7.校准10.ADC外围电路11.api和结构体11.1 结构体11.2 api1. ADC_DeInit2. ADC_Init3. ADC_StructInit4. ADC_Cmd5. ADC_DMACmd6. ADC_ITConfig7. ADC_ResetCalibration8. ADC_GetReset…...

编程日记 2025/8/16 2:59:05

从电话到V信语音：一款App实现全场景社交脱身

作为一名资深社恐人士，我深知那些无法脱身的社交场合有多煎熬。上周参加一个行业聚会，面对滔滔不绝的陌生人，我如坐针毡却又找不到合适的离场理由。这时我突然想起之前朋友推荐的一款神器应用，它让我得以优雅脱身。今天就来分享这…...

编程日记 2025/8/16 2:59:03

conda init before conda activate

先conda init 然后退出命令窗口，再重新打开命令窗口再conda activate...

编程日记 2025/8/16 2:59:01

MySQL数据库高可用（MHA）详细方案与部署教程

一：MHA简介 核心功能 二：MHA工作原理 三：MHA组件 四：MHA 架构与工具 MHA架构 Manager关键工具 Node工具 五：工作原理与流程 1: 故障检测 2: 故障切换（Failover） 3 : 切换模式 六&a…...

编程日记 2025/8/16 2:58:59

《Python星球日记》 第44天: 线性回归与逻辑回归

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏：《Python星球日记》，限时特价订阅中ing 目录 一、引言：回归方法的重要性二、线性回归原理与损失函数1. 线性回归的数学模型2. 损失函数：衡量…...

编程日记 2025/8/16 17:59:55

Flutter TabBar / TabBarView 详解

目录 一、引言 二、基本用法 代码解析 三、主要属性 3.1 TabBar 3.2 TabBarView 四、进阶定制：突破默认样式 4.1 视觉样式深度定制 4.2 自定义指示器与标签 4.3 动态标签管理 五、工程实践关键技巧 5.1 性能优化方案 5.2 复杂手势处理 5.3 响应式布局…...

编程日记 2025/8/16 2:58:56

001 环境搭建

🦄 个人主页: 小米里的大麦-CSDN博客 🎏 所属专栏: Linux_小米里的大麦的博客-CSDN博客 🎁 GitHub主页: 小米里的大麦的 GitHub ⚙️ 操作环境: Visual Studio 2022 文章目录 Linux 环境搭建全解析：从历史到实践一、Linux 的起源与…...

编程日记 2025/8/16 2:58:54

Spark-core-RDD入门

RDD基本概念 Resilient Distributed Dataset 叫做弹性分布式数据集，是Spark中最基本的数据抽象，是分布式计算的实现载体，代表一个不可变，可分区，里面的元素并行计算的集合。 - Dataset： 一个数据集合&…...

编程日记 2025/8/16 2:58:52

在scala中，转换算子和行动算子有什么区别

在Scala结合Spark编程中，转换算子（Transformation）和行动算子（Action）有以下区别： 执行机制 **转换算子**： 具有惰性求值（延迟计算）特性 。它对RDD（弹性分布…...

编程日记 2025/8/16 2:58:50

六级阅读---2024.12 卷一 仔细阅读1

文章 Imagine youre an alien sent to Earth to document the behaviour of the mammals inhabiting the planet. You stumble into a movie theatre thats showing the latest Hollywood horror film. Several dozen humans are gathered together in a dark, undercoated r…...

编程日记 2025/8/16 2:58:49

驱动开发硬核特训 · 专题篇：Vivante GPU 与 DRM 图形显示体系全解析（i.MX8MP 平台实战）

视频教程请关注 B 站：“嵌入式Jerry”。 一、背景导读：GPU 与 DRM 到底谁负责“显示”？ 在嵌入式 Linux 图形系统中，“画面怎么显示出来”的问题，表面看似简单，实则涉及多个内核子系统与用户态组件的协同&…...

编程日记 2025/8/16 2:58:47

智慧医疗时代下的医疗设备智能控费系统解决方案

—以科技赋能医疗控费，构建精细化管理新生态 一、行业背景与现存痛点 （一）政策驱动与行业挑战 随着DRG/DIP支付改革全面落地、医保基金监管趋严，医疗机构面临“提质增效”与“成本管控”的双重压力。国家卫健委数据显示&#x…...

编程日记 2025/8/16 17:53:17

软件设计师2025

笔记链接 第5章：软件工程基础知识 第6章：结构化开发方法 第10章：网络和信息安全基础知识...

编程日记 2025/8/16 2:58:43

Umi+React+Xrender+Hsf项目开发总结

一、菜单路由配置 1.umirc.ts 中的路由配置 .umirc.ts 文件是 UmiJS 框架中的一个配置文件，用于配置应用的全局设置，包括但不限于路由、插件、样式等。 import { defineConfig } from umi; import config from ./def/config;export default defineCon…...

编程日记 2025/8/16 2:58:42

【软件设计师：数据结构】1.数据结构基础（一）

一 线性表 1.线性表定义 线性表是n个元素的有限序列，通常记为(a1，a2，…，an)。 特点： 存在惟一的表头和表尾。除了表头外，表中的每一个元素均只有惟一的直接前驱。除了表尾外，表中的每一个元素均只有惟一的直接后继。2.线性表的存储结构 (1)顺序存储 是用一组地址连续…...

编程日记 2025/8/16 2:58:40

linux_进程地址空间（虚拟地址空间）

一、进程地址空间是什么&#xff1f; 先看这样一个具体的例子 #include<stdlib.h> #include <stdio.h> #include<unistd.h> int main() {int a1;pid_t idfork();while(1){if(id0){printf("i am child,pid:%d,ppid:%d,a:%d ,&a:%p\n",getpid(…...

编程日记 2025/8/16 2:58:38

计操第四章存储管理

地址再定位...

编程日记 2025/8/16 2:58:36

尚硅谷-硅谷甄选项目记录

一、Vue3 1 基础配置 1.1 路径别名 vite.config.ts import { defineConfig } from vite import vue from vitejs/plugin-vue// 引入path&#xff0c;node提供的模块&#xff0c;可以获取文件或文件夹的路径 import path from pathexport default defineConfig({plugins: […...

编程日记 2025/8/16 2:58:35

c# LINQ-Query01

文章目录 查询数据源标准查询分两类即时查询已推迟流式处理非流式处理分类表聚合Aggregate<TSource,TAccumulate,TResult>(IEnumerable<TSource>, TAccumulate, Func<TAccumulate,TSource,TAccumulate>, Func<TAccumulate,TResult>)Aggregate<TSour…...

编程日记 2025/8/16 2:58:33

Vue3渲染引擎：虚拟DOM与响应式原理

Vue3渲染引擎&#xff1a;虚拟DOM与响应式原理 在当今的前端开发中&#xff0c;Vue.js作为一种流行的JavaScript框架&#xff0c;经常被用来构建用户界面。而Vue.js 3作为其最新版本&#xff0c;在性能和功能上进行了许多优化和改进。其中&#xff0c;Vue3渲染引擎的核心原理—…...

编程日记 2025/8/15 23:21:32

[dify]官方模板DeepResearch工作流学习笔记

一、功能 根据用户输入的主题进行多轮搜索并生成综合报告 1、流程分析 1.1 初始阶段 Start节点&#xff1a;接收用户输入的"depth"参数&#xff0c;决定搜索的深度/轮数 参数可以不填&#xff0c;不填的时候取默认值3 Create Array节点&#xff1a;根据depth参数…...

编程日记 2025/8/16 2:58:29

大模型系列（四）--- GPT2: Language Models are Unsupervised Multitask Learners​

论文链接&#xff1a; Language Models are Unsupervised Multitask Learners 点评&#xff1a; GPT-2采用了与GPT-1类似的架构&#xff0c;将参数规模增加到了15亿&#xff0c;并使用大规模的网页数据集WebText 进行训练。正如GPT-2 的论文所述&#xff0c;它旨在通过无监督语…...

编程日记 2025/8/16 1:17:51

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（15）：何と どういう

日语学习-日语知识点小记-构建基础-JLPT-N4阶段&#xff08;15&#xff09;&#xff1a;何と &どういう 1、前言&#xff08;1&#xff09;情况说明&#xff08;2&#xff09;工程师的信仰 2、知识点&#xff08;1&#xff09;かもしれません　&#xff06;　&#xff5e;…...

编程日记 2025/8/16 1:27:11

基于英特尔 RealSense D455 结构光相机实现裂缝尺寸以及深度测量

目录 一&#xff0c;相机参数规格 二&#xff0c;结合YOLO实例分割实现裂缝尺寸以及深度测量 2.1 应用场景 2.2 实现流程 2.3 效果展示 2.4 精度验证 2.5 实物裂缝尺寸以及深度测量效果展示 一&#xff0c;相机参数规格 英特尔 RealSense D455 是英特尔 RealSense D400 系…...

编程日记 2025/8/16 2:58:27

利用并行处理提高LabVIEW程序执行速度

在 LabVIEW 编程中&#xff0c;提升程序执行速度是优化系统性能的关键&#xff0c;而并行处理技术则是实现这一目标的有力武器。通过合理运用并行处理&#xff0c;不仅能加快程序运行&#xff0c;还能增强系统的稳定性和响应能力。下面将结合实际案例&#xff0c;深入探讨如何利…...

编程日记 2025/8/16 2:58:25

C++并发编程完全指南：从基础到实践

在当今多核处理器普及的时代&#xff0c;充分利用硬件并发能力已成为高性能编程的关键。C11引入的现代并发编程支持使得开发者能够以标准化、可移植的方式编写多线程程序。本文将全面介绍C并发编程的各个方面&#xff0c;从基础概念到实际应用&#xff0c;帮助您掌握这一重要技…...

编程日记 2025/8/16 2:58:23

vue3 element-plus 输入框回车跳转页面问题处理

问题描述&#xff1a; 当页面搜索条件只有一个的情况下&#xff0c;输入框不管有没有值&#xff0c;回车后会跳转页面 解决办法&#xff0c;给表单添加 submit.prevent <el-form ref"ruleForm" :model"search" label-width"120px" class&qu…...

编程日记 2025/8/15 21:16:25

从0开始学习大模型--Day03--Agent规划与记忆

规划&#xff08;planning&#xff09; 规划&#xff0c;可以为理解观察和思考。如果用人类来类比&#xff0c;当我们接到一个任务&#xff0c;我们的思维模式可能会像下面这样: 1、首先会思考怎么完成这个任务。 2、然后会审视手头上所拥有的工具&#xff0c;以及如何使用这…...

编程日记 2025/8/16 17:55:58

DevExpressWinForms-AlertControl-使用教程

文章目录 AlertControl-使用教程一、将 AlertControl 添加到 Form二、编辑 AlertControl 的 HtmlTemplateHTML Template Editor介绍编辑HTML Template 三、使用AlertControl弹出AlertAlert中的按钮事件获取 Alert 标题等信息向Alert传递参数 总结源码 AlertControl-使用教程 一…...

编程日记 2025/8/16 2:58:20

配电站室智能巡检：机器人 VS 固定摄像头，谁更胜一筹？

在配电站室巡检领域&#xff0c;传统人工巡检正逐渐被智能化手段取代。其中&#xff0c;机器人巡检与固定摄像头巡检成为两大热门选择。那么&#xff0c;它们究竟谁更胜一筹&#xff1f; 一、机器人巡检与固定摄像头巡检的对比 目前人工巡检工作主要以查看表计&#xff0c;设…...

编程日记 2025/8/16 18:00:15

脑图谱：脑机接口的必由之路——技术突破与产业转化的系统性思考

一、三维发育小鼠大脑图谱框架（DevCCF） 1. 技术原理与核心创新 DevCCF框架由宾夕法尼亚州立大学团队主导开发，其技术突破体现在多模态数据融合与跨尺度分析能力的革新： 多模态成像整合：采用高分辨率MRI（空间分辨率50-100μm）捕捉全脑宏观结构动态变化，结合光片荧光显…...

编程日记 2025/8/16 2:58:16

【网络编程】二、UDP网络套接字编程详解

文章目录 前言Ⅰ. UDP服务端一、服务器创建流程二、创建套接字 -- socketsocket 属于什么类型的接口❓❓❓socket 是被谁调用的❓❓❓socket 底层做了什么❓❓❓和其函数返回值有没有什么关系❓❓❓三、绑定对应端口号、IP地址到套接字 -- bind四、数据的发送和接收 -- `sendto…...

编程日记 2025/8/16 2:58:15

缓存替换算法与存储器管理的分页、分段、段页式管理联系

缓存替换算法与存储器管理的分页、分段、段页式管理在目标和机制上存在相似性&#xff0c;均涉及高效资源分配和地址映射&#xff0c;但应用层级和具体场景不同。以下是它们的联系与区别分析&#xff1a; 1. 核心联系&#xff1a;资源管理的共性 替换策略的必要性 无论是缓存&a…...

编程日记 2025/8/16 2:58:13

AI大模型基础设施：NVIDIA GPU和AMD MI300系列的区别

本文将从架构设计、性能、内存、功耗、软件生态、价格与性价比、供应链与市场表现等多个维度对比英伟达的GPU&#xff08;以H100为代表&#xff09;和AMD的Instinct MI300系列处理器&#xff08;以MI300X GPU和MI300A APU为主&#xff09;。以下是详细分析&#xff1a; 1. 架构…...

编程日记 2025/8/16 5:46:43

基于Matlab实现耦合模理论仿真程序

耦合模理论&#xff08;Coupled Mode Theory&#xff0c;简称CMT&#xff09;是一种广泛应用于光子学、微波工程和电子学领域的理论框架&#xff0c;用于分析和理解多模系统的相互作用。 耦合模理论主要研究两个或多个模式之间的能量交换&#xff0c;这些模式可以是电磁波、声…...

编程日记 2025/8/16 5:46:40

图片文件转base64存储在数据库

以下是将文件转换为Base64编码字符串的Java代码&#xff1a; import java.io.File; import java.io.FileInputStream; import java.io.IOException; import java.util.Base64;public class ImageToBase64 {/*** 将图片文件转换为Base64字符串* param filePath 图片文件路径* r…...

编程日记 2025/8/15 22:17:46

我的世界云端服务器具体是指什么？

我的世界云端服务器是指一种基于互联网的多人游戏服务器&#xff0c;将游戏服务器运行在云平台上&#xff0c;而不是在本地计算机中&#xff0c;这使用户不需要考虑自身电脑的性能和网络稳定性&#xff0c;只需要通过网络连接到云端服务器&#xff0c;就可以享受到顺畅的游戏体…...

编程日记 2025/8/16 5:46:36