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
相关推荐
徐小夕4 小时前
pxcharts 多维表格开源!一款专为开发者和数据分析师打造的轻量化智能表格
前端·架构·github
电商API&Tina4 小时前
跨境电商速卖通(AliExpress)数据采集与 API 接口接入全方案
大数据·开发语言·前端·数据库·人工智能·python
Mintopia5 小时前
🏗️ B端架构中的用户归因与埋点最佳实践
前端·react.js·架构
码界奇点5 小时前
基于Gin+Vue的前后端分离权限管理系统设计与实现
前端·vue.js·车载系统·毕业设计·gin·源代码管理
LYFlied5 小时前
前端跨端技术全景解析:从本质到未来
前端·职场和发展·跨端
Mintopia5 小时前
🌐 技术迭代速度与监管适配:WebAIGC的发展平衡术
前端·人工智能·aigc
一颗奇趣蛋5 小时前
AI Rules & MCP 抄作业(附samples)
前端·openai
^^为欢几何^^5 小时前
vue3+el-upload+多张图片(20MB左右)+图片压缩上传到后端+可限制条数+懒加载
前端·javascript·vue.js
BD_Marathon5 小时前
Vue3_列表渲染
前端·javascript·vue.js
知其然亦知其所以然5 小时前
为什么说 String 是 JavaScript 中“最安静却最危险”的类型
前端·javascript·程序员