好玩的谷歌浏览器插件-自定义谷歌浏览器光标皮肤插件-Chrome 的自定义光标

news2025/3/10 13:38:59

周末没有啥事 看到了一个非常有意思的插件 就是 在使用谷歌浏览器的时候，可以把鼠标的默认样式换一个皮肤。就像下面的这种样子。
在这里插入图片描述
实际谷歌浏览器插件开发对于有前端编程基础的小伙伴 还是比较容易的，实际也是写 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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2312716.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

svn删除所有隐藏.svn文件，文件夹脱离svn控制

svn删除所有隐藏.svn文件，文件夹脱离svn控制

新建一个文件&#xff0c;取名remove-svn-folders.reg&#xff0c;输入如下内容&#xff1a; Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\DeleteSVN] "Delete SVN Folders" [HKEY_LOCAL_MACHINE\SOFTWARE\Class…
阅读更多...
六十天前端强化训练之第十二天之闭包深度解析

六十天前端强化训练之第十二天之闭包深度解析

欢迎来到编程星辰海的博客讲解 目录 第一章&#xff1a;闭包的底层运行机制 1.1 词法环境&#xff08;Lexical Environment&#xff09;的构成JavaScript 引擎通过三个关键组件管理作用域&#xff1a; 1.2 作用域链的创建过程当函数被定义时&#xff1a; 1.3 闭包变量的生命…
阅读更多...
DeepSeek R1-32B医疗大模型的完整微调实战分析（全码版）

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 继承与多态

10.2 继承与多态

文章目录 继承多态 继承 继承的作用是代码复用。派生类自动获得基类的除私有成员外的一切。基类描述一般特性&#xff0c;派生类提供更丰富的属性和行为。在构造派生类时&#xff0c;其基类构造函数先被调用&#xff0c;然后是派生类构造函数。在析构时顺序刚好相反。 // 基类…
阅读更多...
[网络爬虫] 动态网页抓取 — Selenium 元素定位

[网络爬虫] 动态网页抓取 — Selenium 元素定位

&#x1f31f;想系统化学习爬虫技术&#xff1f;看看这个&#xff1a;[数据抓取] Python 网络爬虫 - 学习手册-CSDN博客 在使用 Selenium 时&#xff0c;往往需要先定位到指定元素&#xff0c;然后再执行相应的操作。例如&#xff0c;再向文本输入框中输入文字之前&#xff0c;…
阅读更多...
静态网页的爬虫（以电影天堂为例）

静态网页的爬虫（以电影天堂为例）

一、电影天堂的网址&#xff08;url&#xff09; 电影天堂_免费电影_迅雷电影下载_电影天堂网最好的迅雷电影下载网&#xff0c;分享最新电影&#xff0c;高清电影、综艺、动漫、电视剧等下载&#xff01;https://dydytt.net/index.htm 我们要爬取这个页面上的内容 二、代码…
阅读更多...
Android设备是如何进入休眠的呢？

Android设备是如何进入休眠的呢？

首先我们手机灭屏后&#xff0c;一般需要等一段时间CPU才真正进入休眠。即Android设备屏幕暗下来的时候&#xff0c;并不是立即就进入了休眠模式&#xff1b;当所有唤醒源都处于de-avtive状态后&#xff0c;系统才会进入休眠。在手机功耗中从灭屏开始到CPU进入休眠时间越短&…
阅读更多...
ctfshow做题笔记—栈溢出—pwn65~pwn68

ctfshow做题笔记—栈溢出—pwn65~pwn68

目录 前言 一、pwn65(你是一个好人) 二、pwn66(简单的shellcode&#xff1f;不对劲&#xff0c;十分得有十二分的不对劲) 三、pwn67(32bit nop sled)&#xff08;确实不会&#xff09; 四、pwn68(64bit nop sled) 前言 做起来比较吃力哈哈&#xff0c;自己还是太菜了&…
阅读更多...
JS中的闭包（closures）一种强大但易混淆的概念

JS中的闭包（closures）一种强大但易混淆的概念

JavaScript 中的闭包&#xff08;closures&#xff09;被认为是一种既强大又易混淆的概念。闭包允许函数访问其外部作用域的变量&#xff0c;即使外部函数已执行完毕&#xff0c;这在状态维护和回调函数中非常有用。但其复杂性可能导致开发者的误解&#xff0c;尤其在变量捕获和…
阅读更多...
Element使用

Element使用

Element(美化网页&#xff09; ElementUI的使用注意事项&#xff1a; Element.ui的使用基于Vue环境&#xff0c;于是Element相关组件的使用必须放在Vue对象绑定的视图中去 ElementUI的JS库的引入必须放在vue.js库的后面 <!-- 引入样式 --><link rel"styleshee…
阅读更多...
基于YOLO11深度学习的电瓶车进电梯检测与语音提示系统【python源码+Pyqt5界面+数据集+训练代码】

基于YOLO11深度学习的电瓶车进电梯检测与语音提示系统【python源码+Pyqt5界面+数据集+训练代码】

《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…
阅读更多...
R语言的基础命令及实例操作

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 中&#xff0c;大小写是敏感的&#xff0c;也就是说…
阅读更多...
知识蒸馏综述Knowledge Distillation: A Survey解读

知识蒸馏综述Knowledge Distillation: A Survey解读

论文链接&#xff1a;Knowledge Distillation: A Survey 摘要&#xff1a;近年来&#xff0c;深度神经网络在工业界和学术界都取得了成功&#xff0c;尤其是在计算机视觉任务方面。深度学习的巨大成功主要归功于它能够扩展以对大规模数据进行编码&#xff0c;并且能够处理数十…
阅读更多...
第十五届蓝桥杯省赛电子类单片机学习过程记录（客观题）

第十五届蓝桥杯省赛电子类单片机学习过程记录（客观题）

客观试题： 01．典型的BUCK电源电路包含哪些关键器件（ABCD） A. 电容 B. 二极管 C. 电感 D. MOSFET 解析： 典型的 BUCK 电源电路是一种降压型的直流-直流转换电路，它包含以下关键器件： A.电容：电容在电路中起到滤波的作用。输入电容用于平滑输入电压的波动，减少电源噪声对…
阅读更多...
【c++】平移字符串

【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位&…
阅读更多...
为什么DDPG需要目标网络而A2C不需要？

为什么DDPG需要目标网络而A2C不需要？

在强化学习中&#xff0c;DDPG需要目标网络而A2C不需要的主要原因在于算法架构、更新方式和目标稳定性需求的差异&#xff1a; Q值估计的稳定性需求不同 DDPG的Critic网络需要估计状态-动作值函数 Q ( s , a ) Q(s,a) Q(s,a)&#xff0c;其目标值的计算涉及下一个状态的最大Q值…
阅读更多...
蓝桥杯 C++ b组 统计子矩阵深度解析

蓝桥杯 C++ b组 统计子矩阵深度解析

题目大意&#xff1a;给定一个 NM 的矩阵 A&#xff0c;请你统计有多少个子矩阵 (最小11&#xff0c;最大NM) 满足子矩阵中所有数的和不超过给定的整数 K&#xff1f; 前言&#xff1a;这题很容易想到二维前缀和优化&#xff0c;然后枚举子矩阵&#xff0c;但这样时间复杂度为…
阅读更多...
YOLOv12本地部署教程——42%速度提升，让高效目标检测触手可及

YOLOv12本地部署教程——42%速度提升，让高效目标检测触手可及

YOLOv12 是“你只看一次”&#xff08;You Only Look Once, YOLO&#xff09;系列的最新版本&#xff0c;于 2025 年 2 月发布。它引入了注意力机制&#xff0c;提升了检测精度&#xff0c;同时保持了高效的实时性能。在保持速度的同时&#xff0c;显著提升了检测精度。例如&am…
阅读更多...
认识Event Loop【1】

认识Event Loop【1】

前言 这应该是一个系列文章&#xff0c;因为我觉得Event Loop&#xff08;事件循环&#xff09;是一件很抽象也很重要的一个机制。eventloop这个知识点处于非常杂糅的位置&#xff0c;和很多其他知识&#xff0c;如运行时、浏览器、渲染流程、数据结构、线程等等&#xff0c;也…
阅读更多...
《Linux栈破坏了，如何还原》

《Linux栈破坏了，如何还原》

【栈破坏导读】栈破坏有了解过吗&#xff1f;何为栈破坏&#xff0c;栈破坏了&#xff0c;程序会立刻引发崩溃&#xff0c;我们通过gdb去调试coredump&#xff0c;栈被破坏的栈帧是没法被恢复的&#xff0c;这也给我们调试程序带来很大的困难&#xff0c;那如何还原栈破坏的第一…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023