{"id":2105,"date":"2026-02-01T16:05:29","date_gmt":"2026-02-01T15:05:29","guid":{"rendered":"https:\/\/www.stefanvd.net\/blog\/?p=2105"},"modified":"2026-02-22T15:19:01","modified_gmt":"2026-02-22T14:19:01","slug":"how-to-load-and-debug-safari-extensions-without-xcode","status":"publish","type":"post","link":"https:\/\/www.stefanvd.net\/blog\/2026\/02\/01\/how-to-load-and-debug-safari-extensions-without-xcode\/","title":{"rendered":"How to Load and Debug Safari Extensions in Safari 26 (Without Xcode)"},"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=\"#making-extensions-available-on-all-platforms\">Making Extensions Available on All Platforms<\/a><\/li><li><a href=\"#load-temp-folder\">Load a Temporary Safari Extension Folder<\/a><ul><li><a href=\"#step-by-step-instructions\">Step-by-step instructions<\/a><\/li><\/ul><\/li><li><a href=\"#keybaord\">Customizing Keyboard Shortcuts<\/a><\/li><li><a href=\"#problem-safari-extensions-must-live-inside-a-mac-or-i-phone-app\">Problem: Safari Extensions Must Live Inside a Mac or iPhone App<\/a><\/li><li><a href=\"#troubleshooting\">Troubleshooting<\/a><ul><li><a href=\"#sound-cracking\">Sound cracking<\/a><\/li><li><a href=\"#background-script-in-the-form-of-a-service-worker-cannot-be-debugged\">Background Service Worker Cannot Be Debugged<\/a><\/li><\/ul><\/li><li><a href=\"#addition-resource\">Resource<\/a><\/li><li><a href=\"#conclusion\">Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<p>Last month, <a href=\"https:\/\/www.stefanvd.net\/blog\/2026\/01\/10\/6-powerful-safari-extensions\/\" data-type=\"post\" data-id=\"2070\">I launched all my browser extensions on the Safari web browser<\/a>, now available in the Apple App Store. Building and testing them in Safari is much easier, as you no longer need to create a Mac app in Xcode. In this beginner developer guide, I will show you how to get started with Safari 26.<\/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\/2026\/01\/safari-web-browser-on-macos26-1024x662.webp\" alt=\"macOS 26 with Safari web browser open\" class=\"wp-image-2202\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-web-browser-on-macos26-1024x662.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-web-browser-on-macos26-300x194.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-web-browser-on-macos26-768x496.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-web-browser-on-macos26-1536x993.webp 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-web-browser-on-macos26-2048x1324.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">macOS 26 with Safari web browser open<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"making-extensions-available-on-all-platforms\">Making Extensions Available on All Platforms<\/h2>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>One of the first things I do when developing a browser extension is make it available across all platforms. This includes Safari, so users can stay productive in the browser they are most comfortable with. That includes my <strong>Turn Off the Lights<\/strong> browser extension.<\/p>\n<cite>Stefan Van Damme &#8211; Developer of the Turn Off the Lights browser extension<\/cite><\/blockquote>\n\n\n\n<p>Each friction point can take time to test the real experience in the Safari web browser. Apple now provides a new feature that makes it very easy to load a temporary Safari extension from a folder. This means you no longer need to spend time figuring out the correct structure to load an extension in the Xcode app. With a single command <code>xcrun safari-web-extension-packager \/path\/to\/extension<\/code>, you can build your ZIP Chrome extension into a macOS and iOS application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"load-temp-folder\">Load a Temporary Safari Extension Folder<\/h2>\n\n\n\n<p>Safari 26 introduces a feature similar to Google Chrome\u2019s &#8220;Developer Mode&#8221;, allowing you to load an extension directly from a folder.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-by-step-instructions\">Step-by-step instructions<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open your Safari web browser, and in the Apple menu bar, click on the name &#8220;Safari&#8221;. Then select &#8220;Settings\u2026&#8221; from the menu.<\/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\/2026\/01\/apple-menu-bar-open-safari-item-1024x662.webp\" alt=\"Safari web browser on the menu item Settings\" class=\"wp-image-2203\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/apple-menu-bar-open-safari-item-1024x662.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/apple-menu-bar-open-safari-item-300x194.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/apple-menu-bar-open-safari-item-768x496.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/apple-menu-bar-open-safari-item-1536x993.webp 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/apple-menu-bar-open-safari-item-2048x1324.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Safari web browser on the menu item Settings<\/figcaption><\/figure>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Now you will see the Safari Settings window. Click on the &#8220;Developer&#8221; tab at the top.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"572\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-settings-window-on-developer-tab-1024x572.webp\" alt=\"Safari Settings window on the Developer tab\" class=\"wp-image-2204\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-settings-window-on-developer-tab-1024x572.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-settings-window-on-developer-tab-300x168.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-settings-window-on-developer-tab-768x429.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-settings-window-on-developer-tab-1536x859.webp 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-settings-window-on-developer-tab.webp 1896w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Safari Settings window on the Developer tab<\/figcaption><\/figure>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Next, click on the gray button labeled &#8220;Add Temporary Extension\u2026&#8221;.<\/li>\n\n\n\n<li>You will be prompted to enter your Mac password or use your fingerprint to allow this change.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"572\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-fingerprint-window-1024x572.webp\" alt=\"Allow the unsigned extensions to install by confirming with a password or fingerprint\" class=\"wp-image-2205\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-fingerprint-window-1024x572.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-fingerprint-window-300x168.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-fingerprint-window-768x429.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-fingerprint-window-1536x859.webp 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-fingerprint-window.webp 1896w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Allow the unsigned extensions to install by confirming with a password or fingerprint<\/figcaption><\/figure>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>A dialog window will appear, allowing you to choose the location of your Safari extension code. This should be the root folder that contains the <code>manifest.json<\/code> file. I selected my Turn Off the Lights Safari extension folder.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"491\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/choose-folder-safari-extension-1024x491.webp\" alt=\"Browse to the folder of your Safari extension\" class=\"wp-image-2206\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/choose-folder-safari-extension-1024x491.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/choose-folder-safari-extension-300x144.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/choose-folder-safari-extension-768x369.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/choose-folder-safari-extension-1536x737.webp 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/choose-folder-safari-extension-2048x983.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Browse to the folder of your Safari extension<\/figcaption><\/figure>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li>When you are in that folder, click the blue &#8220;Select&#8221; button.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"769\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/turn-off-the-lights-safari-extension-installed-1024x769.webp\" alt=\"Turn Off the Lights Safari extension added to the temporary extension list\" class=\"wp-image-2208\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/turn-off-the-lights-safari-extension-installed-1024x769.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/turn-off-the-lights-safari-extension-installed-300x225.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/turn-off-the-lights-safari-extension-installed-768x577.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/turn-off-the-lights-safari-extension-installed-1536x1154.webp 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/turn-off-the-lights-safari-extension-installed.webp 1896w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Turn Off the Lights Safari extension added to the temporary extension list<\/figcaption><\/figure>\n\n\n\n<ol start=\"6\" class=\"wp-block-list\">\n<li>Close the window, and you will see the Safari extension icon in the Safari toolbar. For me, this is the blue accent lamp button for Turn Off the Lights.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"613\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari26-with-turn-off-the-lights-safari-extension-icon-in-the-toolbar-1024x613.webp\" alt=\"Safari web browser with the temporary extension installed\" class=\"wp-image-2209\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari26-with-turn-off-the-lights-safari-extension-icon-in-the-toolbar-1024x613.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari26-with-turn-off-the-lights-safari-extension-icon-in-the-toolbar-300x180.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari26-with-turn-off-the-lights-safari-extension-icon-in-the-toolbar-768x460.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari26-with-turn-off-the-lights-safari-extension-icon-in-the-toolbar-1536x920.webp 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari26-with-turn-off-the-lights-safari-extension-icon-in-the-toolbar-2048x1227.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Safari web browser with the temporary extension installed<\/figcaption><\/figure>\n\n\n\n<p>Now, when I click on the lamp button icon in the Safari toolbar, it dims the web page. There is no Mac application or Xcode running in the background.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"613\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/turn-off-the-lights-dimmed-the-web-page-1024x613.webp\" alt=\"Dimmed web page in Safari web browser\" class=\"wp-image-2211\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/turn-off-the-lights-dimmed-the-web-page-1024x613.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/turn-off-the-lights-dimmed-the-web-page-300x180.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/turn-off-the-lights-dimmed-the-web-page-768x460.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/turn-off-the-lights-dimmed-the-web-page-1536x920.webp 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/turn-off-the-lights-dimmed-the-web-page-2048x1227.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Dimmed web page in Safari web browser<\/figcaption><\/figure>\n\n\n\n<p>In Safari 26, you can now load browser extension code just like in Google Chrome\u2019s developer mode. Simply browse to the folder where your manifest is located. You no longer need to create an empty app first and build it; after that, you could see it in Safari\u2019s web browser only when running Xcode in debugging mode.<\/p>\n\n\n\n<p>Important note: when you open that folder location as an extension, you will be asked for your computer password or fingerprint to allow this change. This is for security, to ensure that you are explicitly permitting this Safari extension to run in the Safari web browser. Also, this is temporary, which means that when you close Safari, the extension will no longer be active and is automatically unloaded. This setup is intended for developing, testing, and debugging Safari extensions, and is not meant for everyday use by non-developer users.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"keybaord\">Customizing Keyboard Shortcuts<\/h2>\n\n\n\n<p>In Safari 26, you can finally customize the keyboard shortcuts you added in the <code>manifest.json<\/code> file. Reopen the Safari Extensions window, and below the selected extension, you will see a list of shortcut commands. Click inside a text field to change it to a new keyboard combination.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"769\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-extension-keyboard-combination-1024x769.webp\" alt=\"Change the Safari extension Shortcuts\" class=\"wp-image-2212\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-extension-keyboard-combination-1024x769.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-extension-keyboard-combination-300x225.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-extension-keyboard-combination-768x577.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-extension-keyboard-combination-1536x1154.webp 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-extension-keyboard-combination.webp 1896w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Change the Safari extension Shortcuts<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"problem-safari-extensions-must-live-inside-a-mac-or-i-phone-app\">Problem: Safari Extensions Must Live Inside a Mac or iPhone App<\/h2>\n\n\n\n<p>If you want to <strong>distribute<\/strong> your Safari extension through the Apple App Store, you still need:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A Mac app<\/li>\n\n\n\n<li>An iPhone or iPad app (if applicable)<\/li>\n<\/ul>\n\n\n\n<p>Apple does not currently allow uploading a standalone ZIP file of a Safari extension to the App Store.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"troubleshooting\">Troubleshooting<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"sound-cracking\">Sound cracking<\/h3>\n\n\n\n<p>If you hear a cracking sound on your MacBook Pro after testing a Safari extension using the <strong>iPhone 17 Pro Max simulator<\/strong>, run this command in Terminal:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>sudo killall coreaudiod<\/code><\/pre>\n\n\n\n<p>This restarts the macOS audio service.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"background-script-in-the-form-of-a-service-worker-cannot-be-debugged\">Background Service Worker Cannot Be Debugged<\/h3>\n\n\n\n<p>If your extension uses Manifest V3 with a background script implemented as a service worker, Safari does not allow you to open a debugging window for the background script. Expanding the Developer menu in Safari shows nothing under <strong>Service Workers<\/strong> or <strong>Web Extension Background Content<\/strong>, which is a bug. In contrast, other browsers such as Google Chrome, Microsoft Edge, Opera, and Firefox handle this correctly.<\/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\/2026\/01\/safari-extension-no-service-worker-visible-1024x662.webp\" alt=\"No Safari Servicer worker process running\" class=\"wp-image-2213\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-extension-no-service-worker-visible-1024x662.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-extension-no-service-worker-visible-300x194.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-extension-no-service-worker-visible-768x496.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-extension-no-service-worker-visible-1536x993.webp 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-extension-no-service-worker-visible-2048x1324.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">No Safari Servicer worker process running<\/figcaption><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>\"background\": {<br>\"service_worker\": \"scripts\/background.js\"<br>},<\/code><\/pre>\n\n\n\n<p id=\"background-script-in-the-form-of-a-service-worker-cannot-be-debugged\">If I switch the background script back to non-persistent mode, everything works correctly.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"background\": {<br>\"scripts\": &#91;\"scripts\/constants.js\",\"scripts\/background.js\"]<br>},<\/code><\/pre>\n\n\n\n<p id=\"background-script-in-the-form-of-a-service-worker-cannot-be-debugged\">From the Developer menu, under the <strong>Web Extension Background Content<\/strong> submenu, I can open the background script debugging window for the Safari extension.<\/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\/2026\/01\/safari-extension-servicer-worker-visible-at-manifest-v2-1024x662.webp\" alt=\"Servicer worker is visible to debug \" class=\"wp-image-2214\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-extension-servicer-worker-visible-at-manifest-v2-1024x662.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-extension-servicer-worker-visible-at-manifest-v2-300x194.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-extension-servicer-worker-visible-at-manifest-v2-768x496.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-extension-servicer-worker-visible-at-manifest-v2-1536x993.webp 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-extension-servicer-worker-visible-at-manifest-v2-2048x1324.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Servicer worker is visible to debug<\/figcaption><\/figure>\n\n\n\n<p>When you click on it, a debug window opens, showing the background script of your Safari extension in action.<\/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\/2026\/01\/safari-extension-debug-window-1024x662.webp\" alt=\"Safari Background page debug web inspector\" class=\"wp-image-2215\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-extension-debug-window-1024x662.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-extension-debug-window-300x194.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-extension-debug-window-768x496.webp 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-extension-debug-window-1536x993.webp 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2026\/01\/safari-extension-debug-window-2048x1324.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Safari Background page debug web inspector<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"addition-resource\">Resource<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developer.apple.com\/documentation\/safariservices\/running-your-safari-web-extension\" target=\"_blank\" rel=\"noopener\"><\/a><a href=\"https:\/\/developer.apple.com\/documentation\/safariservices\/running-your-safari-web-extension#Temporarily-install-a-web-extension-folder-in-macOS-Safari\" target=\"_blank\" rel=\"noopener\">Temporarily install a web extension folder in macOS Safari<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.apple.com\/documentation\/safariservices\/running-your-safari-web-extension\" target=\"_blank\" rel=\"noopener\">Running your Safari web extension<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>Safari 26 makes developing Safari web extensions faster and more approachable than ever. You can now load, test, and debug extensions directly from a folder, without Xcode or a Mac app, making Safari development feel much closer to Chrome\u2019s workflow. If you enjoyed this developer guide and want to support my work for the browser extension community, your support truly means a lot. <a href=\"https:\/\/www.stefanvd.net\/donate\/\">Every donation<\/a>, big or small, helps me continue creating valuable content.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last month, I launched all my browser extensions on the Safari web browser, now available in the Apple App Store. Building and testing them in Safari is much easier, as you no longer need to create a Mac app in Xcode. In this beginner developer guide, I will show you how to get started with [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2243,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,9],"tags":[],"class_list":["post-2105","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\/2105","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=2105"}],"version-history":[{"count":25,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/posts\/2105\/revisions"}],"predecessor-version":[{"id":2366,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/posts\/2105\/revisions\/2366"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/media\/2243"}],"wp:attachment":[{"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/media?parent=2105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/categories?post=2105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/tags?post=2105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}