![]() And like any other type of iOS app, apps with Safari Web Extensions can be found on the App Store. So when you want to install a web extension, you install its app. It's important to understand that for Safari, Web Extensions are parts of apps. Let's look behind the scenes to understand how this works. So, our journey begins with creating a web extension that can run on iOS in the first place. And I'll wrap it up with some thoughts on user privacy and how it relates to the permissions model of Safari Web Extensions. Along the way, I'll cover some debugging techniques and best practices to help your extension be the best it can be. I'll give you an overview of how Web Extensions work and how you can get started creating a new one. But don't worry if you've never written a browser extension before. And I'll be using Sea Creator as an example of how I took an existing extension and brought it to iOS with just a few changes. In this session, I want to show how you too can create a Safari Web Extension for iOS. So that was a quick look at Sea Creator working great on iOS. When I open up a new tab to do some more browsing, I'm greeted by this bold New Tab page from Sea Creator with a fact of the day today about starfish- and once again, that counter showing me just how many emoji Sea Creator has given me so far. Of course, Sea Creator has one more feature that I mentioned earlier. I don't need to go out of my way to open the extension again once I've started using it. So as I navigate to other pages, Sea Creator is still working for me and gives me emoji here as well. I gave Sea Creator permission to work across this website as a whole. It's also opened this popup showing me a running total of just how many words I've replaced so far. And just like that, it swapped in all these fish emoji on the page, which is just how I like to read it. But right now, I'll allow Sea Creator to run. ![]() I'll talk in more detail about this later. We brought the same Web Extensions permission model from Safari on the Mac to iOS, which means I, as the user, have full control over how much of my browsing extensions can access. And when I do that, Safari asks me if I'm OK with giving Sea Creator full access to this site. ![]() And now that I've turned on Sea Creator, it's right there in the Action menu ready for me to use. Now, another feature of Sea Creator is that I can put it front and center in Safari with a custom Start Page that I use every time I open a new tab. So I'll open up the action menu and drill into the new Extensions list, which shows me all the extensions that I have available, including Sea Creator. I'd really love to start using Sea Creator here so I can liven up this page with some emoji. ![]() Now, I've just installed Sea Creator, and I've opened up Safari, where I'm reading an article about fish. This extension shows me fun facts about sea creatures and makes reading more about sea life fun by replacing the names of sea creatures with emoji. This extension was originally written for browsers on the Mac, but I've been working on bringing it to iOS. I'll be showing off an extension called Sea Creator. I'd love to show you a demo now of a Safari Web Extension running on iOS. But now, I'm thrilled to tell you that Web Extensions are coming to iOS 15, letting you build a browser extension for more users than ever. And the WebExtension API has been available for all the major desktop browsers for a while, which means you can write a browser extension once and deploy it across all those browsers, reaching so many users. They're built with the standard web technologies: HTML, CSS, and JavaScript. Web Extensions are a powerful type of browser extension that allows users to extend and customize their browsing in a huge number of ways. And today, I'll be walking through an exciting new feature in iOS 15, Safari Web Extensions. I'm David Quesada, an engineer on the Safari team. Welcome to Meet Safari Web Extensions on iOS. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |