好玩的谷歌浏览器插件-自定义谷歌浏览器光标皮肤插件-Chrome 的自定义光标
周末没有啥事 看到了一个非常有意思的插件 就是 在使用谷歌浏览器的时候，可以把鼠标的默认样式换一个皮肤。就像下面的这种样子。
实际谷歌浏览器插件开发对于有前端编程基础的小伙伴 还是比较容易的，实际也是写 html css js 。
所以这个插件使用的技术：
html css 和 js 实现。
先看一下 最终实现的样子
大概插件就是这样的，使用方式 在下面选择我们喜欢的图标，然后选中后，点击应用选择 。这个时候我们再使用浏览器的时候 发现我们的鼠标光标 就变了一个皮肤。
周末闲着没事，就简单的也写了一个类似的插件，正好也是练习一下自己的前端技术。 插件功能大概实现了 光标皮肤切换。写完后 简单的测试了一下 ，可以使用。
分享一下代码结构
<!-- 作者：json -->
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="自定义光标皮肤，让您的浏览体验更加个性化"><title>自定义光标皮肤</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}:root {--primary-color: #3498db;--primary-dark: #2980b9;--danger-color: #e74c3c;--danger-dark: #c0392b;--text-color: #333;--text-light: #7f8c8d;--text-dark: #2c3e50;--bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);--card-bg: rgba(255, 255, 255, 0.8);--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);--shadow-hover: 0 8px 15px rgba(0, 0, 0, 0.1);--border-radius: 10px;--transition: all 0.3s ease;}body {width: 360px;min-height: 480px;font-family: 'Microsoft YaHei', sans-serif;background: var(--bg-gradient);color: var(--text-color);padding: 20px;overflow-x: hidden;}.container {display: flex;flex-direction: column;height: 100%;}header {position: sticky;top: 0;z-index: 100;background: var(--bg-gradient);padding-bottom: 15px;margin-bottom: 20px;box-shadow: var(--shadow);border-radius: var(--border-radius);}.header-content {text-align: center;margin-bottom: 15px;}h1 {font-size: 24px;margin-bottom: 10px;color: var(--text-dark);text-shadow: 1px 1px 2px rgba(0,0,0,0.1);}.subtitle {font-size: 14px;color: var(--text-light);margin-bottom: 15px;}.actions {display: flex;justify-content: center;margin-bottom: 10px;}.status {text-align: center;font-size: 14px;color: #27ae60;height: 20px;margin-top: 5px;transition: var(--transition);}.cursor-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 15px;margin-bottom: 20px;padding-top: 5px;}.cursor-item {background-color: var(--card-bg);border-radius: var(--border-radius);padding: 15px;cursor: pointer;transition: var(--transition);display: flex;flex-direction: column;align-items: center;box-shadow: var(--shadow);position: relative;height: 120px; /* 固定高度，确保所有项目大小一致 */justify-content: space-between; /* 确保内容均匀分布 */will-change: transform; /* 优化动画性能 */}.cursor-item:hover {transform: translateY(-5px);box-shadow: var(--shadow-hover);}.cursor-item.active {background-color: rgba(52, 152, 219, 0.2);border: 2px solid var(--primary-color);}.cursor-item.active::after {content: "✓";position: absolute;top: 5px;right: 5px;color: var(--primary-color);font-weight: bold;}.cursor-preview {width: 64px;height: 64px;margin-bottom: 10px;display: flex;align-items: center;justify-content: center;background-color: rgba(255, 255, 255, 0.5);border-radius: 8px;padding: 5px;position: relative;}.cursor-preview img {max-width: 32px; /* 限制最大宽度为32px */max-height: 32px; /* 限制最大高度为32px */width: auto; /* 保持宽高比 */height: auto; /* 保持宽高比 */object-fit: contain; /* 确保图片完全显示 */display: block; /* 消除底部间隙 */image-rendering: pixelated; /* 像素图片更清晰 */image-rendering: -moz-crisp-edges;image-rendering: crisp-edges;}/* 添加放大效果，方便用户查看小图标 */.cursor-preview:hover img {transform: scale(1.5);transition: transform 0.2s ease;}.cursor-name {font-size: 12px;text-align: center;color: var(--text-dark);width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}button {background-color: var(--primary-color);color: white;border: none;padding: 10px 20px;border-radius: 5px;cursor: pointer;font-size: 16px;transition: var(--transition);box-shadow: var(--shadow);}button:hover {background-color: var(--primary-dark);transform: translateY(-2px);box-shadow: var(--shadow-hover);}button:disabled {background-color: #bdc3c7;cursor: not-allowed;transform: none;box-shadow: none;}.reset-btn {background-color: var(--danger-color);margin-left: 10px;}.reset-btn:hover {background-color: var(--danger-dark);}.loading {display: none;text-align: center;margin: 20px 0;}.loading-spinner {border: 4px solid rgba(0, 0, 0, 0.1);border-left-color: var(--primary-color);border-radius: 50%;width: 30px;height: 30px;animation: spin 1s linear infinite;margin: 0 auto;}@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}.empty-state {text-align: center;padding: 40px 20px;color: var(--text-light);}.empty-state p {margin-bottom: 15px;}/* 添加响应式设计 */@media (max-width: 320px) {.cursor-grid {grid-template-columns: repeat(2, 1fr);}}/* 添加暗黑模式支持 */@media (prefers-color-scheme: dark) {:root {--card-bg: rgba(30, 39, 46, 0.8);--text-color: #f5f6fa;--text-light: #dcdde1;--text-dark: #f5f6fa;--bg-gradient: linear-gradient(135deg, #2f3640 0%, #1e272e 100%);--shadow: 0 4px 6px rgba(0, 0, 0, 0.3);--shadow-hover: 0 8px 15px rgba(0, 0, 0, 0.4);}.cursor-preview {background-color: rgba(0, 0, 0, 0.2);}button:disabled {background-color: #4b6584;}}/* 添加无障碍支持 */.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border-width: 0;}/* 键盘导航焦点样式 */.cursor-item:focus-visible {outline: 3px solid var(--primary-color);outline-offset: 2px;}button:focus-visible {outline: 3px solid white;outline-offset: 2px;}</style>
</head>
<body><div class="container"><header><div class="header-content"><h1>自定义光标皮肤</h1><p class="subtitle">选择您喜欢的光标样式，让浏览体验更加个性化</p><p class="subtitle">更多资源：www.wwwoop.com</p></div><div class="actions"><button id="apply-btn" disabled>应用选择</button><button id="reset-btn" class="reset-btn">恢复默认</button></div><div id="status" class="status" aria-live="polite"></div></header><div id="loading" class="loading" aria-hidden="true"><div class="loading-spinner"></div><p class="sr-only">正在加载光标...</p></div><div id="cursor-grid" class="cursor-grid" role="listbox" aria-label="光标选项列表"><!-- 光标选项将通过JavaScript动态加载 --></div><div id="empty-state" class="empty-state" style="display: none;"><p>没有找到光标皮肤</p><p>请确保images文件夹中有光标图片</p></div></div><script src="popup.js"></script>
</body>
</html>
以上就是 html 代码
插件写完后，也装到了自己的谷歌浏览器上测试了一下，可以正常使用。但是不保证是否还有细节性的bug。如果有小伙伴 对这个插件有兴趣，可以拿去玩一玩。
代码完全开源，因为是自己写的插件，所以没有上架到谷歌应用商店，大家拿到插件后，有开发能力的小伙伴可以自由发挥。直接安装使用也是可以的。
https://wwwoop.com/home/Index/projectInfo?goodsId=56&typeParam=1&subKey=0
相关文章：
好玩的谷歌浏览器插件-自定义谷歌浏览器光标皮肤插件-Chrome 的自定义光标
周末没有啥事 看到了一个非常有意思的插件 就是 在使用谷歌浏览器的时候，可以把鼠标的默认样式换一个皮肤。就像下面的这种样子。 实际谷歌浏览器插件开发对于有前端编程基础的小伙伴 还是比较容易的，实际也是写 html css js 。 所以这个插件使用的技术…...
svn删除所有隐藏.svn文件，文件夹脱离svn控制
新建一个文件，取名remove-svn-folders.reg，输入如下内容： Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\DeleteSVN] "Delete SVN Folders" [HKEY_LOCAL_MACHINE\SOFTWARE\Class…...
六十天前端强化训练之第十二天之闭包深度解析
欢迎来到编程星辰海的博客讲解 目录 第一章：闭包的底层运行机制 1.1 词法环境（Lexical Environment）的构成JavaScript 引擎通过三个关键组件管理作用域： 1.2 作用域链的创建过程当函数被定义时： 1.3 闭包变量的生命…...
DeepSeek R1-32B医疗大模型的完整微调实战分析（全码版）
DeepSeek R1-32B微调实战指南 ├── 1. 环境准备 │ ├── 1.1 硬件配置 │ │ ├─ 全参数微调：4*A100 80GB │ │ └─ LoRA微调：单卡24GB │ ├── 1.2 软件依赖 │ │ ├─ PyTorch 2.1.2+CUDA │ │ └─ Unsloth/ColossalAI │ └── 1.3 模…...
10.2 继承与多态
文章目录 继承多态 继承 继承的作用是代码复用。派生类自动获得基类的除私有成员外的一切。基类描述一般特性，派生类提供更丰富的属性和行为。在构造派生类时，其基类构造函数先被调用，然后是派生类构造函数。在析构时顺序刚好相反。 // 基类…...
[网络爬虫] 动态网页抓取 — Selenium 元素定位
🌟想系统化学习爬虫技术？看看这个：[数据抓取] Python 网络爬虫 - 学习手册-CSDN博客 在使用 Selenium 时，往往需要先定位到指定元素，然后再执行相应的操作。例如，再向文本输入框中输入文字之前，…...
静态网页的爬虫（以电影天堂为例）
一、电影天堂的网址（url） 电影天堂_免费电影_迅雷电影下载_电影天堂网最好的迅雷电影下载网，分享最新电影，高清电影、综艺、动漫、电视剧等下载！https://dydytt.net/index.htm 我们要爬取这个页面上的内容 二、代码…...
将图片存储至阿里云 OSS
将图片存储至阿里云 OSS 一、概述 在项目开发中，我们常常需要处理用户上传的图片。本文将介绍如何使用前端的 el-upload 组件将照片上传到后端，后端再将照片存储到阿里云 OSS，并最终返回图片的 URL 给前端。 二、前端实现 1. 安装依赖 确…...
Android设备是如何进入休眠的呢？
首先我们手机灭屏后，一般需要等一段时间CPU才真正进入休眠。即Android设备屏幕暗下来的时候，并不是立即就进入了休眠模式；当所有唤醒源都处于de-avtive状态后，系统才会进入休眠。在手机功耗中从灭屏开始到CPU进入休眠时间越短&…...
ctfshow做题笔记—栈溢出—pwn65~pwn68
目录 前言 一、pwn65(你是一个好人) 二、pwn66(简单的shellcode？不对劲，十分得有十二分的不对劲) 三、pwn67(32bit nop sled)（确实不会） 四、pwn68(64bit nop sled) 前言 做起来比较吃力哈哈，自己还是太菜了&…...
高效处理 List＜T＞ 集合：更新、查找与优化技巧
引言 在日常开发中，List<T> 是我们最常用的数据结构之一。无论是批量更新数据、查找特定项还是进行复杂的集合操作，掌握 List<T> 的高级用法可以显著提高代码的效率和可读性。本文将详细介绍如何使用 List<T> 进行批量更新、查找匹配项以及优化性能的方法…...
Java基础系列：深入解析final与static关键字的奥秘与避坑指南
目录 一、final关键字的四重境界 1. 修饰常量（成员变量/局部变量） 2. 修饰方法（禁止重写） 3. 修饰类（禁止继承） 4. 并发控制（内存屏障） 二、static关键字的四维空间 1. 静态变…...
django各种mixin用法
在 Django 中，Mixin 是一种用于扩展类功能的设计模式。通过 Mixin，可以在不修改原有类的情况下，为其添加新的方法或属性。Django 中的 Mixin 广泛应用于视图（View）、表单（Form）、模型（Model）等组件中。以下是 Django 中常见 Mixin 的用法和示例： 一、视图（View）中的…...
JS中的闭包（closures）一种强大但易混淆的概念
JavaScript 中的闭包（closures）被认为是一种既强大又易混淆的概念。闭包允许函数访问其外部作用域的变量，即使外部函数已执行完毕，这在状态维护和回调函数中非常有用。但其复杂性可能导致开发者的误解，尤其在变量捕获和…...
Element使用
Element(美化网页） ElementUI的使用注意事项： Element.ui的使用基于Vue环境，于是Element相关组件的使用必须放在Vue对象绑定的视图中去 ElementUI的JS库的引入必须放在vue.js库的后面 <!-- 引入样式 --><link rel"styleshee…...
基于YOLO11深度学习的电瓶车进电梯检测与语音提示系统【python源码+Pyqt5界面+数据集+训练代码】
《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...
R语言的基础命令及实例操作
> T & F [1] FALSE > T & T [1] TRUE > T | F [1] TRUE > F | F [1] FALSE > a <- c(T,F,T) > b <- c(F,F,T) > a & b [1] FALSE FALSE TRUE > a | b [1] TRUE FALSE TRUE 在 R 中，大小写是敏感的，也就是说…...
AI视频生成工具清单（附网址与免费说明）
以下是一份详细的AI视频制作网站总结清单，包含免费/付费信息及核心功能说明： AI视频生成工具清单（附网址与免费说明） 1. Synthesia 网址：https://www.synthesia.io是否免费：免费试用（生成视频…...
知识蒸馏综述Knowledge Distillation: A Survey解读
论文链接：Knowledge Distillation: A Survey 摘要：近年来，深度神经网络在工业界和学术界都取得了成功，尤其是在计算机视觉任务方面。深度学习的巨大成功主要归功于它能够扩展以对大规模数据进行编码，并且能够处理数十…...
第十五届蓝桥杯省赛电子类单片机学习过程记录（客观题）
客观试题： 01．典型的BUCK电源电路包含哪些关键器件（ABCD） A. 电容 B. 二极管 C. 电感 D. MOSFET 解析： 典型的 BUCK 电源电路是一种降压型的直流-直流转换电路，它包含以下关键器件： A.电容：电容在电路中起到滤波的作用。输入电容用于平滑输入电压的波动，减少电源噪声对…...
【C++】：STL详解 —— 红黑树封装map和set
目录 红黑树的源代码 正向迭代器的代码 反向迭代器的代码 set的模拟实现 map的模拟实现 红黑树的源代码 #pragma once #include <iostream>using namespace std; // set ->key // map ->key/value// set ->key // map ->key/valueenum Colour {RED,BLAC…...
【QWEN】机器人控制器的控制周期越短精度越高吗
好的，用户问的是“机器人控制器的控制周期越短精度越高吗”。我需要根据提供的知识库内容来回答这个问题。首先，我得回忆一下知识库里的相关信息。 知识库里有几篇相关的文章。比如，[3]提到控制周期越短，控制性能的上限越高&…...
使用数据库和缓存的时候，是如何解决数据不一致的问题的？
1.缓存更新策略 1.1. 缓存旁路模式（Cache Aside） 在应用里负责管理缓存，读取时先查缓存，如果命中了则返回缓存，如果未命中就查询数据库，然后返回缓存，返回缓存的同时把数据给写入缓存中。更新…...
【c++】平移字符串
说明 实现字符串的左移与右移 示例代码 #include <iostream> #include <string> using namespace std;int main() {string str1 "12345";//左移2位string str2 str1.substr(2) str1.substr(0, 2);cout << str2 << endl;//右移2位&…...
基于Spring Boot的多级缓存架构实现
基于Spring Boot的多级缓存架构实现 以下是一个基于Spring Boot的多级缓存架构实现示例 多级缓存架构实现方案 1. 依赖配置（pom.xml） <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-star…...
为什么DDPG需要目标网络而A2C不需要？
在强化学习中，DDPG需要目标网络而A2C不需要的主要原因在于算法架构、更新方式和目标稳定性需求的差异： Q值估计的稳定性需求不同 DDPG的Critic网络需要估计状态-动作值函数 Q ( s , a ) Q(s,a) Q(s,a)，其目标值的计算涉及下一个状态的最大Q值…...
蓝桥杯 C++ b组 统计子矩阵深度解析
题目大意：给定一个 NM 的矩阵 A，请你统计有多少个子矩阵 (最小11，最大NM) 满足子矩阵中所有数的和不超过给定的整数 K？ 前言：这题很容易想到二维前缀和优化，然后枚举子矩阵，但这样时间复杂度为…...
YOLOv12本地部署教程——42%速度提升，让高效目标检测触手可及
YOLOv12 是“你只看一次”（You Only Look Once, YOLO）系列的最新版本，于 2025 年 2 月发布。它引入了注意力机制，提升了检测精度，同时保持了高效的实时性能。在保持速度的同时，显著提升了检测精度。例如&am…...
每天五分钟深度学习PyTorch：向更深的卷积神经网络挑战的ResNet
本文重点 ResNet大名鼎鼎，它是由何恺明团队设计的，它获取了2015年ImageNet冠军，它很好的解决了当神经网络层数过多出现的难以训练的问题，它创造性的设计了跳跃连接的方式，使得卷积神经网络的层数出现了大幅度提升，设置可以达到上千层，可以说resnet对于网络模型的设计具…...
C++11新特性 11.基于范围的for循环
一.简介 基本概念： 在 C 中，基于范围的 for 循环（Range-based for loop）是一种简化容器遍历的语法糖，适用于所有支持 begin() 和 end() 的容器（如 vector、map、array 等）。以下是其核心用法和…...