Meet Safari Web Extensions on iOS

RSS for tag

Discuss the WWDC21 session Meet Safari Web Extensions on iOS.

Posts under wwdc21-10104 tag

30 Posts

Post

Replies

Boosts

Views

Activity

Safari Web Extension sendNativeMessage and browser.runtime.connectNative don't work
We have Safari App(!) Extension, the one that has no background page. We want to port it to a Safari Web Extension, so it can run on iOS 15. The App Extension extensively uses safari.extension.dispatchMessage, and we want to replace it with browser.runtime.sendNativeMessage, which doesn't work at all. There's a couple questions: How to get a response from browser.runtime.sendNativeMessage Do we have to use browser.runtime.connectNative? How to use it? Where is the documentation on all of this?
2
0
1.9k
Sep ’21
Background.js in my iOS never gets executed
I have converted my chrome extension to Safari and followed all the instructions: here is my manifest: {  "manifest_version": 2,  "default_locale": "en",  "name": "__MSG_extName__",  "version": "1.0",  "homepage_url": "https://mydomain.com/",  "description": "__MSG_appDesc__",  "icons": {   "16": "images/16.png",   "32": "images/32.png",   "48": "images/48.png",   "128": "images/128.png"  },  "background": {   "scripts": [ "background.js"],   "persistent": false  },  "permissions": ["storage", "tabs", "contextMenus", "nativeMessaging", "<all_urls>"],     "browser_action" : {  "default_icon" : "images/_48.png",  "default_title" : "MyAppName v0.0.1" ,  "default_popup" : "popup.html"  },        "content_scripts": [ { "matches": ["<all_urls>"], "js": ["js/content.js"], }  ] } I've removed everything from background.js and left the below lines for troubleshooting: var bkg = chrome.extension.getBackgroundPage(); bkg.console.log("test1"); console.log("test2"); But I see no output. The same works for Safari macOS. I'd like to know if background.js would ever work in iOS? if yes, what do I need to do to get it working?
0
0
588
Sep ’21
ISO conversion from web extension to app extension
Hello, With iOS 15, we can now convert WEB extensions into APP extensions. But does all the functionnalities available in a WEB extension are still available when I convert it to an APP extension ? For example on MacOS, with a WEB extension, if I select a word or a sentence in Safari, I can display a button next to the text, that will allow me to launch an action. Will I be able to do the same with an iOS app extension ? (ie: display my own button when the user select a word or a sentence while browsing Safari on his phone) Thank you in advance for your help. Patrick
0
0
561
Sep ’21
Can my website in Safari detect the installed iOS extension and its not enabled in safari settings?
If someone installs the iOS extension and hasn't enabled it in safari settings, I want to alert/remind them to enable it when they open my website on Safari. So, if the user opens my website, can it detect that the iOS extension if it is already installed? One of the solutions I tried is to set a cookie or modify content on my website from iOS extension, but without enabling the iOS extension, it is not possible. Any help would be highly appreciated, thanks for your time!
0
0
643
Sep ’21
Correct sizes and colours for toolbar icon
What are the correct sizes and colours to provide for the toolbar icon of a Safari Extension on iOS? For the size I tried creating a solid black icon and measuring the size. They seem to render at 24x24pt but providing 24px, 48px, and 72px images still look blurry. This also only covers the default text size; the icons scales with the system text size. The MDN documentation (which I cannot link here) says that an SVG can be used but supplying an SVG displays the app icon instead. The example icons are all black (like other toolbar icons on iOS) but when displayed in dark mode they are still black, which does not match the other icons in the list. Do I need to specify black and white icons? I tried using browser_action's theme_icons but they seem to be ignored. I've seen other solutions to switch out the icon at runtime but that requires a content script to be injected in to every page or for the popup to be opened by the user. iOS is already tinting the icon blue when the extension is active, can it tint it white when inactive in dark mode?
2
0
2.9k
Sep ’21
UIPasteboard copying string to clipboard is not working on iOS 15 device
I am currently developing a safari web extension on iOS. The following piece of code is executed in the native application when the extension sends a message to the native app using browser.runtime.sendNativeMessage.    func beginRequest(with context: NSExtensionContext) {     let item = context.inputItems[0] as! NSExtensionItem     let message = item.userInfo?[SFExtensionMessageKey]     os_log(.default, "Received message from browser.runtime.sendNativeMessage: %@", message as! CVarArg) //    Message should follow format of: //    { //     type: "Message type", //     payload: "Message Payload" //    } //    In the future we may want to parse the payload differently, but for now it is a string     guard let response = message as? [String : AnyObject] else {       return     }     guard let type = response["type"] as? String else {       return     }     guard let payload = response["payload"] as? String else {       return     }           let res = NSExtensionItem()           if type == "COPY" {       let itemToCopy = [payload]       let pasteboard = UIPasteboard.general       pasteboard.strings = itemToCopy       res.userInfo = [ SFExtensionMessageKey: [ "res": true ] ]     }     context.completeRequest(returningItems: [res], completionHandler: nil) The code works flawlessly in the iOS 15 simulator, however it does not work on the actual device. ( iPod Touch 7th Generation running iOS 15 beta 2 ) There are no errors, it behaves as if it was working as expected. Any help would be greatly appreciated.
4
0
2.1k
Sep ’21
Web Extension doesn't appear in Safari's Share menu (i.e. the extension won't run) since iOS 15 beta 6
Feedback Assistant case: FB9545798 Installation and running git clone git@github.com:birchill/10ten-ja-reader.git cd 10ten-ja-reader yarn install npm run build:safari Now open "xcode13/10ten Japanese Reader.xcodeproj". For all four build targets, change the developer team to your own developer team. Run the build target named "10ten Japanese Reader Extension (iOS)" on a real device (mine is an iPhone 11 Pro), selecting the app "Safari" to run the extension for. Next, on your iPhone, go into Settings > General > Safari > Extensions and allow the extension named "10ten Japanese Reader". Return to iOS Safari, refresh the current tab (if you want a consistent URL to test on, then let's choose https://ncode.syosetu.com/n4830bu/130/), and check the Share sheet. Expected results A Web Extension named "10ten Japanese Reader" or similar should appear in the Safari Share menu. You should be able to enable it, and something that looks like a hockey puck will immediately appear in the bottom-right of the web page. Actual results Although I was able to run this Web Extension just fine on iOS 15 beta 5, since updating to iOS 15 beta 6 (and the corresponding latest macOS and Xcode betas available at the time of writing), I have been unable to run the Web Extension. That is to say, it does not appear in the Share menu, even though it appears in Settings > General > Safari > Extensions and is allowed. I have tried restarting both my Mac and my iPhone, and incrementing the build number, doing clean builds, etc., but nothing has helped. I see no debug in Xcode that gives any clues, either.
1
0
821
Aug ’21
Sample app doesn't work on macOS
The 'Sea Creator' sample app demonstrating Safari Web Extensions first fails to compile, because due to disambiguation extension bundle id isn't prefixed with app bundle id. When fixed by changed ids the app fails on start, with error saying that the app can't find extension. Regardless, extension works on its own in Safari, but can't communicate with the host app due to aforementioned error.
0
0
689
Aug ’21
Safari Web Extension sendNativeMessage and browser.runtime.connectNative don't work
We have Safari App(!) Extension, the one that has no background page. We want to port it to a Safari Web Extension, so it can run on iOS 15. The App Extension extensively uses safari.extension.dispatchMessage, and we want to replace it with browser.runtime.sendNativeMessage, which doesn't work at all. There's a couple questions: How to get a response from browser.runtime.sendNativeMessage Do we have to use browser.runtime.connectNative? How to use it? Where is the documentation on all of this?
Replies
2
Boosts
0
Views
1.9k
Activity
Sep ’21
Background.js in my iOS never gets executed
I have converted my chrome extension to Safari and followed all the instructions: here is my manifest: {  "manifest_version": 2,  "default_locale": "en",  "name": "__MSG_extName__",  "version": "1.0",  "homepage_url": "https://mydomain.com/",  "description": "__MSG_appDesc__",  "icons": {   "16": "images/16.png",   "32": "images/32.png",   "48": "images/48.png",   "128": "images/128.png"  },  "background": {   "scripts": [ "background.js"],   "persistent": false  },  "permissions": ["storage", "tabs", "contextMenus", "nativeMessaging", "<all_urls>"],     "browser_action" : {  "default_icon" : "images/_48.png",  "default_title" : "MyAppName v0.0.1" ,  "default_popup" : "popup.html"  },        "content_scripts": [ { "matches": ["<all_urls>"], "js": ["js/content.js"], }  ] } I've removed everything from background.js and left the below lines for troubleshooting: var bkg = chrome.extension.getBackgroundPage(); bkg.console.log("test1"); console.log("test2"); But I see no output. The same works for Safari macOS. I'd like to know if background.js would ever work in iOS? if yes, what do I need to do to get it working?
Replies
0
Boosts
0
Views
588
Activity
Sep ’21
ISO conversion from web extension to app extension
Hello, With iOS 15, we can now convert WEB extensions into APP extensions. But does all the functionnalities available in a WEB extension are still available when I convert it to an APP extension ? For example on MacOS, with a WEB extension, if I select a word or a sentence in Safari, I can display a button next to the text, that will allow me to launch an action. Will I be able to do the same with an iOS app extension ? (ie: display my own button when the user select a word or a sentence while browsing Safari on his phone) Thank you in advance for your help. Patrick
Replies
0
Boosts
0
Views
561
Activity
Sep ’21
Can my website in Safari detect the installed iOS extension and its not enabled in safari settings?
If someone installs the iOS extension and hasn't enabled it in safari settings, I want to alert/remind them to enable it when they open my website on Safari. So, if the user opens my website, can it detect that the iOS extension if it is already installed? One of the solutions I tried is to set a cookie or modify content on my website from iOS extension, but without enabling the iOS extension, it is not possible. Any help would be highly appreciated, thanks for your time!
Replies
0
Boosts
0
Views
643
Activity
Sep ’21
Correct sizes and colours for toolbar icon
What are the correct sizes and colours to provide for the toolbar icon of a Safari Extension on iOS? For the size I tried creating a solid black icon and measuring the size. They seem to render at 24x24pt but providing 24px, 48px, and 72px images still look blurry. This also only covers the default text size; the icons scales with the system text size. The MDN documentation (which I cannot link here) says that an SVG can be used but supplying an SVG displays the app icon instead. The example icons are all black (like other toolbar icons on iOS) but when displayed in dark mode they are still black, which does not match the other icons in the list. Do I need to specify black and white icons? I tried using browser_action's theme_icons but they seem to be ignored. I've seen other solutions to switch out the icon at runtime but that requires a content script to be injected in to every page or for the popup to be opened by the user. iOS is already tinting the icon blue when the extension is active, can it tint it white when inactive in dark mode?
Replies
2
Boosts
0
Views
2.9k
Activity
Sep ’21
iOS15 and support for progressive web apps
How well does Safari iOS15 support web apps. Does the A2HS icon of the progressive WEB APP function offline with no internet. This feature was broken in iOS 14.7. Doug D
Replies
0
Boosts
0
Views
993
Activity
Sep ’21
UIPasteboard copying string to clipboard is not working on iOS 15 device
I am currently developing a safari web extension on iOS. The following piece of code is executed in the native application when the extension sends a message to the native app using browser.runtime.sendNativeMessage.    func beginRequest(with context: NSExtensionContext) {     let item = context.inputItems[0] as! NSExtensionItem     let message = item.userInfo?[SFExtensionMessageKey]     os_log(.default, "Received message from browser.runtime.sendNativeMessage: %@", message as! CVarArg) //    Message should follow format of: //    { //     type: "Message type", //     payload: "Message Payload" //    } //    In the future we may want to parse the payload differently, but for now it is a string     guard let response = message as? [String : AnyObject] else {       return     }     guard let type = response["type"] as? String else {       return     }     guard let payload = response["payload"] as? String else {       return     }           let res = NSExtensionItem()           if type == "COPY" {       let itemToCopy = [payload]       let pasteboard = UIPasteboard.general       pasteboard.strings = itemToCopy       res.userInfo = [ SFExtensionMessageKey: [ "res": true ] ]     }     context.completeRequest(returningItems: [res], completionHandler: nil) The code works flawlessly in the iOS 15 simulator, however it does not work on the actual device. ( iPod Touch 7th Generation running iOS 15 beta 2 ) There are no errors, it behaves as if it was working as expected. Any help would be greatly appreciated.
Replies
4
Boosts
0
Views
2.1k
Activity
Sep ’21
Safari Extensions for iPadOS
Are Safari extensions for iPad OS 15 available yet and if so, how do I get them?
Replies
1
Boosts
0
Views
950
Activity
Aug ’21
Web Extension doesn't appear in Safari's Share menu (i.e. the extension won't run) since iOS 15 beta 6
Feedback Assistant case: FB9545798 Installation and running git clone git@github.com:birchill/10ten-ja-reader.git cd 10ten-ja-reader yarn install npm run build:safari Now open "xcode13/10ten Japanese Reader.xcodeproj". For all four build targets, change the developer team to your own developer team. Run the build target named "10ten Japanese Reader Extension (iOS)" on a real device (mine is an iPhone 11 Pro), selecting the app "Safari" to run the extension for. Next, on your iPhone, go into Settings > General > Safari > Extensions and allow the extension named "10ten Japanese Reader". Return to iOS Safari, refresh the current tab (if you want a consistent URL to test on, then let's choose https://ncode.syosetu.com/n4830bu/130/), and check the Share sheet. Expected results A Web Extension named "10ten Japanese Reader" or similar should appear in the Safari Share menu. You should be able to enable it, and something that looks like a hockey puck will immediately appear in the bottom-right of the web page. Actual results Although I was able to run this Web Extension just fine on iOS 15 beta 5, since updating to iOS 15 beta 6 (and the corresponding latest macOS and Xcode betas available at the time of writing), I have been unable to run the Web Extension. That is to say, it does not appear in the Share menu, even though it appears in Settings > General > Safari > Extensions and is allowed. I have tried restarting both my Mac and my iPhone, and incrementing the build number, doing clean builds, etc., but nothing has helped. I see no debug in Xcode that gives any clues, either.
Replies
1
Boosts
0
Views
821
Activity
Aug ’21
Sample app doesn't work on macOS
The 'Sea Creator' sample app demonstrating Safari Web Extensions first fails to compile, because due to disambiguation extension bundle id isn't prefixed with app bundle id. When fixed by changed ids the app fails on start, with error saying that the app can't find extension. Regardless, extension works on its own in Safari, but can't communicate with the host app due to aforementioned error.
Replies
0
Boosts
0
Views
689
Activity
Aug ’21