用浏览器插件让你的鼠标变成超萌猫爪

​

1 插件开发

每天对着电脑，是不是已经看腻了那个一成不变的白色箭头鼠标指针？如果你的鼠标在屏幕上移动时，留下的是一只可爱的猫爪印记，上网冲浪的心情会不会立刻变得愉悦起来？
浏览器插件是扩展浏览器功能的软件组件，它们允许我们通过注入自定义的CSS或JavaScript来改变网页的外观和行为。

首先，我们需要创建一个新的文件夹来存放插件的所有文件，可以命名为 cat-paw-cursor。在这个文件夹中，创建以下文件和子文件夹：

manifest.json - 插件的“身份证”，定义了插件的名称、版本、权限和它需要执行的文件。
style.css - 用CSS代码来改变鼠标指针的样式。

images/cat-paw.png - 猫爪的光标图片。将一张透明背景的猫爪图片放入其中。可以在网上搜索“猫爪 png”找到许多可爱的素材

2 代码解释-manifest.json

manifest.json是Chrome扩展的配置文件。它告诉浏览器插件的基本信息以及需要在哪些页面上注入我们的CSS样式文件。

{
  "manifest_version": 3,
  "name": "猫爪指针",
  "version": "1.0",
  "description": "将你的鼠标指针变成可爱的猫爪。",
  "icons": {
    "48": "images/cat-paw.png"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["style.css"]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["images/cat-paw.png"],
      "matches": ["<all_urls>"]
    }
  ]
}

“content_scripts”：
告诉浏览器在所有网页上加载并应用 style.css 文件。

“web_accessible_resources”：
此配置项授权所有网页可以访问我们插件包里的图片。

3 代码解释-style.css

把所有元素的默认鼠标指针都换成我们的猫爪图片

/* 对整个页面、链接和按钮应用新的鼠标指针 */
body, a, button, [onclick] {
    cursor: url('chrome-extension://__MSG_@@extension_id__/images/cat-paw.png'), auto;
}

/* 当鼠标悬停在链接或可点击元素上时，也可以定义一个不同的样式，这里我们保持一致 */
a:hover, button:hover {
    cursor: url('chrome-extension://__MSG_@@extension_id__/images/cat-paw.png'), auto;
}

body, a, button选择器覆盖了页面的大部分区域，包括普通区域、链接、按钮和任何带有点击事件的元素。

最后是特殊的路径确保能正确找到图片。

auto是一个备用选项。如果图片加载失败，浏览器会退回到默认的指针样式，避免光标消失。

4 插件安装

输入 chrome://extensions/ 在地址栏中并回车。
开启右上角的“开发者模式”。
点击“加载已解压的扩展程序”按钮，选择你的插件文件夹。安装成功如下所示。