NEW BOT Телеграм, страница

Chrome 扩展应用到Safari 扩展～（续集）

好久不见🍟～
Mac Safari使用Chromium类扩展开发调优

将Chrome扩展添加到Mac Safari扩展前言：对于Mac Safari浏览器，扩展都需要appstore上架才能使用。但是！有动手能力的话，你可以把chrome上的扩展拿来用。挺麻烦的要不就算了吧 lark_167步骤一从扩展商店或crxsoso下载相应的扩展，格式如果是.crx，需要改后缀名为.zip,然后解压到文件夹启用Safari浏览器开发者选项（选择菜单栏 …

上次写文章还是在上次，时至今日，佬友也许可能对此不感兴趣了👾，不过我还是想对上次的文章进行补充，本篇主要内容：一个快速轻松地为多个浏览器打包扩展程序的工具”Bepp”✨️～

----------------------

1. 准备工作

必备条件：

● 一台 macOS 电脑（Safari 扩展打包只能在 Mac 上搞定哦～）
● 如果你没有 Mac，也可以用 GitHub Action 远程构建，懒人福音！
● 如果用 Node.js 安装 Bepp，就需要安装 Node 环境啦～
● Git 和终端工具（用来敲命令，没它们不行）

----------------------

2. 安装 Bepp

Bepp 就是我们的神奇小工具，能帮你把扩展转换得妥妥的。有三种安装方式，随你喜欢选一个！

方法1：用 npm 安装

直接在终端里敲：

npm install @bepp/bepp

方法2：直接下载

去这里下载适合你电脑的版本，下载后直接用就好！

方法3：GitHub Action（懒人专用）

直接在 GitHub 上配置 Action，让它自动帮你构建，不用自己敲命令哦～

----------------------

3. 写配置文件

接下来，告诉 Bepp 你的 Chrome 扩展在哪里，然后它就能帮你转换成 Safari 扩展啦！
这里我们用 YAML 格式的配置文件（文件名：bepp.config.yml）：

shared:
  id: 'MyCoolExtension'  # 你的扩展名字
  input:
    chromium: 'build/chromium-mv3/'  # 你 Chrome 扩展的代码所在文件夹
  output: 'dist'  # 转换好的 Safari 扩展输出目录

build:
  - type: safari  # 告诉 Bepp 转换成 Safari 扩展

把这个文件放到项目的根目录下就可以啦～

----------------------

4. 转换扩展

配置好之后，打开终端，进入你的项目文件夹，运行下面的命令：

bepp build

这条命令会自动把你的 Chrome 扩展转换成 Safari 扩展，转换结果会在你配置文件中指定的 dist 目录里哦！

----------------------

5. 安装 & 测试扩展

转换成功后，你会得到一个 .app 或 .dmg 文件。安装步骤超级简单：

1. 打开 .dmg 文件
双击打开，然后把扩展拖进 应用程序 文件夹里。
2. 启动扩展
打开 Launchpad，找到你的扩展，点击启动。
3. 在 Safari 中启用扩展
打开 Safari → 偏好设置 → 扩展，找到你的扩展，然后点一下启用按钮！
4. 试试看效果
检查一下弹出窗口、选项页面和其他功能是不是都正常运行～

----------------------

6. GitHub Action 自动构建（进阶懒人必备）

如果你不想每次都手动运行命令，可以用 GitHub Action 自动帮你构建！
在项目中新建一个文件 .github/workflows/build.yml，然后把下面这段代码贴进去：

name: Build Safari Extension
on:
  push:
    branches:
      - main  # 只有推送到 main 分支时才会触发构建

jobs:
  build:
    runs-on: macos-latest  # Safari 扩展必须在 macOS 上构建
    steps:
      - name: 拉取代码
        uses: actions/checkout@v4

      - name: 安装 Bepp
        run: npm install -g @bepp/bepp

      - name: 开始构建
        run: bepp build

这样，每次你有需要转换的chrome扩展，只需上传解压后的文件到GitHub ，就会自动帮你构建好 Safari 扩展，简单省事🍟～

----------------------

～
有疑问可以查看更详细的官方文档，如果对你有帮助求赞❤️求关注✨️

6 个帖子 - 4 位参与者

阅读完整话题

via LINUX DO - 热门话题 (author: o_oi)

65 views20:35