Company Logo
  • Industries

      Industries

    • Retail and Wholesale
    • Travel and Borders
    • Fintech and Banking
    • Textile and Fashion
    • Life Science and MedTech
    • Featured

      image
    • Mastering Prompt Engineering in 2025
    • Techniques, Trends & Real-World Examples

      image
    • Edge AI vs. Cloud AI: Choosing the Right Intelligence for the Right Moment
    • From lightning-fast insights at the device level to deep computation in the cloud, AI deployment is becoming more strategic than ever.

  • Capabilities

      Capabilities

    • Agentic AI
    • Product Engineering
    • Digital Transformation
    • Browser Extension
    • Devops
    • QA Test Engineering
    • Data Science
    • Featured

      image
    • Agentic AI for RAG and LLM: Autonomous Intelligence Meets Smarter Retrieval
    • Agentic AI is making retrieval more contextual, actions more purposeful, and outcomes more intelligent.

      image
    • Agentic AI in Manufacturing: Smarter Systems, Autonomous Decisions
    • As industries push toward hyper-efficiency, Agentic AI is emerging as a key differentiator—infusing intelligence, autonomy, and adaptability into the heart of manufacturing operations.

  • Resources

      Resources

    • Insights
    • Case Studies
    • AI Readiness Guide
    • Trending Insights

      image
    • Safeguarding the Future with AI TRiSM
    • Designing Intelligent Systems That Are Trustworthy, Secure, and Accountable

      image
    • Agentic AI in Manufacturing: Smarter Systems, Autonomous Decisions
    • As industries push toward hyper-efficiency, Agentic AI is emerging as a key differentiator—infusing intelligence, autonomy, and adaptability into the heart of manufacturing operations.

  • About

      About

    • About Coditude
    • Press Releases
    • Social Responsibility
    • Women Empowerment
    • Events

    • Coditude At RSAC 2024: Leading Tomorrow's Tech.
    • Generative AI Summit Austin 2025
    • Foundation Day 2025
    • Featured

      image
    • Coditude Turns 14!
    • Celebrating People, Purpose, and Progress

      image
    • Tree Plantation Drive From Saplings to Shade
    • Coditude CSR activity at Baner Hills, where we planted 100 trees, to protect our environment and create a greener sustainable future.

  • Careers

      Careers

    • Careers
    • Internship Program
    • Company Culture
    • Featured

      image
    • Mastering Prompt Engineering in 2025
    • Techniques, Trends & Real-World Examples

      image
    • GitHub Copilot and Cursor: Redefining the Developer Experience
    • AI-powered coding tools aren’t just assistants—they’re becoming creative collaborators in software development.

  • Contact
Coditude Logo
  • Industries
    • Retail
    • Travel and Borders
    • Fintech and Banking
    • Martech and Consumers
    • Life Science and MedTech
    • Featured

      Mastering Prompt Engineering in 2025

      Techniques, Trends & Real-World Examples

      Edge AI vs. Cloud AI: Choosing the Right Intelligence for the Right Moment

      From lightning-fast insights at the device level to deep computation in the cloud, AI deployment is becoming more strategic than ever.

  • Capabilities
    • Agentic AI
    • Product Engineering
    • Digital transformation
    • Browser extension
    • Devops
    • QA Test Engineering
    • Data Science
    • Featured

      Agentic AI for RAG and LLM: Autonomous Intelligence Meets Smarter Retrieval

      Agentic AI is making retrieval more contextual, actions more purposeful, and outcomes more intelligent.

      Agentic AI in Manufacturing: Smarter Systems, Autonomous Decisions

      As industries push toward hyper-efficiency, Agentic AI is emerging as a key differentiator—infusing intelligence, autonomy, and adaptability into the heart of manufacturing operations.

  • Resources
    • Insights
    • Case studies
    • AI Readiness Guide
    • Trending Insights

      Safeguarding the Future with AI TRiSM

      Designing Intelligent Systems That Are Trustworthy, Secure, and Accountable

      Agentic AI in Manufacturing: Smarter Systems, Autonomous Decisions

      As industries push toward hyper-efficiency, Agentic AI is emerging as a key differentiator—infusing intelligence, autonomy, and adaptability into the heart of manufacturing operations.

  • About
    • About Coditude
    • Press Releases
    • Social Responsibility
    • Women Empowerment
    • Events

      Coditude At RSAC 2024: Leading Tomorrow's Tech.

      Generative AI Summit Austin 2025

      Foundation Day 2025

    • Featured

      Coditude Turns 14!

      Celebrating People, Purpose, and Progress

      Tree Plantation Drive From Saplings to Shade

      Coditude CSR activity at Baner Hills, where we planted 100 trees, to protect our environment and create a greener sustainable future.

  • Careers
    • Careers
    • Internship Program
    • Company Culture
    • Featured

      Mastering Prompt Engineering in 2025

      Techniques, Trends & Real-World Examples

      GitHub Copilot and Cursor: Redefining the Developer Experience

      AI-powered coding tools aren’t just assistants—they’re becoming creative collaborators in software development.

  • Contact

Contact Info

  • 3rd Floor, Indeco Equinox, 1/1A/7, Baner Rd, next to Soft Tech Engineers, Baner, Pune, Maharashtra 411045
  • info@coditude.com
Breadcrumb Background
  • Insights

How To Write Your First IOS Safari Extension

Customize on iOS 15 and iPadOS 15 with Apple Store Extensions

Let's Talk

Chrome Extension

Browser Extension

iOS Safari Extension

System Requirements

1. macOS Big Sur 11.3 or greater

2. XCode 13.0 or greater

3. Safari 14 or greater Or Safari Technology Preview for debugging

If you have these, you are all set to build the iOS Safari extension.

Ok, so how many ways are there to build a Safari extension?

- You can start building a multi-platform (iOS, macOS, iPadOS) compatible extension from scratch;

- You can convert an extension built for another browser (Chrome/Edge/Firefox); Or,

- If you already have a macOS Safari extension, you can add iOS support to it.

Conversion and adding iOS support would not be in the scope of this blog post, but we will talk about it in a different post soon.

Now let's get started with building a brand new extension.

What are we building?

We will be creating a small extension called "WikiColorChanger" that will allow us to change the background color of a Wikipedia page.

Create New Project

Open the XCode and select, "Create a new XCode Project".

Create New Project

- IF you want to create the extension for iOS and macOS simultaneously, select "multiplatform" and then "Safari Extension App".

- IF NOT, opt for iOS, then "Safari Extension App".

Create the Extension for iOS and MacOS Simultaneously

It will ask for the Extension Name and what Language you would like to use. Give it a name and choose your preferred language. I am keeping Swift.

Choose Your Preferred Language

It will now ask for the app location. Select the folder and then "Create".

This will create a new project and it has all the basic setup you need, to make a multiplatform extension.

Basic Setup of New Project

You get some shared folders that allow you to have the same code for iOS as well as macOS and some folders separately for iOS and macOS.

It will start indexing the app. Once it's ready, you can run the app from the Start button at the top. Make sure the scheme is set to the iOS application.

Scheme Set to iOS Application

You can select the devices you want to run the app on. Since I have no devices connected, I'm selecting a built-in simulator.

An extension is basically an app that the user has to install and has to enable through Safari settings.

Wait until the app runs in the simulator and shows a screen similar to the following.

Wiki Background Changer

Next, Go to settings > Safari > Extensions > WikiBackgroundChanger

You will see it is disabled, and at the bottom of the "permissions" section it will say, "You have not allowed this extension on any websites yet".

Once you enable the extension, it will show a list of the websites that the extension is requesting permissions for.

List of the Websites that the Extension is Requesting Permissions

Safari gives users the ability to choose the specific websites that are allowed to have the extension actively functional.

By default, an extension generated by XCode template requests example.com.
Allow it and visit "example.com" on the mobile Safari app.

There, on the tab bar, you can see a jigsaw puzzle-like icon.

This way, Safari will let the user know how many extensions have access on the current page.

Example Domain

Now, let's see the popup of the extension for iOS Safari.

Click "AA" and you will see "WikiBackgroundChanger".

If you click on it, you will see a card opening from the bottom with the "Hello World" message.

Example Domain

This is nothing but a popup of the extension for iOS Safari. However, on iPad, it will appear the same as on macOS Safari.

Now let's start building the extension.

Make the following changes to Popup.css and rebuild the app to see the new popup page design.

//popup.css
:root {
color-scheme: light dark;
}
body {
padding: 10px;
font-family: system-ui;
text-align: center;
}
button {
width: 75px;
height: 75px;
border-radius: 10px;
color: black;
font-size: 14px;
}
#color-container {
display: flex;
justify-content: space-evenly;
margin-top: 15px;
}
New Popup Page Design

Now it looks much better and there we have built a new iOS Safari Extension.

Let's not forget the Desktop Extension which runs absolutely fine with no changes (Don't forget to change the scheme from iOS to macOS while building the application. You may also need to Allow unsigned applications as before, in order to see the extension in the extensions list).

Allow Unsigned Applications

Best Practices

When working with multi-platform compatible Applications and extensions, you should follow some best practices, which include:

- Make responsive page designs so that they will scale according to screen size for a better user experience.
- Background pages can not be kept "persistent" in the iOS safari extension because memory and battery life are high concerns for mobile users.
- Asking for only those permissions that your extension needs.
- Now, select the Simulator that is running the extension.
- Testing Popup on both macOS and iOS, as they have different appearances.
- Testing Popup and full-page web content on iOS as some of the design parts could get hidden under unsafe areas.

Best Practices

- Testing UI on Portrait as well as Landscape modes.
- Check for System Designs. For example in our case, Button on iOS was simple with no design as compared to the Desktop buttons with shadows.

Button on iOS

Coditude has over a decade of experience developing Browser Extensions. If you have any questions or queries about building/converting an extension, our dedicated Safari extension and plugin development team will be happy to answer them for you. Just drop us a line at browser extension services.

Elevate Browsing With Coditude's Extensions

Elevate Browsing With Coditude's Extensions

Connect with Coditude

Chief Executive Officer

Hrishikesh Kale

Chief Executive Officer

Chief Executive OfficerLinkedin

30 mins FREE consultation

Popular Feeds

Crawling Websites Built with Modern UI Frameworks Like React
August 25, 2025
Crawling Websites Built with Modern UI Frameworks Like React
Scraping JavaScript-Rendered Web Pages with Python
August 18, 2025
Scraping JavaScript-Rendered Web Pages with Python
 Enhancing Chatbots with Advanced RAG Techniques
August 05, 2025
Enhancing Chatbots with Advanced RAG Techniques
Hello World Thunderbird Extension Tutorial
July 22, 2025
Hello World Thunderbird Extension Tutorial
Company Logo

We are an innovative and globally-minded IT firm dedicated to creating insights and data-driven tech solutions that accelerate growth and bring substantial changes.We are on a mission to leverage the power of leading-edge technology to turn ideas into tangible and profitable products.

Subscribe

Stay in the Loop - Get the latest insights straight to your inbox!

  • Contact
  • Privacy
  • FAQ
  • Terms
  • Linkedin
  • Instagram

Copyright © 2011 - 2025, All Right Reserved, Coditude Private Limited

IOS Safari Extension

Browser extensions are powerful extensions that allow users to extend and customize their browsing in many ways, which is why Apple is now bringing Safari web browser extensions to its mobile devices. With iOS 15 and iPadOS 15, iPhone and iPad will have access to the web extensions in the Apple store.

For those of you who are curious to know how you can build and debug iOS safari extensions, you are on the right page.In this article, we will be looking at how to create new extensions, debugging along the way, as well as some best practices that you should keep in mind while working with iOS Safari extensions.

Now, let's jump right in.

Here's the checklist of writing IOS safari extension:

System Requirements

Create New Project

Best Practices