safari扩展程序开发

文章目录

safari的extension文档不是很好,建议参考mozilla文档
https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions

safari_web_extensions

safari_web_extension以app的形式安装,安装 扩展APP后,扩展会安装在safari浏览器中

如果不是Apple开发者计划的一部分,或者如果您尚未为现有的Xcode项目配置开发者身份,则您的Safari Web扩展将不会使用开发证书签名

开发扩展

扩展有3个主要部分:

  1. backgroud.js 后台脚本
    在backgroud环境运行,提供了 window 全局变量,也提供了所有的标准 DOM API
  2. content.js 内容脚本
    可以使用 document 对象获取、操作页面的 DOM
  3. popup.js 扩展弹框脚本
    是一个普通网页一样

使用 WebExtension API

要使用WebExtension API,需要在你的 manifest.json 中申请WebExtension API权限

  • manifest.json case
json 复制代码
    "permissions": [
        "runtime",
        "activeTab",
        "tabs",
        "scripting",
        "messaging",
        "webNavigation",
        "<all_urls>"
    ]
  • 使用 browser 命名空间访问这些 API。
js 复制代码
browser.runtime
browser.tabs
runtime

提供一组消息通信 API,在附加组件的不同模块间通信。

js 复制代码
// 发送消息
browser.runtime.sendMessage()	
// 接受消息
browser.runtime.onMessage.addListener(listener)
browser.runtime.onMessage.removeListener(listener)
browser.runtime.onMessage.hasListener(listener)
  • case
js 复制代码
browser.runtime.sendMessage({ greeting: "hello" }).then((response) => {
    console.log("Received response: ", response);
});

browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
    console.log("Received request: ", request);
});

local debug

Safari中允许运行 未签名的扩展

Safari默认情况下会忽略未签名的扩展程序

  1. Safari > Settings.
  2. Advanced > Show features for web developers
  3. Develop > Allow Unsigned Extensions 【每次重启safari都要重新打开】

install extension

  1. 选择 应用程序(macOS)
  2. run
    应用程序主页面
    没报错的话safari extension会显示出来

update extension

  • 删除旧的 bundle

    Xcode Product > Clean Build Folder

  • Xcode Product > Build

    Xcode会将最新的更改打包到macOS应用程序中的扩展文件中。构建完成后,您的扩展更新即可在Safari中使用。

publish

Xcode Product > Archive > Distribute App

  1. 打包到本地
  2. 发布到app store
相关推荐
喝水的长颈鹿1 天前
JavaScript 基础入门
前端
喝咖啡的女孩1 天前
call、apply、bind 原理与实现
前端
雨落Re1 天前
从设计到开发,过年我用十天使用AI搭建了一个完整的博客系统
前端·后端
冴羽1 天前
100s 带你了解 Bun 为什么这么火
前端·node.js·bun
Sylvia33.1 天前
火星数据:解构斯诺克每一杆进攻背后的数字语言
java·前端·python·数据挖掘·数据分析
Wect1 天前
LeetCode 530. 二叉搜索树的最小绝对差:两种解法详解(迭代+递归)
前端·算法·typescript
掘金一周1 天前
2026 春晚魔术大揭秘:作为程序员,分分钟复刻一个 | 掘金一周 2.26
前端·人工智能·后端
兴芳1 天前
Tencent Cloud Captcha
前端
一个假的前端男1 天前
# 从零开始创建 Flutter Web 项目(附 VS Code 插件推荐)
前端·flutter·react.js