她說想要浪漫，我把瀏覽器滑鼠換成了柴犬，點一下就有煙火（附源碼）

她說想要浪漫，我把瀏覽器滑鼠換成了柴犬，點一下就有煙花（附原始碼）

昨天下班前，女朋友給我甩了個柴犬表情包：能不能把我的滑鼠變成它？最好點一下還能「啪」一下冒煙花。她說得挺自然，我聽著只想笑：這不就是我的主場嗎。於是我關了外賣，開了編輯器，直接開幹一個Chrome擴展，先把滑鼠換成小柴犬，再加一手彩色煙花。第二天她用上了，第一句話就是：也太治癒了吧！而我更開心的是——不到一百行就搞定。

先看效果：滑鼠樣式變成柴犬，點擊有粒子動效

柴犬滑鼠演示.gif

需求分析：

隨處可用：在任何網頁都生效，打開即用，無需手動注入。
不打擾互動：可點擊元素仍是「手形」，輸入框仍是「文本光標」，不要因為可愛影響效率。
輕量不卡頓：粒子數量適中，淡出動畫自然，不能拖累頁面性能。
好上手：解壓即裝，不需要複雜配置。

專案結構

shiba-cursor
├── manifest.json      # 擴展的"身份證"
├── content.js         # 內容腳本（替換光標 + 粒子動效）
└── mouse.png          # 柴犬滑鼠樣式圖

檔案說明：

manifest.json：擴展身份信息
content.js：處理替換光標 + 粒子動效
mouse.png：柴犬小圖標

🚀 瀏覽專案的完整程式碼可以點擊這裡 github.com/Teernage/sh…，如果對你有幫助歡迎Star。

手把手實現

第一步：創建專案檔案

創建資料夾 shiba-cursor
創建manifest.json檔案

{
  "manifest_version": 3,
  "name": "滑鼠樣式",
  "version": "1.0",
  "description": "自動應用自定義滑鼠樣式",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "run_at": "document_end"
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["mouse.png"],
      "matches": ["<all_urls>"]
    }
  ]
}

創建content.js檔案

(function () {
  const iconUrl = chrome.runtime.getURL('mouse.png');
  const body = document.body;

  // 注入樣式
  const style = document.createElement('style');
  style.textContent = `
    /* 預設滑鼠替換為柴犬 */
    * {
      cursor: url('${iconUrl}') 0 0, auto !important;
    }
    /* 可點擊元素恢復原生手形指標 */
    a, button, [role="button"], [onclick], [role="link"],
    input[type="submit"], input[type="button"], input[type="reset"], input[type="image"],
    select, option, label[for],
    .btn, .button, .clickable, .link, .pointer,
    [tabindex]:not([tabindex="-1"]),
    summary, details > summary,
    [data-toggle], [data-click], [data-action] {
      cursor: pointer !important;
    }
    /* 文本輸入恢復原生文本光標 */
    input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]), 
    textarea, [contenteditable="true"], [contenteditable=""],
    .text-input, .input-field {
      cursor: text !important;
    }
    /* 特殊輸入類型保持預設樣式 */
    input[type="checkbox"], input[type="radio"], input[type="file"], 
    input[type="range"], input[type="color"] {
      cursor: default !important;
    }
    /* 禁用元素保持預設樣式 */
    [disabled], .disabled {
      cursor: not-allowed !important;
    }
    /* 調整大小元素 */
    [resize], .resize {
      cursor: nw-resize !important;
    }
    /* 粒子效果 */
    .click-particle {
      position: fixed;
      border-radius: 50%;
      pointer-events: none;
      z-index: 9998;
    }
  `;

  (document.head || document.documentElement).appendChild(style);

  // 粒子效果-從光標位置發出
  const createParticles = (x, y) => {
    const particleCount = 8;
    const adjustedX = x;
    const adjustedY = y;

    for (let i = 0; i < particleCount; i++) {
      const particle = document.createElement('div');
      particle.className = 'click-particle';

      // 隨機大小（4-8px）
      const size = 4 + Math.random() * 4;
      particle.style.width = `${size}px`;
      particle.style.height = `${size}px`;

      // 隨機顏色
      const hue = Math.random() * 360;
      particle.style.backgroundColor = `hsl(${hue}, 80%, 60%)`;
      particle.style.boxShadow = `0 0 ${size / 2}px hsl(${hue}, 80%, 60%)`;

      // 從光標熱點位置發出
      particle.style.left = `${adjustedX}px`;
      particle.style.top = `${adjustedY}px`;

      // 隨機的飛散方向和距離
      const angle = Math.random() * Math.PI * 2;
      const distance = 20 + Math.random() * 40;
      const dx = Math.cos(angle) * distance;
      const dy = Math.sin(angle) * distance;

      body.appendChild(particle);

      const animation = particle.animate(
        [
          {
            transform: 'translate(0, 0) scale(1) rotate(0deg)',
            opacity: 1,
          },
          {
            transform: `translate(${dx}px, ${dy}px) scale(0) rotate(360deg)`,
            opacity: 0,
          },
        ],
        {
          duration: 600 + Math.random() * 400,
          easing: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
        }
      );

      // 動畫結束後移除元素
      animation.onfinish = () => particle.remove();
    }
  };

  // 事件監聽
  document.addEventListener('click', (e) =>
    createParticles(e.clientX, e.clientY)
  );
})();

mouse.png 右鍵下載圖示即可

注意：下載之後留意圖片格式是否為png格式，不是的話手動改下

第二步：安裝擴展

加載滑鼠樣式擴展.gif

打開Chrome瀏覽器
地址欄輸入：chrome://extensions/
打開右上角"開發者模式"
點擊"加載已解壓的擴展程式"
選擇剛才的資料夾，然後確定

第三步：測試效果：打開任意網站看看滑鼠樣式修改是否有效

柴犬滑鼠效果.gif

總結

這小玩意兒不複雜，但治癒值拉滿。一個小小的 Chrome 擴展，把「可愛」和「儀式感」塞進了每個網頁。她說「太治癒了」，我說「這才不到一百行」。

如果覺得對您有幫助，歡迎點贊 👍 收藏 ⭐ 關注 🔔 支持一下！

往期實戰推薦：

Vue3 後台分頁寫膩了？我用 1 個 Hook 刪掉 90% 重複程式碼（附原始碼）

⚡ 一個Vue自定義指令搞定絲滑拖拽列表，告別複雜元件封裝

🔥 這才是 Vue 驅動的 Chrome 插件工程化正確打開方式

【前端效率工具】：告別右鍵另存，不到 50 行程式碼一鍵批量下載網頁圖片

女朋友炸了：剛打開的網頁怎麼又沒了？我反手甩出一鍵恢復按鈕！

你家孩子又偷玩網頁遊戲? 試試這個防沉迷工具