如何开发一个 Safari 插件

078d8c125c216a46bd095517b69202bc.jpeg

aac3518b2e65bd64a923bcf5c6df156d.gif

本文字数：2493字

预计阅读时间：15分钟

88d342aaa21f1597b023cda801fc4913.png

由于常用浏览器是Safari，而Safari浏览器的插件比不上Chrome，所以就有了自己开发常用的Safari插件的想法。

打算开发当前页面生成二维码的Extension，因为网络原因，AirDrop有时候搜不到手机，所以有了这个需求，而且这个也比较简单，所以从这个开始。

01

调研

苹果的官方文档 safari_web_extensions 给出了步骤，看了好几遍，还是不知道如何下手。虽然新建项目的时候苹果帮忙把框架已经都建好了，但是还是有疑惑，疑惑的点在于：

  • 主APP的作用是什么？

  • Extension的作用是什么？

  • 代码应该写在哪里？

  • manifest.json支持的配置项有哪些，哪里可以看到，应该设置哪些？

  • content.js、background.js分别是干什么用的，什么时候用？

  • popup.html、popup.css、popup.js又是指的哪部分？

  • content.js、background.js、popup.js中操作tab的方法有哪些？哪里可以看到？

这些疑惑一度导致开发计划搁浅，因为没有文章来解释这些问题。于是转而去Github上找有没有SafariExtension的代码，看其他人是如何实现的？搜到了 ADGuardForSafari 等等很优秀的Extension，但是项目太大了，对于还没入门的笔者来说，解答不了上面的疑惑。

02

解决

直到偶然看到 QR Code Extension 这个，下载对比官方文档各个文件的解释，笔者终于对上面的疑惑有了答案，终于能动手开发自己的Extension了。

  • 主APP的作用是定义Extension的设置(配置项)，如果开发简单的 Extension，比如二维码生成、json格式化等不需要自定义设置的，主APP不需要修改；

  • Extension的是实现插件的实际地方，代码应该写在这里，这里面的代码是 html和js的内容和原生开发没太大关系；

  • manifest.json支持的配置项可以看 Assessing your Safari web extension’s browser compatibility 和 Browser compatibility for manifest.json，有初步印象即可，然后可以参照其他项目，再根据实际情况决定manifest.json里设置哪些；

  • content.js可以理解为注入到当前打开Tab页面的js，background.js则是Tab不活跃时的，如果不涉及不活跃Tab，则 background.js中无需实现；

  • popup.html、popup.css、popup.js指的是点击 Extension 按钮时，出现的下拉界面；

  • 操作tab的方法可以参考 Manage tabs，把里面chrome.tabs改为browser.tabs来调用即可。

03

手把手开发一个当前页面链接生成二维码的插件

选中Xcode -> File -> New -> Project, 然后选中Multiplaform -> Safari Extension App，选中Multiplaform代表同时支持iPhone和Mac，如下图：

d4dc105e517da2b84511ffb22df18ac0.png

下一步，输入项目名称，选择语言，如下图：

d731756d8feee3da2397cecde1fbe491.png

然后选择存储地方，保存，项目会自动打开，结构如下，可以看出，分为几个部分：

  • Shared (App)

    • Main.html

    • Icon.png

    • Style.css

    • Script.js

    • ViewController.swift：Mac/iOS APP的主界面，其中是一个webview 加载Resources下的Main.html；这个类可以不修改；如果有从APP中自定义Extension设置选项的功能，则需要修改；

    • Assests.xcassets：Mac/iOS APP的图标，可以用AppIconGenerator 来一键生成（Ps: 开发了两个ExtensionAPP，生成图标有点麻烦，所以干脆开发了一个，欢迎使用）；

    • Resources

  • Shared (Extension)

    • _locales

    • images

    • manifest.json

    • background.js

    • content.js

    • popup.html

    • popup.css

    • popup.js

  • iOS (App)

  • macOS (App)

  • iOS (Extension)

  • macOS (Extension)

f353c1a8be922535e10d232de31e9694.png

再来考虑一下要做的界面: 初步设想是一个最简单的，点击Tab栏的Icon，展开生成一个当前页面链接的二维码。

然后来看下如何实现：

首先配置manifest.json中的设置项，因为插件的功能是对所有网页都生效，所以修改content_scripts中的matches为所有网页，且配置host_permissions所有网页；另外需要获取当前活跃的Tab，所以在permissions中添加配置，最终要修改的配置项如下：

{..."content_scripts": [{"js": [ "content.js" ],"matches": [ "http://*/*", "https://*/*", "<all_urls>" ]}],"host_permissions": ["http://*/*", "https://*/*"],"permissions": ["activeTab","tabs","scripting","messaging"]
}

然后来考虑界面，用接口生成二维码图片然后加载显示的方式，需要有一个 loading，然后一个放置图片的地方；所以在popup.html中修改如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><link rel="stylesheet" href="popup.css"><script type="module" src="popup.js"></script>
</head>
<body><div id="loader"></div><div id="img_back"><img id="qrcode" src=" " alt="QR Code" /></div>
</body>
</html>

然后popup.css中设置loading动画和界面布局，代码如下：

:root {color-scheme: light dark;
}body {width: 360px;height: 360px;font-family: system-ui;text-align: center;margin: 0;background-color: white;
}#loader {position: absolute;left: 50%;top: 50%;z-index: 1;width: 120px;height: 120px;margin: -76px 0 0 -76px;border: 16px solid #f3f3f3;border-radius: 50%;border-top: 16px solid #3498db;-webkit-animation: spin 2s linear infinite;animation: spin 2s linear infinite;
}@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }
}#img_back {display: block;position: absolute;left: 50%;top: 50%;z-index: 1;width: 320px;height: 320px;margin: -160px 0 0 -160px;}#qrcode {width: 100%;border-radius: 9px;
}

然后来考虑js的实现，点击Tab栏的Icon，直接触发生成二维码的方法，具体步骤如下：

  1. 查询所有Tab

  2. 获取正在显示的Tab

  3. 获取正在显示Tab的链接

  4. 用链接发起生成二维码的请求，然后显示在img上

这里需要注意的是第三步，获取正在显示的Tab的链接，需要在content.js中获取，所以就需要通过方法通信，触发content.js获取当前的链接，然后再从content.js中回传给popup.js中，因为最终显示是在popup.html中，所以需要通过popup.js来发起请求。popup.js中代码如下：

const kQRAPI = "https://qrcode.tec-it.com/API/QRCode?data="function generateQRCode(methodName, message) {// 查询所有 Tabbrowser.tabs.query({ active: true, currentWindow: true }, function (tabs) {// 获取当前正显示的 Tabvar activeTab = tabs[0];// 发消息给 content.js，告诉它获取当前链接browser.tabs.sendMessage(activeTab.id, { title: methodName, message: message}, function (res) {// content.js 获取后回调到这里if (res.title == "targetURL") {const activeTabURL = res.urlStr;const encodedTabURL = encodeURIComponent(activeTabURL);// 获取popup.html 中 imgvar qrcodeImg = document.getElementById("qrcode");qrcodeImg.onload = function() {// 图片加载完成，loading 消失document.getElementById("loader").style.display = "none";};// 通过请求获取二维码照片qrcodeImg.src = kQRAPI + encodedTabURL + "&istransparent=true";}});});
}// 直接触发生成二维码的方法
generateQRCode("getPageURL", "generate current page URL");

content.js中代码如下：

browser.runtime.onMessage.addListener((request, sender, sendResponse) => {console.log("Received request: ", request);// 接收 popup.js 中发送的消息，并回调结果if (request.title == "getPageURL") {sendResponse({ title: "targetURL", urlStr: window.location.href });}
});

然后选择 macOS运行，如下图：

79d1a31b5a0a4be330778da88280bd20.png
选择 macOS

效果如下：

cee12b8d4888431b26f9fb1409d2c3d7.gif

loading生成二维码

然后来考虑优化，通过请求生成二维码依赖网络环境，如果网络环境不好，可能loading时间过长，甚至失败，那么能不能不通过请求，直接生成二维码？

答案是可以的，参考Chrome上的QR Code Generate，点击后马上就生成二维码，如下：

924c1be5b9d0050e5a780f174d448188.gif

Chrome QR Code Generate

所以是可以优化的，通过js直接生成二维码，而不需要依赖网络。最终效果如下：

1ac62a0f70bb47c911eee53ae4e6eeeb.gif

GenerateQR-Extension

插件已上架到商店，名字为 [GenerateQR-Extension]，欢迎体验。希望大家通过上面的介绍都能开发自己常用的 Safari-Extension。

参考：

  • safari_web_extensions（https://developer.apple.com/documentation/safariservices/safari_web_extensions）

  • chrome_web_exrensions（https://developer.chrome.com/docs/extensions/mv3/getstarted/extensions-101/）

  • Assessing your Safari web extension’s browser compatibility（https://developer.apple.com/documentation/safariservices/safari_web_extensions/assessing_your_safari_web_extension_s_browser_compatibilit）

  • Browser compatibility for manifest.json

    （https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json）

  • QR Code Extension

    （https://github.com/NiklasGabriel/QR-Code）

  • LSApplicationCategoryType（https://developer.apple.com/documentation/bundleresources/information_property_list/lsapplicationcategorytype）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/145413.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【milkv】internal codec -- mic

【milkv】internal codec -- mic

文章目录 一、硬件二、dts三、配置引脚board_initpin 四、makefile五、config六、添加tinyalsa七、测试结果7.1 查看录制device信息7.2 录制音频7.3 pc端获取录制好的设备7.4 使用audacity查看波形 一、硬件 i2s0 —— adc i2s1 —— pdm i2s3 —— dace spk_en存疑 i2s2 ——…
阅读更多...
分类预测 | MATLAB实现基于BiLSTM-AdaBoost双向长短期记忆网络结合AdaBoost多输入分类预测

分类预测 | MATLAB实现基于BiLSTM-AdaBoost双向长短期记忆网络结合AdaBoost多输入分类预测

分类预测 | MATLAB实现基于BiLSTM-AdaBoost双向长短期记忆网络结合AdaBoost多输入分类预测 目录 分类预测 | MATLAB实现基于BiLSTM-AdaBoost双向长短期记忆网络结合AdaBoost多输入分类预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.MATLAB实现基于BiLSTM-…
阅读更多...
rust学习——引用与借用（references-and-borrowing）

rust学习——引用与借用（references-and-borrowing）

引用与借用&#xff08;references-and-borrowing&#xff09; 先看一个返回参数的所有权的代码 fn main() {let s1 String::from("hello");let (s2, len) calculate_length(s1);println!("The length of {} is {}.", s2, len); }fn calculate_length(…
阅读更多...
云服务的划分IaaS，PaaS，SaaS 的区别

云服务的划分IaaS，PaaS，SaaS 的区别

云服务只是一个统称&#xff0c;可以分成三大类。 三部分的命名&#xff1a; IaaS&#xff1a;基础设施服务&#xff0c;Infrastructure-as-a-servicePaaS&#xff1a;平台服务&#xff0c;Platform-as-a-serviceSaaS&#xff1a;软件服务&#xff0c;Software-as-a-service
阅读更多...
yakit使用爆破编码明文_dnslog使用

yakit使用爆破编码明文_dnslog使用

yakit使用爆破编码密码 文章目录 yakit使用爆破编码密码yakit使用1 yakit编码密码进行爆破2 准备eval.php文件放入web3 访问http://192.168.225.206/eval.php,使用bp抓包,测试后环境准本好4 使用yakit4.1 进入页面&#xff0c;点击这里进行配置默认端口80834.2 发送到模糊测试4…
阅读更多...
外汇天眼：重磅！WikiEXPO与澳大利亚计算机与法律协会达成战略合作

外汇天眼：重磅！WikiEXPO与澳大利亚计算机与法律协会达成战略合作

2023年10月19日&#xff0c;作为WikiGlobal旗下的知名品牌WiKiFX与澳大利亚计算机与法律协会&#xff08;AUSCL&#xff09;正式达成战略合作。对于整个金融行业来说&#xff0c;此次合作是双方共同推动技术和社会进步的一步&#xff0c;也是促进金融行业安全和创新方面迈出的重…
阅读更多...
barzilar_borwein算法微调函数的优化收敛

barzilar_borwein算法微调函数的优化收敛

import optimtool as oo from optimtool.base import np, sp, pltpip install optimtool>2.4.2加载barzilar_borwein算法 import optimtool.unconstrain as ou barzilar_borwein ou.gradient_descent.barzilar_borwein初始化输入数据 f ( x ) ∑ i 1 n / 2 c ( x 2 i −…
阅读更多...
Java数据结构之稀疏数组

Java数据结构之稀疏数组

目录 线性结构与非线性结构线性结构非线性结构 稀疏数组应用场景 代码实现二维数组转稀疏数组稀疏数组转二维数组 线性结构与非线性结构 线性结构 数据结构分两种&#xff0c;线性与非线性&#xff0c;线性结构的数据元素之间存在一对一的关系。 一对一指的是每个数据元素都…
阅读更多...
线框图软件：Balsamiq Wireframes mac中文介绍

线框图软件：Balsamiq Wireframes mac中文介绍

Balsamiq Wireframes mac是一款用于创建线框图的软件工具。它旨在帮助用户快速制作出清晰、简洁的界面原型&#xff0c;以便在设计和开发过程中进行协作和沟通。 Balsamiq Wireframes具有简单直观的用户界面&#xff0c;使用户能够快速添加和编辑各种用户界面元素&#xff0c;如…
阅读更多...
当年很流行，现在已经淘汰的前端技术有哪些？

当年很流行，现在已经淘汰的前端技术有哪些？

近几年&#xff0c;前端技术真可谓是飞速发展&#xff0c;不断有新的技术涌现&#xff0c;爆火的前端框架 Astro&#xff0c;前端运行时 Bun&#xff0c;构建工具 Vite 等都给前端提供了强大动力。当然&#xff0c;也有很多前端技术随着技术的发展不再需要使用&#xff0c;有了…
阅读更多...
【软考】6.1 信息安全及技术

【软考】6.1 信息安全及技术

《信息安全和信息系统安全》 信息安全系统的体系架构 网络安全空间五大要素&#xff1a;认证、权限、完整、加密、不可否认&#xff08;抵赖&#xff09; 信息安全含义及属性 信息安全三要素&#xff1a;保密性、完整性、可用性最小授权原则&#xff1a;该有什么权限&#xf…
阅读更多...
qwen大模型，推理速度慢，单卡/双卡速度慢，flash-attention安装，解决方案

qwen大模型，推理速度慢，单卡/双卡速度慢，flash-attention安装，解决方案

场景 阿里的通义千问qwen大模型&#xff0c;推理速度慢&#xff0c;单卡/双卡速度慢。 详细&#xff1a; 1、今日在使用qwen-14b的float16版本进行推理&#xff08;BF16/FP16) 1.1 在qwen-14b-int4也会有同样的现象 2、使用3090 24G显卡两张 3、模型加载的device是auto&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023