BewlyCat Safari | 构建并安装 BewlyCat Safari 浏览器插件

教程 , , , , , , , , , , , , , , , , , , ,

BewlyCat 是一个Bilibili美化浏览器拓展插件。

如图所示，由于官方仓库并没有打包 safari 版本，我们需要使用shiinayane大佬维护的@github.com/BewlyCat-Safari仓库自行构建。

我也只是第一次尝试构建Safari插件，教程如有不妥之处请指出，谢谢 🙏

第一步：克隆仓库

  • 下载并打开 Xcode
  • 点击 Clone Git Repository 选项
  • 在 Repository Url 输入框输入 https://github.com/shiinayane/BewlyCat-Safari
  • 点击 Clone 按钮

本步骤建议开启代理工具科学上网，否则会卡在本步骤

  • 选择 safari 分支，点击 Clone 按钮
  • 选择一个合适的保存位置，然后点击 Clone

然后耐心等待仓库克隆完成即可。

第二步：解除浏览器限制

  • 打开 Safari 浏览器
  • 打开浏览器设置
  • 点击 高级 选项
  • 开启 显示网页开发者功能
  • 点击 开发者 选项
  • 开启 允许未签名的拓展
  • 无视风险直接授权

然后将 Safari 浏览器放在后台备用（不要关闭浏览器）

第三步：构建并启用插件

  • 打开终端，依次执行下方的所有命令
  • 进入 BewlyCat-Safari 文件夹（替换成你的 BewlyCat-Safari 路径）
cd ./Documents/BewlyCat-Safari
  • 配置开发环境
# 下载并安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

# 代替重启 shell
\. "$HOME/.nvm/nvm.sh"

# 下载并安装 Node.js
nvm install 26

# 设置 npm 国内阿里加速镜像源
npm config set registry https://registry.npmmirror.com

# 下载并安装 pnpm
npm install -g pnpm

# 设置 pnpm 国内阿里加速镜像源
pnpm config set registry https://registry.npmmirror.com
  • 安装项目依赖
pnpm install
  • 构建并转换为 Xcode 项目
pnpm build-safari
pnpm convert-safari
  • 执行完最后一条命令后，Xcode 会自动弹出一个窗口
  • 在左侧 TARGETS 中选择 BewlyCat Extension
  • 点击顶部的三角形构建按钮
  • 构建完成后会自动弹出一个 BewlyCat 窗口
  • 点击 Quit and Open Safari Settings... 按钮
  • 点击按钮后会自动弹出 Safari 浏览器拓展设置
  • 启用 BewlyCat 拓展插件

然后 bilibili 就美化成功了～（插件也成功启用了）

结语

这只是一次尝试的记录，也没什么好说的啦...