macOS Big Sur, the next major release of Apple’s operating system, will ship this fall with lots of amazing new features for both users and developers, including streamlined apps, a sleeker dock, and revamped notification center.
One of the most exciting features of Big Sur is the upgraded Safari web browser, which is the official browser for Apple devices. In this guide, we’ll zoom in on changes to Safari web extensions and how they affect the developer experience.
What’s the deal with Safari browser extensions?
Extensions are small pieces of software that users can install to enhance and customize the browsing experience. They provide additional functionalities that browsers are not shipped with.
For instance, have you ever needed to translate the content of a webpage? There are extensions for that, such as Microsoft Translator. Other common types of extensions include password managers (e.g., LastPass), bookmarking tools (e.g., Evernote Web Clipper), and proofreading apps (Grammarly for Safari). The list goes on and on.
Safari supports extensions, but the ecosystem is relatively small compared to other popular browsers such as Mozilla Firefox and Google Chrome due to differences in the technology stack and issues with OS compatibility. To bridge this gap, Apple will provide additional support for web extensions in Safari.
Introducing Xcode 12
One of the most important changes related to Safari web extensions is the introduction of Xcode 12, which enables developers to build Universal apps by default to support Mac with Apple Silicon without changing any code.
If you want to build and deploy an extension for Safari, you’ll need to use Xcode to package and test them. You must be a member of the Apple Developer Program to distribute them to the App Store.
Xcode is shipped with tons of amazing features that enable you to do much more than just build new Safari extensions. For instance, you can convert existing browser extensions into Safari extensions to use across all Apple devices and share in the App Store. Even more exciting is the command line tool that simplifies this process.
The command line tools package enables you to execute commands from the terminal. It can be downloaded and installed separatley. Fortunately, Xcode comes shipped with it, so if you have Xcode installed, you have access to the command line and you don’t need to install it separately.
You can test, build, query, analyze, and archive operations while building an Xcode project from the command line. Let’s look at a few specific commands you can execute from the terminal (command line tool) to speed up and streamline the developer experience.
To get started, navigate to the directory containing your project. The following command will list all schemes in your workspace.
xcodebuild -list -workspace <your_workspace_name>.xcworkspace
<your_workspace_name> with your actual workspace name.
The above command will result in the following.
$ cd /Users/username/Desktop/MyApplication $ xcodebuild -list -workspace MyApplication.xcworkspace Information about workspace "MyApplication": Schemes: iOSApp tvOSApp macOSApp iOSWithWatchApp iOSWithWatchApp WatchKit App
The follow command list all targets, build configurations, and schemes used in a project.
xcodebuild -list -project <your_project_name>.xcodeproj
The output would look like this:
$ cd /Users/username/Desktop/MyProject $ xcodebuild -list -project MyProject.xcodeproj Information about project "MyProject": Targets: iOS iOSTests iOSUITests watchOS App watchOS App Extension tvOS tvOSTests tvOSUITests macOS macOSTests macOSUITests Build Configurations: Debug Release
If no build configuration is specified and
-scheme is not passed, then
Debug is used.
Schemes: iOS watchOS App tvOS macOS
You could build a scheme in your project using the command line by running the following command in the terminal.
xcodebuild -scheme <your_scheme_name> build
The result would look like this:
$ xcodebuild -scheme tvOS build === BUILD TARGET tvOS OF PROJECT MyProject WITH CONFIGURATION Debug === ...
You can also create a new Safari extension and share it in the App Store using Xcode’s built-in template and repackage it to work with other browsers. For more details, check the documentation.
How to use Xcode
Start by creating a project for your app using Xcode. Before creating a project in Xcode, you need to provide Xcode with a few important details to authenticate your application and organization:
- Product name — The product name is simply the name of the app. Whatever format it’s provided in is the way it will appear in the App Store and elsewhere. You cannot create a project in Xcode without a valid product name
- Organization identifier — This enables Xcode to identify your organization. You can build your app without it, but you can’t deploy it until you’ve supplied an organization identifier. If you don’t have a company identifier, use
com.example.followed by the name of your organization and remeber to replace it before you distribute your app
- Organization name — This is the name that appears in your app’s boilerplate. It doesn’t have to be the same as the one that appears in the App Store
Create a project
When Xcode is launched, click “Create a new Xcode project” in the “Welcome to Xcode” window or choose File > New > Project. On the next display screen, select the target operating system and fill in other relevant information.
The bundle identifier used to identify your application throughout the system is generated using the product name and organization identifier. You cannot continue building your application without providing these details. If you do not belong to an organization, enter your name.
Before you click “Next,” choose SwiftUI as the user interface. This enables you to develop for all platforms and see an interactive preview of your layout.
Manage files in the main window:
The main window shows the files and resources for required to develop your app. The interface appears when you create a project or open an existing project.
You can access different parts of your project from the navigator area in the main window. Use the project navigator to select files you want to edit in the editor area. For example, when you select a Swift file in the project navigator, the file opens in the source editor, where you can modify the code and set breakpoints.
The interface has an inspector area where you can select the attributes inspector to edit properties of a file or user interface element. You can hide and show the inspector to create more room for the editor. Just click the icon in the upper-right corner of the toolbar to toggle. For iOS apps, choose the app target and a simulator or device from the run destination menu in the toolbar, then click “Run.”
For macOS devices, the process is slightly different. To run the app, just click “Run.” This will also open the debug area where you can control the execution of your application and inspect variables. When the app stops at the break point, use the controls in the debug area to step through the code or continue execution. To stop the app when you’re done, click the “Stop” button in the toolbar.
For Swift users, the SwiftUI provides and interactive preview of the user interface while creating an app. All changes you make while using Xcode are kept in the source file, the canvas on the right, and the inspector in sync. You can use the controls in the preview to run the app with the debugger. For more details, see the documentation.
To change the properties you entered when creating your project, select the project name in the project navigator that appears at the top. This will open the project editor in the editor area. Most of the properties you entered will appear on the general pane of the project editor.
Big Sur will help users complete common online tasks more quickly and efficiently with the availability of more and more browser extensions for Safari. If you’re a developer looking to create your own web extensions for Safari and other browsers, Xcode makes the development process a lot less stressful with features such as:
- A simple user interface that is easy to understand and use
- Support for all devices
- The ability to convert an already existing browser extension to work in Safari
- The ability to create new web extensions that work across platforms
- Support for Swift
For further reading on Xcode, check the official documentation.
LogRocket: Full visibility into your web apps
LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.