{"id":1450,"date":"2024-02-29T21:03:48","date_gmt":"2024-02-29T20:03:48","guid":{"rendered":"https:\/\/www.stefanvd.net\/blog\/?p=1450"},"modified":"2024-05-01T19:56:48","modified_gmt":"2024-05-01T18:56:48","slug":"how-to-get-a-safari-extension-for-apple-vision-pro","status":"publish","type":"post","link":"https:\/\/www.stefanvd.net\/blog\/2024\/02\/29\/how-to-get-a-safari-extension-for-apple-vision-pro\/","title":{"rendered":"How to get a Safari Extension for Apple Vision Pro in 3 steps?"},"content":{"rendered":"\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><p>Table of Contents<\/p><nav><ul><li><a href=\"#get-started\">Get Started<\/a><ul><li><a href=\"#chrome-extension-manifest-v-3-to-safari-extension-for-apple-vision-pro\">Chrome Extension Manifest V3 to Safari Extension for Apple Vision Pro<\/a><\/li><li><a href=\"#how-to-create-a-beautiful-apple-vision-icon-design\">How to create a beautiful Apple Vision Icon design?<\/a><\/li><li><a href=\"#how-to-enable-the-safari-extension-for-apple-vision-pro-device\">How to enable the Safari Extension for Apple Vision Pro device<\/a><\/li><li><a href=\"#how-to-activate-the-extension-on-the-current-web-page\">How to activate the extension on the current web page?<\/a><\/li><li><a href=\"#how-to-open-browser-extension-options-page\">How to Open Browser Extension Options page?<\/a><\/li><\/ul><\/li><li><a href=\"#limitations-of-the-safari-extension-for-apple-vision-pro\">Limitations of the Safari Extension for Apple Vision Pro<\/a><\/li><li><a href=\"#resources\">Resources<\/a><\/li><li><a href=\"#conclusion\">Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<p>This month, I experimented with and delved into the programming language SwiftUI. Additionally, I focused on developing a Safari extension for Apple Vision Pro. Creating a browser extension for a spatial computer presents unique challenges, particularly in navigation and scrolling. In this environment, there&#8217;s no need for a mouse or keyboard; instead, interactions are achieved by using two fingers together to tap and click on buttons.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Today marks the beginning of a new era for computing<\/p>\n<cite><a href=\"https:\/\/www.apple.com\/newsroom\/2023\/06\/introducing-apple-vision-pro\/\" target=\"_blank\" rel=\"noopener\"><em>Tim Cook<\/em> from Apple<\/a><\/cite><\/blockquote>\n\n\n\n<p>While developing my new <a href=\"https:\/\/apps.apple.com\/us\/app\/aurora-player\/id1043744348?platform=appleVisionPro\" target=\"_blank\" rel=\"noopener\">Aurora Player app<\/a>, I included a browser extension designed to open specific YouTube videos in the Aurora Player app. However, I encountered an issue with the Chrome Extension Manifest V2. Upon attempting to add this extension, it became evident that the Apple Vision Pro does not support its installation, stating that &#8220;<em>Extensions on visionOS must have a non-persistent background page<\/em>&#8220;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/aurora-player-safari-extension-apple-vision-pro-issue-background-page-1024x768-1.webp\" alt=\"Apple Vision Pro error background page for Safari extension\" class=\"wp-image-1799\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/aurora-player-safari-extension-apple-vision-pro-issue-background-page-1024x768-1.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/aurora-player-safari-extension-apple-vision-pro-issue-background-page-1024x768-1-300x225.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/aurora-player-safari-extension-apple-vision-pro-issue-background-page-1024x768-1-768x576.webp 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Apple Vision Pro error background page for Safari extension<\/figcaption><\/figure>\n\n\n\n<p>I enhanced the code by replacing the background page with a service worker script. Consequently, I successfully updated the manifest JSON file to the Manifest V3 version, enabling the Safari extension to function properly.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/aurora-player-safari-extension-apple-vision-pro-1024x768-1.webp\" alt=\"Aurora Player Safari extension for Apple Vision Pro\" class=\"wp-image-1797\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/aurora-player-safari-extension-apple-vision-pro-1024x768-1.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/aurora-player-safari-extension-apple-vision-pro-1024x768-1-300x225.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/aurora-player-safari-extension-apple-vision-pro-1024x768-1-768x576.webp 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Aurora Player Safari extension for Apple Vision Pro<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"get-started\">Get Started<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"chrome-extension-manifest-v-3-to-safari-extension-for-apple-vision-pro\">Chrome Extension Manifest V3 to Safari Extension for Apple Vision Pro<\/h3>\n\n\n\n<p>Converting your Chrome Extension Manifest V3 to a Safari extension is straightforward. You can <a href=\"https:\/\/www.stefanvd.net\/blog\/2023\/12\/27\/how-to-create-your-first-safari-extension-manifest-v3\/\" data-type=\"post\" data-id=\"572\">find detailed steps in my previous developer article<\/a>. Here, I will build upon those steps to integrate the VisionOS app into the current page:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open your <strong>Xcode<\/strong> app on your Mac computer<\/li>\n\n\n\n<li>Go to File -&gt; New -&gt; Target&#8230;<\/li>\n\n\n\n<li>A window will appear. Choose &#8220;VisionOS&#8221; on the top navigation bar. Then click on the &#8220;App&#8221; item. And click on the Next button<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"599\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/02\/create-apple-vision-pro-app-1024x599.png\" alt=\"Create your first Safari extension for Apple Vision Pro\" class=\"wp-image-1483\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/02\/create-apple-vision-pro-app-1024x599.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/02\/create-apple-vision-pro-app-300x175.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/02\/create-apple-vision-pro-app-768x449.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/02\/create-apple-vision-pro-app-1536x898.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/02\/create-apple-vision-pro-app-2048x1197.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Create your first Safari extension for Apple Vision Pro<\/figcaption><\/figure>\n\n\n\n<p>Now you can begin programming the first screen of your VisionOS app using the SwiftUI programming language. You can add here this text code, to let the user know it is a Safari extension, and how to enable it in Apple Vision Pro:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>struct ContentView: View {\n    var body: some View {\n        VStack {\n            Text(\"To enable the Safari extension:\")\n                .font(.headline)\n                .padding()\n            \n            Text(\"1. Open Setting on your Apple Vision Pro device\")\n                .padding()\n            Text(\"2. Go to 'Apps' and navigate to 'Safari'\")\n                .padding()\n            Text(\"3. Click on the 'Extensions' menu item\")\n                .padding()\n            Text(\"4. Find your extension in the list and click on it\")\n                .padding()\n            Text(\"5. Right of this extension name enable the toggle button\")\n                .padding()\n\n            Spacer()\n        }\n        .frame(maxWidth: .infinity, maxHeight: .infinity)\n        .padding()\n    }\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"599\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/02\/xcode-apple-vision-pro-1024x599.png\" alt=\"Xcode Hello world example for Apple Vision Pro\" class=\"wp-image-1466\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/02\/xcode-apple-vision-pro-1024x599.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/02\/xcode-apple-vision-pro-300x175.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/02\/xcode-apple-vision-pro-768x449.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/02\/xcode-apple-vision-pro-1536x898.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/02\/xcode-apple-vision-pro-2048x1197.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Xcode Hello world example for Apple Vision Pro<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-to-create-a-beautiful-apple-vision-icon-design\">How to create a beautiful Apple Vision Icon design?<\/h3>\n\n\n\n<p>It is quite simple for a developer to achieve this icon effect for your Apple Vision Pro. For instance, using the Turn Off the Lights Safari extension. By utilizing the gray lamp button as the foreground and a white background layer, when you hover your cursor over the preview, you can immediately observe the shadow effect around it.<\/p>\n\n\n\n<p>You simply need to add three images of 512&#215;512 pixels and drag them to the &#8220;Front,&#8221; &#8220;Middle,&#8221; and &#8220;Back&#8221; positions to witness this visual effect.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"598\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/02\/turn-off-the-lights-safari-extension-icon-apple-vision-pro-1024x598.png\" alt=\"Xcode on creating your Apple Vision Pro App icon\" class=\"wp-image-1465\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/02\/turn-off-the-lights-safari-extension-icon-apple-vision-pro-1024x598.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/02\/turn-off-the-lights-safari-extension-icon-apple-vision-pro-300x175.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/02\/turn-off-the-lights-safari-extension-icon-apple-vision-pro-768x449.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/02\/turn-off-the-lights-safari-extension-icon-apple-vision-pro-1536x897.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/02\/turn-off-the-lights-safari-extension-icon-apple-vision-pro-2048x1196.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Xcode on creating your Apple Vision Pro App icon<\/figcaption><\/figure>\n\n\n\n<p>That is it. And everything you did before on the Mac, and you have a working Safari extension for Apple Vision Pro. Select the <strong>Apple Vision Pro<\/strong> simulator and click on the <strong>play button<\/strong> in your Xcode app.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-to-enable-the-safari-extension-for-apple-vision-pro-device\">How to enable the Safari Extension for Apple Vision Pro device<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to Settings&nbsp;-&gt; Apps -&gt; Safari -&gt; Extensions.<\/li>\n\n\n\n<li>You see Safari extension, for me that is &#8220;Turn Off the Lights&#8221;<\/li>\n\n\n\n<li>And enable the toggle switch<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-to-activate-the-extension-on-the-current-web-page\">How to activate the extension on the current web page?<\/h3>\n\n\n\n<p>When you enable the Turn Off the Lights Safari extension and open the Safari web browser app, you will notice that it asks for permission to run these scripts. This behavior is consistent across Mac, iOS, and iPadOS devices.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/safari-web-apple-vision-pro-safari-extension-permission-1024x768-1.webp\" alt=\"Settings panel and Turn Off the Lights Options page open in a spatial environment\" class=\"wp-image-1691\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/safari-web-apple-vision-pro-safari-extension-permission-1024x768-1.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/safari-web-apple-vision-pro-safari-extension-permission-1024x768-1-300x225.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/safari-web-apple-vision-pro-safari-extension-permission-1024x768-1-768x576.webp 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Settings panel and Turn Off the Lights Options page open in a spatial environment<\/figcaption><\/figure>\n\n\n\n<p>When you tap on the &#8220;Review&#8221; button. You have 3 options, &#8220;Allow for One Day&#8221;, &#8220;Always Allow&#8230;&#8221; or &#8220;Don&#8217;t Allow&#8221;. So click &#8220;Always Allow&#8221;, so it will not ask for this message modal each day when you browse the web on Safari.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/safari-extension-allow-for-one-day-permission-1024x768-1.webp\" alt=\"Safari extension permission modal\" class=\"wp-image-1709\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/safari-extension-allow-for-one-day-permission-1024x768-1.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/safari-extension-allow-for-one-day-permission-1024x768-1-300x225.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/safari-extension-allow-for-one-day-permission-1024x768-1-768x576.webp 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Safari extension permission modal<\/figcaption><\/figure>\n\n\n\n<p>So, when you navigate to YouTube and watch a video, click on the &#8220;aA&#8221; icon, and you will see a list of all installed Safari extensions. This list includes Turn Off the Lights. Click on the &#8220;Turn Off the Lights&#8221; menu item, and the extension will focus on the current video player.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/activate-safari-extension-apple-vision-pro-1024x768-1.webp\" alt=\"Activate Turn Off the Lights on the current web page\" class=\"wp-image-1792\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/activate-safari-extension-apple-vision-pro-1024x768-1.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/activate-safari-extension-apple-vision-pro-1024x768-1-300x225.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/activate-safari-extension-apple-vision-pro-1024x768-1-768x576.webp 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Activate Turn Off the Lights on the current web page<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/dimmed-page-on-apple-vision-pro-1024x768-1.webp\" alt=\"Dimmed page with focus on the video player.\" class=\"wp-image-1801\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/dimmed-page-on-apple-vision-pro-1024x768-1.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/dimmed-page-on-apple-vision-pro-1024x768-1-300x225.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/dimmed-page-on-apple-vision-pro-1024x768-1-768x576.webp 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Dimmed page with focus on the video player.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-to-open-browser-extension-options-page\">How to Open Browser Extension Options page?<\/h3>\n\n\n\n<p>Navigating from the &#8220;aA&#8221; icon to the Turn Off the Lights browser extension Options page is not possible. You need to open the Settings app, go to Apps, select Safari, then Extensions. From there, choose the &#8220;Turn Off the Lights&#8221; menu item, where you will find the &#8220;Settings&#8221; menu item.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/navigate-safari-extension-options-page-apple-vision-pro-1024x768-1.webp\" alt=\"Enable Safari Extension in the Settings app\" class=\"wp-image-1803\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/navigate-safari-extension-options-page-apple-vision-pro-1024x768-1.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/navigate-safari-extension-options-page-apple-vision-pro-1024x768-1-300x225.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/navigate-safari-extension-options-page-apple-vision-pro-1024x768-1-768x576.webp 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Enable Safari Extension in the Settings app<\/figcaption><\/figure>\n\n\n\n<p>The Options page is an HTML page, similar to what you find in Google Chrome, Safari, etc. So as a developer, you need to make no changes to it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/safari-extension-options-page-in-apple-vision-pro-1024x768-1.webp\" alt=\"Turn Off the Lights Safari Extension Options page\" class=\"wp-image-1707\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/safari-extension-options-page-in-apple-vision-pro-1024x768-1.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/safari-extension-options-page-in-apple-vision-pro-1024x768-1-300x225.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/safari-extension-options-page-in-apple-vision-pro-1024x768-1-768x576.webp 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Turn Off the Lights Safari Extension Options page<\/figcaption><\/figure>\n\n\n\n<p>So, when enabling the Atmosphere Lighting Vivid mode on the Turn Off the Lights Options page, you will have the same experience on your Apple Vision Pro.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/turn-off-the-lights-for-safari-apple-vision-pro-atmosphere-lighting-on-youtube-1024x768-1.webp\" alt=\"Turn Off the Lights Safari extension with the Atmosphere Lighting feature enabled\" class=\"wp-image-1705\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/turn-off-the-lights-for-safari-apple-vision-pro-atmosphere-lighting-on-youtube-1024x768-1.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/turn-off-the-lights-for-safari-apple-vision-pro-atmosphere-lighting-on-youtube-1024x768-1-300x225.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/turn-off-the-lights-for-safari-apple-vision-pro-atmosphere-lighting-on-youtube-1024x768-1-768x576.webp 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Turn Off the Lights Safari extension with the Atmosphere Lighting feature<\/figcaption><\/figure>\n\n\n\n<p>You can read and experience it yourself today on the Apple App Store, or you can check out my free and Open-Source <a href=\"https:\/\/apps.apple.com\/us\/app\/turn-off-the-lights-for-safari\/id1273998507\" target=\"_blank\" rel=\"noopener\">Turn Off the Lights Safari extension<\/a> available for Apple Vision Pro. You can find it on GitHub: <a href=\"https:\/\/github.com\/turnoffthelights\/Turn-Off-the-Lights-Safari-extension\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/turnoffthelights\/Turn-Off-the-Lights-Safari-extension<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"limitations-of-the-safari-extension-for-apple-vision-pro\">Limitations of the Safari Extension for Apple Vision Pro<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Your Safari Extension for Apple Vision Pro does not display the icon pinned in the top toolbar; you must click on the &#8220;Aa&#8221; icon to access the menu popup, where you can find your Safari extension.<\/li>\n\n\n\n<li>It uses a monochromatic color when your Safari extension has only one color. Apple adds an accent color to indicate if it is enabled (typically shown in blue).<\/li>\n\n\n\n<li>There is no way to change the position of the button in the &#8220;Aa&#8221; menu, for example, to place it at the top left or right.<\/li>\n\n\n\n<li>There is no quick way to open the extension management page, like your Options page, since there is no right-click option on the browser button to enable or disable a specific Safari extension. You will need to open your Settings app from your home screen and then navigate to Safari.<\/li>\n\n\n\n<li>The Safari extension for Apple Vision Pro still requires a VisionOS App to install the Safari extension. It cannot use a single ZIP file like Google Chrome, Firefox, Opera, and Microsoft Edge web browsers.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"resources\">Resources<\/h2>\n\n\n\n<p>For comprehensive information about spatial computing and how to make your Safari extension available, refer to these resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developer.apple.com\/visionos\/\" target=\"_blank\" rel=\"noopener\">Apple Developer visionOS documentation<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.apple.com\/videos\/play\/wwdc2023\/10279\/\" target=\"_blank\" rel=\"noopener\">WWDC 2024 video of meet Safari for spatial computing<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/support.apple.com\/guide\/apple-vision-pro\/get-extensions-taneabb0edd3\/visionos\" target=\"_blank\" rel=\"noopener\">Apple Help page on how to enable a Safari extension on Apple Vision Pro<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>It is not very difficult to upgrade your Safari extension for Apple Vision Pro, which uses the Chrome extension Manifest V3 code, to the Apple Vision Pro. However, you should ensure to simplify and clean up your Options page. This will make it easier to scroll through and enable specific features. If you appreciate my shared experience with Safari extension for Apple Vision Pro, please consider <a href=\"https:\/\/www.stefanvd.net\/donate\/\" target=\"_blank\" rel=\"noreferrer noopener\">making a small donation<\/a>. Your support would be immensely valuable in driving future initiatives and advancements in my browser extensions.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This month, I experimented with and delved into the programming language SwiftUI. Additionally, I focused on developing a Safari extension for Apple Vision Pro. Creating a browser extension for a spatial computer presents unique challenges, particularly in navigation and scrolling. In this environment, there&#8217;s no need for a mouse or keyboard; instead, interactions are achieved [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1497,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,9],"tags":[],"class_list":["post-1450","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-browser","category-programming"],"_links":{"self":[{"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/posts\/1450","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/comments?post=1450"}],"version-history":[{"count":46,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/posts\/1450\/revisions"}],"predecessor-version":[{"id":2184,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/posts\/1450\/revisions\/2184"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/media\/1497"}],"wp:attachment":[{"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/media?parent=1450"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/categories?post=1450"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/tags?post=1450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}