网站建设微商城多少钱,滁州seo优化,博客一号WordPress,国内优秀vi设计案例本文字数#xff1a;2493字 预计阅读时间#xff1a;15分钟 由于常用浏览器是Safari#xff0c;而Safari浏览器的插件比不上Chrome#xff0c;所以就有了自己开发常用的Safari插件的想法。 打算开发当前页面生成二维码的Extension#xff0c;因为网络原因#xff0c;AirD… 本文字数2493字 预计阅读时间15分钟 由于常用浏览器是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页面的jsbackground.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如下图 下一步输入项目名称选择语言如下图 然后选择存储地方保存项目会自动打开结构如下可以看出分为几个部分 Shared (App) Main.htmlIcon.pngStyle.cssScript.jsViewController.swiftMac/iOS APP的主界面其中是一个webview 加载Resources下的Main.html这个类可以不修改如果有从APP中自定义Extension设置选项的功能则需要修改Assests.xcassetsMac/iOS APP的图标可以用AppIconGenerator 来一键生成Ps: 开发了两个ExtensionAPP生成图标有点麻烦所以干脆开发了一个欢迎使用ResourcesShared (Extension) _localesimagesmanifest.jsonbackground.jscontent.jspopup.htmlpopup.csspopup.jsiOS (App)macOS (App)iOS (Extension)macOS (Extension) 再来考虑一下要做的界面: 初步设想是一个最简单的点击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
headmeta charsetUTF-8link relstylesheet hrefpopup.cssscript typemodule srcpopup.js/script
/head
bodydiv idloader/divdiv idimg_backimg idqrcode src altQR 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直接触发生成二维码的方法具体步骤如下 查询所有Tab获取正在显示的Tab获取正在显示Tab的链接用链接发起生成二维码的请求然后显示在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?datafunction 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 istransparenttrue;}});});
}// 直接触发生成二维码的方法
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运行如下图 选择 macOS 效果如下 loading生成二维码 然后来考虑优化通过请求生成二维码依赖网络环境如果网络环境不好可能loading时间过长甚至失败那么能不能不通过请求直接生成二维码 答案是可以的参考Chrome上的QR Code Generate点击后马上就生成二维码如下 Chrome QR Code Generate 所以是可以优化的通过js直接生成二维码而不需要依赖网络。最终效果如下 GenerateQR-Extension 插件已上架到商店名字为 [GenerateQR-Extension]欢迎体验。希望大家通过上面的介绍都能开发自己常用的 Safari-Extension。 参考 safari_web_extensionshttps://developer.apple.com/documentation/safariservices/safari_web_extensionschrome_web_exrensionshttps://developer.chrome.com/docs/extensions/mv3/getstarted/extensions-101/Assessing your Safari web extension’s browser compatibilityhttps://developer.apple.com/documentation/safariservices/safari_web_extensions/assessing_your_safari_web_extension_s_browser_compatibilitBrowser compatibility for manifest.jsonhttps://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.jsonQR Code Extensionhttps://github.com/NiklasGabriel/QR-CodeLSApplicationCategoryTypehttps://developer.apple.com/documentation/bundleresources/information_property_list/lsapplicationcategorytype
