{"id":572,"date":"2023-12-27T22:00:57","date_gmt":"2023-12-27T21:00:57","guid":{"rendered":"https:\/\/www.stefanvd.net\/blog\/?p=572"},"modified":"2024-05-01T18:04:08","modified_gmt":"2024-05-01T17:04:08","slug":"how-to-create-your-first-safari-extension-manifest-v3","status":"publish","type":"post","link":"https:\/\/www.stefanvd.net\/blog\/2023\/12\/27\/how-to-create-your-first-safari-extension-manifest-v3\/","title":{"rendered":"How to create your first Safari Extension Manifest V3?"},"content":{"rendered":"\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><p>Table of Contents<\/p><nav><ol><li><a href=\"#introduction\">Introduction<\/a><\/li><li><a href=\"#preparing-to-create-safari-extension-manifest-v-3\">Preparing to create Safari Extension Manifest V3<\/a><ol><li><a href=\"#register-app-id\">Register App ID<\/a><\/li><li><a href=\"#manage-new-app-with-safari-extension-manifest-v-3\">Manage New App (with Safari Extension Manifest V3)<\/a><\/li><li><a href=\"#app-information\">App Information<\/a><\/li><li><a href=\"#app-pricing-and-availability\">App Pricing and availability<\/a><ol><li><a href=\"#pricing\">Pricing<\/a><\/li><li><a href=\"#app-availability\">App Availability<\/a><\/li><\/ol><\/li><li><a href=\"#app-privacy\">App Privacy<\/a><\/li><\/ol><\/li><li><a href=\"#coding\">Coding<\/a><\/li><li><a href=\"#testing\">Testing<\/a><ol><li><a href=\"#device\">Device<\/a><\/li><li><a href=\"#app-store-guidelines-compliance\">App Store Guidelines Compliance<\/a><\/li><\/ol><\/li><li><a href=\"#publication\">Publication<\/a><ol><li><a href=\"#certificate\">Certificate<\/a><\/li><li><a href=\"#archive-it\">Archive it<\/a><\/li><li><a href=\"#app-store-connect\">App Store Connect<\/a><\/li><li><a href=\"#app-store-connect-1\">App Store Connect<\/a><\/li><li><a href=\"#example\">Example<\/a><\/li><\/ol><\/li><li><a href=\"#after-you-submit\">After You Submit<\/a><\/li><li><a href=\"#addition-resource\">Addition resource<\/a><\/li><li><a href=\"#conclusion\">Conclusion<\/a><\/li><\/ol><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"introduction\">Introduction<\/h2>\n\n\n\n<p>In this developer article, I will guide you through the complete process, starting from writing code to publishing the Safari Extension Manifest V3. These steps cover everything, from xCode and AppStoreConnect to earning revenue through downloads on the App Store (both Mac and iOS App Store). Keep in mind that Safari extension development is exclusive to Mac users, and Xcode is a prerequisite for the process. Unfortunately, there is no solution for Windows users, as the Safari desktop web browser is only compatible with the Apple ecosystem.<\/p>\n\n\n\n<p>The development process follows the Traditional Waterfall Approach system, encompassing preparation, coding, testing, documentation, and maintenance.<\/p>\n\n\n\n<p>Additionally, I will discuss 10 crucial points that could hinder the successful submission of your first Safari extension to the App Store. Given the Apple ecosystem&#8217;s constraints, it is essential to adhere to Apple product list limitations when publishing your extension.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"preparing-to-create-safari-extension-manifest-v-3\">Preparing to create Safari Extension Manifest V3<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"register-app-id\">Register App ID<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>To access the <a href=\"https:\/\/appstoreconnect.apple.com\" target=\"_blank\" rel=\"noreferrer noopener\">App Store Connection<\/a>, new developers are required to pay a yearly fee of <strong>99 USD<\/strong> or <strong>99 euros<\/strong>. This payment grants you entry to the portal, enabling the publication of apps on the App Store. Refer to this helpful page for guidance on <a href=\"https:\/\/developer.apple.com\/programs\/enroll\/\" data-type=\"link\" data-id=\"https:\/\/developer.apple.com\/programs\/enroll\/\" target=\"_blank\" rel=\"noreferrer noopener\">enrolling in the Apple Developer Program<\/a> subscription service and gaining access to the App Store Connect page.<br>(Before 2011, Apple had a free Safari program for publishing Safari extensions. However, this program was deprecated in 2015.)<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"416\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step1-1024x416.png\" alt=\"App Store Connection home page\" class=\"wp-image-1289\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step1-1024x416.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step1-300x122.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step1-768x312.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step1-1536x625.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step1-2048x833.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">App Store Connection home page<\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li>Click on the blue circle with the plus icon to initiate the creation of a new application. Then, select the menu item &#8220;New App&#8221; to begin the process of obtaining your first Safari Extension Manifest V3 in the store.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"416\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step2-1024x416.png\" alt=\"Context menu open to create a new app that include your Safari Extension Manifest V3\" class=\"wp-image-1291\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step2-1024x416.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step2-300x122.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step2-768x312.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step2-1536x625.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step2-2048x833.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Context menu open to create a new app that include your Safari Extension Manifest V3<\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li>A new modal will appear. Before filling in these input boxes, you need to create your app ID first. Click on the blue hyperlink &#8220;<a href=\"https:\/\/developer.apple.com\/account\/resources\/identifiers\/bundleId\/add\/bundle\" target=\"_blank\" rel=\"noreferrer noopener\">Certificates, Identifiers &amp; Profiles<\/a>&#8220;. Once on that page, enter your application name in the description box and the bundle ID in reverse domain, like &#8220;<em>com.stefanvd.print-for-safari<\/em>&#8220;. Afterward, click on the blue &#8220;Continue&#8221; button.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"553\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step4-1024x553.png\" alt=\"Register my App ID\" class=\"wp-image-1300\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step4-1024x553.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step4-300x162.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step4-768x414.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step4-1536x829.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step4-2048x1105.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Register my App ID<\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li>Once everything is in order, proceed by clicking the blue &#8220;Register&#8221; button.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"548\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step5-1-1024x548.png\" alt=\"Confirm the registration\" class=\"wp-image-1301\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step5-1-1024x548.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step5-1-300x161.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step5-1-768x411.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step5-1-1536x823.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step5-1-2048x1097.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Confirm the registration<\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"5\">\n<li>Now, on the &#8220;New App&#8221; modal, input your app name, select the primary language (e.g., English (U.S.)), and enter the newly created &#8220;Bundle ID&#8221;. Provide an SKU name to locally identify your application; for instance, use &#8220;stefanvd-printforsafari&#8221; following the format (author &#8211; product name). Lastly, set &#8220;User Access&#8221; to &#8220;Full Access&#8221; to ensure you have complete control for any changes or updates.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"419\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step6-1024x419.png\" alt=\"Create the New App\" class=\"wp-image-1299\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step6-1024x419.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step6-300x123.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step6-768x315.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step6-1536x629.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-connect-step6-2048x839.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Create the New App<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"manage-new-app-with-safari-extension-manifest-v-3\">Manage New App (with Safari Extension Manifest V3)<\/h3>\n\n\n\n<p>Now, you will be directed to the homepage, where you can manage your description and screenshots for each platform (Mac and iOS).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"578\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-home-page-1024x578.png\" alt=\"App home page\" class=\"wp-image-1306\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-home-page-1024x578.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-home-page-300x169.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-home-page-768x433.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-home-page-1536x867.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-home-page-2048x1155.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">App home page<\/figcaption><\/figure>\n\n\n\n<p>Here, you can upload screenshots for your Safari Extension Manifest V3 on both the Mac and iOS apps. Include the necessary description text, keywords, and the product marketing URL to provide more information about your Safari extension.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"app-information\">App Information<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Now, let us update the App Information tab. Click on this tab in the left-side panel and open &#8220;Content Rights&#8221;. A modal will appear. In this modal, select the radio button &#8220;No&#8221; if you are not using any other third-party content. Then, click on the blue &#8220;Done&#8221; button to confirm and close the modal.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"518\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-information-step1-1024x518.png\" alt=\"Content Rights\" class=\"wp-image-1310\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-information-step1-1024x518.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-information-step1-300x152.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-information-step1-768x389.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-information-step1-1536x778.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-information-step1-2048x1037.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Content Rights<\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li>Next, click on the button to add the &#8220;Age Rating&#8221;. In this modal, select the option that corresponds to your newly created account. Once done, 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=\"575\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-information-step2-1024x575.png\" alt=\"Age Rating (1 of 3)\" class=\"wp-image-1311\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-information-step2-1024x575.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-information-step2-300x169.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-information-step2-768x431.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-information-step2-1536x863.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-information-step2-2048x1151.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Age Rating (1 of 3)<\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li>In section 2, choose &#8220;No&#8221; as it is a Safari Extension Manifest V3 and not a web browser. Additionally, select &#8220;No&#8221; as it is not a gambling application.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"575\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-information-step3-1024x575.png\" alt=\"Age Rating (2 of 3)\" class=\"wp-image-1312\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-information-step3-1024x575.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-information-step3-300x168.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-information-step3-768x431.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-information-step3-1536x862.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-information-step3-2048x1150.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Age Rating (2 of 3)<\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li>Now, you will see the result of your rating. To save it, click on the blue &#8220;Done&#8221; button.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"574\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-information-step4-1024x574.png\" alt=\"Age Rating (3 of 3)\" class=\"wp-image-1313\" style=\"width:840px;height:auto\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-information-step4-1024x574.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-information-step4-300x168.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-information-step4-768x430.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-information-step4-1536x861.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-information-step4-2048x1148.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Age Rating (3 of 3)<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"app-pricing-and-availability\">App Pricing and availability<\/h3>\n\n\n\n<p>Now, we are going to set the price for your Safari Extension Manifest V3 and determine its visibility worldwide. Click on the first blue button, &#8220;Add Pricing&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"575\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step1-1024x575.png\" alt=\"App Pricing and availability\" class=\"wp-image-1314\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step1-1024x575.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step1-300x168.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step1-768x431.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step1-1536x862.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step1-2048x1150.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">App Pricing and availability<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"pricing\">Pricing<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>A new App Pricing modal will appear. In the price selection box, choose your price for your Safari Extension Manifest V3. I selected $0.00 as my browser extension is free and Open-Source for all web browsers.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step2-1024x538.png\" alt=\"App Pricing\" class=\"wp-image-1315\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step2-1024x538.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step2-300x158.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step2-768x403.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step2-1536x807.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step2-2048x1076.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">App Pricing<\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li>On the next page, choose the country or region to adjust the price. Since it is free, no adjustment is needed, and you can click on the blue &#8220;Next&#8221; button.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"535\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step3-1024x535.png\" alt=\"Country or Region Prices\" class=\"wp-image-1316\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step3-1024x535.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step3-300x157.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step3-768x402.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step3-1536x803.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step3-2048x1071.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Country or Region Prices<\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li>Review the final result and click on the blue &#8220;Confirm&#8221; button to close this modal.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"537\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step4-1024x537.png\" alt=\"Review the app pricing\" class=\"wp-image-1317\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step4-1024x537.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step4-300x157.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step4-768x403.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step4-1536x805.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step4-2048x1074.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Review the app pricing<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"app-availability\">App Availability<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Now, click on the &#8220;App Availability&#8221; button to select where the app should be visible.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"554\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step5-1024x554.png\" alt=\"App Availability\" class=\"wp-image-1318\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step5-1024x554.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step5-300x162.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step5-768x415.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step5-1536x831.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step5-2048x1108.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">App Availability<\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li>Choose the radio button &#8220;All countries or Regions&#8221;. Click the blue &#8220;Next&#8221; button.<\/li>\n\n\n\n<li>Now click on the blue &#8220;Confirm&#8221; button to close the modal.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"554\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step6-1024x554.png\" alt=\"Confirm make the app available in all countries\" class=\"wp-image-1319\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step6-1024x554.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step6-300x162.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step6-768x415.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step6-1536x831.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/pricing-schedule-step6-2048x1108.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Confirm making the app available in all countries<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"app-privacy\">App Privacy<\/h3>\n\n\n\n<p>Now, the final step is to address your application&#8217;s privacy. Initially, you will see a blank privacy URL. Click on the blue &#8220;Get Started&#8221; button to add your privacy page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"497\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step1-1024x497.png\" alt=\"App Privacy\" class=\"wp-image-1320\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step1-1024x497.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step1-300x146.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step1-768x373.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step1-1536x746.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step1-2048x994.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">App Privacy<\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>A new Data Collection modal will appear. Choose the radio button indicating that you do not collect data in this app. Then, click on the blue &#8220;Save&#8221; button.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"513\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step2-1024x513.png\" alt=\"Data Collection\" class=\"wp-image-1321\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step2-1024x513.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step2-300x150.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step2-768x385.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step2-1536x769.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step2-2048x1025.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Data Collection<\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li>Now, on this screen, enter your Privacy Policy URL and click on the blue &#8220;Save&#8221; button.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"463\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step3-1024x463.png\" alt=\"Privacy Policy\" class=\"wp-image-1322\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step3-1024x463.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step3-300x136.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step3-768x347.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step3-1536x695.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step3-2048x926.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Privacy Policy<\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li>Now, you will see the privacy badge labeled &#8220;Data Not Collected,&#8221; which will be visible in the App Store.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"493\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step4-1024x493.png\" alt=\"Product Page Preview\" class=\"wp-image-1323\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step4-1024x493.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step4-300x144.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step4-768x370.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step4-1536x740.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step4-2048x986.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Product Page Preview<\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li>If you agree, now click on the blue &#8220;Publish&#8221; button.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"495\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step5-1024x495.png\" alt=\"Publish your app privacy responses\" class=\"wp-image-1324\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step5-1024x495.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step5-300x145.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step5-768x371.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step5-1536x743.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-privacy-step5-2048x990.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Publish your app privacy responses<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"coding\">Coding<\/h2>\n\n\n\n<p>Now, let us move on to the code development work. If you already have a successful Chrome extension with Manifest V3 in the store, ensure that you have the zip file from your working Chrome extension and place it on your desktop. Unzip the file to a folder.<\/p>\n\n\n\n<p>While you can use Manifest V2, it is advisable to use Manifest V3 for uniformity across all web browsers and to leverage the latest advancements in performance, security, and privacy technology for your users.<\/p>\n\n\n\n<p>Requirement:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Make sure you have installed Xcode 15.1 on your Mac computer<\/li>\n\n\n\n<li>You are using the latest macOS 14<\/li>\n\n\n\n<li>Chrome Extension folder<\/li>\n<\/ul>\n\n\n\n<p>The converter will perform the following tasks:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Creates an Xcode project<\/li>\n\n\n\n<li>Configures the Xcode project with a macOS app or iOS app that installs the extension in Safari<\/li>\n\n\n\n<li>Configures a Safari web extension with your extension files in the Xcode project<\/li>\n<\/ul>\n\n\n\n<p>Follow the steps here below on how to get your Xcode project for your Safari extension:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the Terminal that can be found in the Launchpad<\/li>\n\n\n\n<li>When the Terminal window is open execute this path in your Terminal<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>xcrun safari-web-extension-converter \/path\/to\/extension<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li>It creates a complete Xcode project. That includes the app on macOS and iOS and the shared folder that contains your new Safari extension.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"662\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/terminal-xcode-convert-to-safari-extension-manifest-v3-1024x662-1.webp\" alt=\"Print for Safari in a new folder with Xcode project\" class=\"wp-image-1697\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/terminal-xcode-convert-to-safari-extension-manifest-v3-1024x662-1.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/terminal-xcode-convert-to-safari-extension-manifest-v3-1024x662-1-300x194.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/terminal-xcode-convert-to-safari-extension-manifest-v3-1024x662-1-768x497.webp 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Print for Safari in a new folder with Xcode project<\/figcaption><\/figure>\n\n\n\n<p>That is it. It has created a new folder &#8220;Print for Safari&#8221; on the desktop. Open this folder, and you can access the &#8220;<em>Print for Safari.xcodeproj<\/em>&#8221; Xcode project. Now, you can run and test your Safari Extension Manifest V3 on desktop and mobile, including your iPhone and iPad.<\/p>\n\n\n\n<p>However, there are some improvements needed:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Here, it uses a different bundle ID<\/li>\n\n\n\n<li>The app category is not selected<\/li>\n\n\n\n<li>The manifest.json specifies that only a certain version of the Safari extension can run this. Note that Safari 15.4 only supports Safari Extension Manifest v3.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\"browser_specific_settings\": {\n\"safari\": { \"strict_min_version\": \"15.4\", \"strict_max_version\": \"*\" }\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Also, ensure that your translation name does not exceed 112 characters, as this could lead to a failure during the App Store submission later on.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>Asset validation failed\nInvalid messages file. The messages.json validation failed for locale ar in the Safari web extension bundle Print for Safari.app\/Contents\/PlugIns\/Print for Safari Extension.appex. The description field must be present, of string type, and 112 or fewer characters long.<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"testing\">Testing<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"device\">Device<\/h3>\n\n\n\n<p>Make sure to test your new Safari Extension Manifest V3 on a real device, not in a simulator, such as a MacBook or an iPhone 15 device. Test it from a user&#8217;s perspective to identify and address any potential pain points.<\/p>\n\n\n\n<p>Select in the Xcode toolbar the platform you want to test your new Safari Extension Manifest V3. For example &#8220;Mac&#8221;. Click on the play button left of this selected platform.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"app-store-guidelines-compliance\">App Store Guidelines Compliance<\/h3>\n\n\n\n<p>Ensure your extension complies with Apple&#8217;s App Store guidelines to avoid rejection or removal.<\/p>\n\n\n\n<p>If you are a beginner developer, follow these guidelines because failing to adhere to the <a href=\"https:\/\/developer.apple.com\/app-store\/review\/guidelines\/\" target=\"_blank\" rel=\"noreferrer noopener\">Apple Store Guidelines<\/a> can prevent your new Safari Extension Manifest V3 from becoming visible in the App Store. Here are <strong>10 important guidelines that you may overlook when publishing in a store<\/strong> that is more relaxed in terms of openness and freedom for the user:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Make sure that the features mentioned in the App Store description text are already present in the Safari extension and not just promised as &#8220;coming soon&#8221;. It is not permitted to write about features that are not currently available in your Safari extension, as Apple may disallow the app from the App Store in such cases.<br>See <strong>2.1 App Completeness<\/strong><\/li>\n\n\n\n<li>You are not allowed to include a PayPal or any donation link in your Safari extension. If you wish to receive donations for your free Safari extension, you must utilize Apple&#8217;s in-app purchase API.<br>See <strong>3.1.1 In-App Purchase<\/strong><\/li>\n\n\n\n<li>If your Safari extension is part of an online subscription service, you are required to provide Apple&#8217;s in-app purchase API as an option.<br>See <strong>3.1.2 Subscriptions<\/strong><\/li>\n\n\n\n<li>Ensure that the Safari extension offers sufficient complexity for the user. A single action with no customization is not permitted on the App Store. Provide a variety of customization options for Safari users.<br>See <strong>4.2 Minimum Functionality<\/strong><\/li>\n\n\n\n<li>Your Safari extension must function with the latest version of Safari on both Mac and iPhone. Additionally, it should include settings and a help screen to guide users on how to set it up.<br>See <strong>4.4 Extensions<\/strong><\/li>\n\n\n\n<li>When creating a screenshot of your Safari extension for the App Store, ensure that no third-party applications are visible. This means excluding any other web browser applications, such as Google Chrome, and avoiding the display of unrelated applications like Visual Studio Code. Additionally, refrain from using screenshots featuring the Google Chrome logo.<br>See <strong>3.2.2 Unacceptable<\/strong><\/li>\n\n\n\n<li>In the App Store description text, refrain from mentioning support for other web browser names, including Google Chrome, Firefox, Opera, and Microsoft Edge.<br>See <strong>3.2.2 Unacceptable<\/strong><\/li>\n\n\n\n<li>When naming an application on the App Store, avoid using the name &#8220;XXX Safari.&#8221; Instead, use the name format such as &#8220;XXX for Safari&#8221;.<br>See <strong>4.1 Copycats<\/strong><\/li>\n\n\n\n<li>Ensure that you have a working privacy page for both your app and Safari extension. It should be visible to new users on the App Store.<br>See <strong>5.1 Privacy<\/strong><\/li>\n\n\n\n<li>Avoid using trademarks in your application name. It is prohibited to use them as part of your new application name. For instance, do not use names like &#8220;YouTube XXX.&#8221;<br>See <strong>5.2 Intellectual Property<\/strong><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"publication\">Publication<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"certificate\">Certificate<\/h3>\n\n\n\n<p>Ensure that you have all five certificates installed. That is needed to sign your Mac and iOS application (that includes your Safari Extension Manifest V3) to publish it in the App Store:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Apple Development: Stefan Van Damme<\/li>\n\n\n\n<li>Developer ID Installer: Stefan Van Damme<\/li>\n\n\n\n<li>Apple Distribution: Stefan Van Damme<\/li>\n\n\n\n<li>3rd Party Mac Developer Installer: Stefan Van Damme<\/li>\n\n\n\n<li>Developer ID Application: Stefan Van Damme<\/li>\n<\/ul>\n\n\n\n<p>To check if you have those certificates installed on your device, use the following Terminal command:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;security find-identity -v<\/code><\/pre>\n\n\n\n<p>To create a developer certificate see this <a href=\"https:\/\/developer.apple.com\/help\/account\/create-certificates\/create-developer-id-certificates\/\" target=\"_blank\" rel=\"noopener\">Apple developer help page<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"archive-it\">Archive it<\/h3>\n\n\n\n<p>Now, we are going to archive the file so you can upload it to the App Store. Here are the steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Ensure you select &#8220;Mac application&#8221; and &#8220;Apple Silicon, Intel&#8221; (as indicated by the red rectangle).<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"662\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/archive-safari-extension-step1-1024x662.png\" alt=\"Safari Extension Manifest V3 to archive Apple Silicon and Intel\" class=\"wp-image-1332\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/archive-safari-extension-step1-1024x662.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/archive-safari-extension-step1-300x194.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/archive-safari-extension-step1-768x496.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/archive-safari-extension-step1-1536x993.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/archive-safari-extension-step1-2048x1324.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Safari Extension Manifest V3 to archive Apple Silicon and Intel<\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li>Now, open the &#8220;Product&#8221; menu from the Apple menu bar, and then click on &#8220;Archive&#8221;.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"662\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/archive-safari-extension-step2-1024x662.png\" alt=\"Archive Safari Extension Manifest V3\" class=\"wp-image-1333\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/archive-safari-extension-step2-1024x662.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/archive-safari-extension-step2-300x194.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/archive-safari-extension-step2-768x496.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/archive-safari-extension-step2-1536x993.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/archive-safari-extension-step2-2048x1324.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Archive Safari Extension Manifest V3<\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li>A new window will appear; click on the blue button &#8220;Distribute App&#8221;.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"662\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/archive-safari-extension-step3-1024x662.png\" alt=\"Distribute your Safari Extension Manifest V3\" class=\"wp-image-1334\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/archive-safari-extension-step3-1024x662.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/archive-safari-extension-step3-300x194.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/archive-safari-extension-step3-768x496.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/archive-safari-extension-step3-1536x993.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/archive-safari-extension-step3-2048x1324.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Distribute your Safari Extension Manifest V3<\/figcaption><\/figure>\n\n\n\n<p>Next, click on &#8220;TestFlight &amp; App Store&#8221;, then click on the blue button &#8220;Distribute&#8221;. It will automatically package, sign, and upload to the store.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"662\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/archive-safari-extension-step4-1024x662.png\" alt=\"TestFlight &amp; App Store\" class=\"wp-image-1335\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/archive-safari-extension-step4-1024x662.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/archive-safari-extension-step4-300x194.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/archive-safari-extension-step4-768x496.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/archive-safari-extension-step4-1536x993.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/archive-safari-extension-step4-2048x1324.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">TestFlight &amp; App Store<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"app-store-connect\">App Store Connect<\/h3>\n\n\n\n<p>Now, open your App Store Connect for your new app, named &#8220;Print for Safari.&#8221; Click on the button. On the &#8220;Prepare for submission&#8221; page, scroll down to the &#8220;Build&#8221; section. Here, you can choose the latest uploaded archive file.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"265\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-build-upload-1024x265.png\" alt=\"App Store Connect Build panel\" class=\"wp-image-1340\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-build-upload-1024x265.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-build-upload-300x78.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-build-upload-768x199.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-build-upload-1536x397.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/12\/app-store-build-upload-2048x530.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">App Store &#8211; Build panel<\/figcaption><\/figure>\n\n\n\n<p>When everything is complete, click on the blue button &#8220;Add to Review&#8221; at the top of the webpage.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"app-store-connect-1\">App Store Connect<\/h3>\n\n\n\n<p>Everything you need to publish is available with App Store Connect. To make the Safari Extension Manifest V3 available, you need to pay a yearly fee of 99 USD or 99 euros to keep it visible in the App Store.<\/p>\n\n\n\n<p>Having a paid Apple Developer account comes with several benefits, especially if you are an app developer or interested in creating software for Apple&#8217;s platforms. Here are some of the key advantages:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Two technical support assistants to help with your code.<\/li>\n\n\n\n<li>Access to WWDC each year, where you can ask your developer questions to an Apple engineer via a Webex meeting call from Apple Inc. in Cupertino, California, United States.<\/li>\n\n\n\n<li>Ability to test the latest developer versions of macOS, iOS, iPadOS, watchOS, tvOS, and visionOS.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"example\">Example<\/h3>\n\n\n\n<p>Today, I already have several Safari extensions available in the App Store, all of which are free and open-source. Some examples include <a href=\"https:\/\/apps.apple.com\/us\/app\/ambient-aurea-for-safari\/id1549194944?mt=12\" target=\"_blank\" rel=\"noreferrer noopener\">Ambient Aurea<\/a>, <a href=\"https:\/\/apps.apple.com\/us\/app\/full-screen-for-safari\/id1462623715?mt=12\" target=\"_blank\" rel=\"noreferrer noopener\">Full Screen<\/a>, <a href=\"https:\/\/apps.apple.com\/us\/app\/zoom-for-safari\/id1423085875?mt=12\" target=\"_blank\" rel=\"noreferrer noopener\">Zoom<\/a>, <a href=\"https:\/\/apps.apple.com\/us\/app\/turn-off-the-lights-for-safari\/id1273998507\" target=\"_blank\" rel=\"noreferrer noopener\">Turn Off the Lights<\/a>, etc.<\/p>\n\n\n\n<p>And an example of my first pay Safari Extension Manifest V3 is the &#8220;<a href=\"https:\/\/apps.apple.com\/us\/app\/home-tab-for-safari\/id1585512140\" target=\"_blank\" rel=\"noopener\">Home Tab for Safari<\/a>&#8220;. It is one price, for all your Mac and iOS devices.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"after-you-submit\">After You Submit<\/h2>\n\n\n\n<p>When you submit your first Safari Extension Manifest V3, congratulations! Now, it can take between 1 and 7 working days to make your app visible. When Apple begins the app review, you will receive an email notification. The Apple team will review your App Store screenshots and text, and test it on all devices (Mac and iPhone). Once everything is in order, you will receive another email notifying you that Apple will publish your Safari extension in the App Store. Alternatively, you might receive an email indicating that you need to address a specific issue.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"addition-resource\">Addition resource <\/h2>\n\n\n\n<p>To learn more about Safari Extension Manifest V3 APIs and continue to create a creative experience for the users, see these resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/groups.google.com\/a\/chromium.org\/g\/chromium-extensions?hl=en\" target=\"_blank\" rel=\"noreferrer noopener\">Chromium Extension group<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.chrome.com\/docs\/extensions\" target=\"_blank\" rel=\"noreferrer noopener\">Chrome Extension Developer Documentation<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.apple.com\/documentation\/safariservices\/safari_web_extensions\/converting_a_web_extension_for_safari\" target=\"_blank\" rel=\"noreferrer noopener\">Converting a web extension for Safari<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.apple.com\/documentation\/xcode\/distributing-your-app-for-beta-testing-and-releases\" target=\"_blank\" rel=\"noreferrer noopener\">How to distribute the app itself to the App Store<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.apple.com\/app-store\/review\/guidelines\/\" target=\"_blank\" rel=\"noreferrer noopener\">Apple Store Review Guidelines<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>I hope you found this guide enjoyable and informative on transitioning your Chrome extension into a Safari Extension Manifest V3, especially if you are a beginner developer. Now that you are familiar with the process of getting your Apple Safari Extension Manifest V3 into the Apple ecosystem market. If you like my open work I share this with the browser extension community. And if you would like to support my work in the web community, please consider <a href=\"https:\/\/www.stefanvd.net\/donate\/\" target=\"_blank\" rel=\"noreferrer noopener\">making a small donation<\/a>.<\/p>\n\n\n\n<p><em>Content Disclaimer: This is an individual developer article on how you upgrade your Chrome Extension to <\/em>Safari Extension Manifest V3<em>, that I want to share with the browser extension community. I am not paid by Google or Apple.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction In this developer article, I will guide you through the complete process, starting from writing code to publishing the Safari Extension Manifest V3. These steps cover everything, from xCode and AppStoreConnect to earning revenue through downloads on the App Store (both Mac and iOS App Store). Keep in mind that Safari extension development is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1346,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-572","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/posts\/572","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=572"}],"version-history":[{"count":45,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/posts\/572\/revisions"}],"predecessor-version":[{"id":1698,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/posts\/572\/revisions\/1698"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/media\/1346"}],"wp:attachment":[{"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/media?parent=572"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/categories?post=572"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/tags?post=572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}