Explore the integration of web technologies within your app. Discuss building web-based apps, leveraging Safari functionalities, and integrating with web services.

All subtopics
Posts under Safari & Web topic

Post

Replies

Boosts

Views

Created

Safari Web Extension tab ids are 0 during webNavigation callbacks until onCompleted event
Safari Version 14.0.1 (16610.2.11.51.8) I am porting a Chrome/Firefox/Edge extension to Safari Web Extension. Mostly, the process was painless, I am, however, seeing quite different behavior in the tab ids generated by Safari compared to Chrome, Firefox, and Edge. My extension has callbacks for each of these browser.webNavigation events: browser.webNavigation.onBeforeNavigate browser.webNavigation.onCommitted browser.webNavigation.onDOMContentLoaded In each of these I rely on the tab id for various future tab targeting operations. When opening a new tab, the details object passed to each of these callbacks has a non-zero tabId on Chrome, Firefox, and Edge. However, in Safari, the tabId is always zero. To debug, I added one more callback: browser.webNavigation.onCompleted At this point Safari finally has a non-zero tabId in the details param. Needless to say this is causing some consternation with achieving the same outcomes as tab tracking on Chrome, Firefox, and Edge. It's like Safari is treating new tabs as "non tabs" until navigation completes. You can even see it when trying to get the tab by tabId=0: browser.tabs.get(tabId) // tabId=0 here 	.then(tab => { 		// tab is undefined 	}); Seems like this might be a bug. I can't imagine why the behavior is so different from other browsers. Any ideas on how to work around?
5
1
2.6k
Nov ’20
How to get tab/url's favicon in safari web extension natively?
I'm converting a Chrome Extension to a Safari Web Extension, I found it's not easy to get favicon of current tab/url natively. The tab object in Safari doesn't have favIconUrl. { 	"id": 121, 	"index": 6, 	"active": true, 	"width": 1324, 	"audible": false, 	"url": "https://github.com/", 	"mutedInfo": { 		"muted": false 	}, 	"windowId": 2, 	"title": "GitHub", 	"incognito": false, 	"pinned": false, 	"height": 935, 	"highlighted": true, 	"status": "complete" } 		 2. I didn't find Safari has similar thing like chrome://favicon 3. I found Safari's favicon caches in ~/Library/Safari/Favicon Cache/favicons but have no idea how to use them in Safari Web Extension.
2
0
1.4k
Jan ’21
Smart banner for app doesn't work
Hello everyone. I have a very strange behavior with smart app banners in Safari. When I don't have installed app on my phone, I can't see the banner on our product main page. When I installed the app, I can see the banner, which allows me to go directly to the app. When I put any other app's ID in the meta tag it works perfectly even if I don't have its installed app. So the code is right, what can be the reason of this behavior? Any settings of the app are required?
Topic: Safari & Web SubTopic: General Tags:
1
0
460
Jul ’21
Opening native app from a web extension
Is it possible to open the native app from a web extension? I have tried creating a new tab that uses the app's URL scheme but the UI asking the user to open the app is not shown until the new page UI is dismissed. Creating a tab with an HTTPS URL that the app is setup to handle does not work and always the link in a new tab. I tried sending a message to the app extension and using NSExtensionContext.open(_:completionHandler:) but the URL is not opened and the closure received false, indicating it was not handled. Having the option to link back to the native app would be very useful.
3
0
1.8k
Jul ’21
Safari Web Extension: How do I avoid "this extension can read and alter web pages"?
I have a web extension that I want to send data to, and receive a response containing modified data. My understanding is that the native app is only contactable by a background script. How does a webpage contact the background script? One answer is by adding a content script, which is able to communicate with the background script using browser.native.sendMessage(). Unfortunately this triggers a warning that "this extension can read and alter web pages". I do not want to read and alter web pages, nor do I want users to be concerned about a permission the app doesn't need. I just want to receive data, and then return a response. What API should I be using to achieve this?
2
0
715
Aug ’21
Have control over show/hide the Smart Banner
Hello, We do not have explicitly set it our website, but still Smart Banner appears since we have universal link setup. (current URL matches the universal link patterns set in your apple-app-site-associations file ). Also, I understand it appears only for users having our app installed. We do not want to show this banner in any case. is there any way to choose not to show the app banner? either setting additional meta or any other way would work. regards, Hussain
1
0
749
Aug ’21
Getting started with PHP ..
I am new to PHP. I have developed my own web site with a lot of javascript in simple HTML files. I want to do some extensions with PHP but I can't make a simple web page function. I am sure something simple is wrong. Help! Here is the test web page I made: hello.html <html>  <head>   <title>Hello World</title>  </head>  <body>   <?php echo 'Hello World!'; ?>  </body> </html> Pointing Safari at hello.html gives me a new tab with the correct title, but no "Hello World" in the page itself. Here is the output of php --version: WARNING: PHP is not recommended PHP is included in macOS for compatibility with legacy software. Future versions of macOS will not include PHP. PHP 7.3.24-(to be removed in future macOS) (cli) (built: Jun 17 2021 21:41:13) ( NTS ) Copyright (c) 1997-2018 The PHP Group Zend Engine v3.3.24, Copyright (c) 1998-2018 Zend Technologies
2
0
741
Aug ’21
How do I add a UI to a Safari Web Extension?
I have a Safari Web Extension that successfully receives a message from a webpage and returns a response. I now want to add a user interface to the Safari Web Extension. How do I do this? I have modified the default template code as follow to add an NSAlert for testing. The modal runs, but no alert ever appears, and the code remains stuck at runModal. What is the correct way to add a UI to a webextension? - (void)beginRequestWithExtensionContext:(NSExtensionContext *)context {     id message = [context.inputItems.firstObject userInfo][SFExtensionMessageKey];     NSLog(@"Received message from browser.runtime.sendNativeMessage: %@", message);     NSAlert* alert = [[NSAlert alloc]init];     [alert setMessageText:message[@"request"]];     [alert setInformativeText:@"Hello"];     [alert runModal];     NSExtensionItem *response = [[NSExtensionItem alloc] init];     response.userInfo = @{ SFExtensionMessageKey: @{ @"id": message[@"id"], @"uuid": message[@"uuid"], @"contentType": message[@"contentType"], @"response": message[@"request"] } };     [context completeRequestReturningItems:@[ response ] completionHandler:nil]; } @end
3
0
1.2k
Sep ’21
WKWebView evaluateJavascript method crash with async/await when javascript call doesn't have return value
I wrote a code like the example below to execute javascript code that has no return value. let webView: WKWebView // after load complete let result = await webView.evaluateJavascript("someFunction()") // :0: Fatal error: Unexpectedly found nil while implicitly unwrapping an Optional value but when i use method with completion handler manner, it doesn't be crashed. but Xcode enforces me to use 'await' keyword and warning is bordering me await webView.evaluateJavaScript("someFunction()", completionHandler: nil) // warning: Consider using asynchronous alternative function The differnce I found is the different signature. Completion handler version has Optional result type, but async/await version has just Any result type func evaluateJavaScript(_ javaScriptString: String, completionHandler: ((Any?, Error?) -> Void)? = nil) func evaluateJavaScript(_ javaScriptString: String) async throws -> Any my Xcode version is 13.2.1. Hope to fix it soon.
10
10
5.5k
Mar ’22
pas_panic_on_out_of_memory_error crash on tvOS 15.4 and 15.4.1
Hi there, I'm experiencing several crashes on JavaScriptCore pas_panic_on_out_of_memory_error, only on devices with tvOS 15.4 and 15.4.1. This happens with users using the app for several hours as well as 5 seconds after launching the app. Devices: AppleTV6,2 and AppleTV5,3 Thread 14 — JavaScriptCore pas_panic_on_out_of_memory_error (JavaScriptCore) JavaScriptCore bmalloc_try_iso_allocate_impl_impl_slow (JavaScriptCore) JavaScriptCore bmalloc_heap_config_specialized_local_allocator_try_allocate_small_segregated_slow (JavaScriptCore) JavaScriptCore bmalloc_allocate_impl_casual_case (JavaScriptCore) JavaScriptCore ***::String::String(char16_t const*, unsigned int) (JavaScriptCore) JavaScriptCore JSC::LiteralParser<char16_t>::parsePrimitiveValue(JSC::VM&) (JavaScriptCore) JavaScriptCore JSC::LiteralParser<char16_t>::parse(JSC::ParserState) (JavaScriptCore) JavaScriptCore JSC::jsonProtoFuncParse(JSC::JSGlobalObject*, JSC::CallFrame*) (JavaScriptCore) JavaScriptCore llint_entry (JavaScriptCore) JavaScriptCore llint_entry (JavaScriptCore) JavaScriptCore llint_entry (JavaScriptCore) JavaScriptCore llint_entry (JavaScriptCore) JavaScriptCore vmEntryToJavaScript (JavaScriptCore) JavaScriptCore JSC::Interpreter::executeCall(JSC::JSGlobalObject*, JSC::JSObject*, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&) (JavaScriptCore) JavaScriptCore JSC::boundThisNoArgsFunctionCall(JSC::JSGlobalObject*, JSC::CallFrame*) (JavaScriptCore) JavaScriptCore vmEntryToNative (JavaScriptCore) JavaScriptCore JSC::Interpreter::executeCall(JSC::JSGlobalObject*, JSC::JSObject*, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&) (JavaScriptCore) JavaScriptCore JSC::profiledCall(JSC::JSGlobalObject*, JSC::ProfilingReason, JSC::JSValue, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&) (JavaScriptCore) JavaScriptCore JSObjectCallAsFunction (JavaScriptCore) JavaScriptCore -[JSValue invokeMethod:withArguments:] (JavaScriptCore) ITMLKit -[IKJSObject invokeMethod:withArguments:] (ITMLKit) ITMLKit -[IKJSEventListenerObject invokeMethod:withArguments:thenDispatchEvent:extraInfo:] (ITMLKit) ITMLKit __43-[IKJSXMLHTTPRequest setRequestReadyState:]_block_invoke (ITMLKit) ITMLKit -[IKAppContext _doEvaluate:] (ITMLKit) ITMLKit -[IKAppContext _evaluate:] (ITMLKit) ITMLKit __41-[IKAppContext evaluate:completionBlock:]_block_invoke (ITMLKit) ITMLKit -[IKAppContext _sourcePerform] (ITMLKit) ITMLKit -[IKConcurrentEvaluator lockSchedulingForEvaluation:] (ITMLKit) ITMLKit IKRunLoopSourcePerformCallBack (ITMLKit) CoreFoundation __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__ (CoreFoundation) CoreFoundation __CFRunLoopDoSource0 (CoreFoundation) CoreFoundation __CFRunLoopDoSources0 (CoreFoundation) CoreFoundation __CFRunLoopRun (CoreFoundation) CoreFoundation CFRunLoopRunSpecific (CoreFoundation) ITMLKit -[IKAppContext _jsThreadMain] (ITMLKit) Foundation __NSThread__start__ (Foundation) libsyste...ad.dylib _pthread_start (libsystem_pthread.dylib) libsyste...ad.dylib thread_start (libsystem_pthread.dylib) This issue seems very similar to this existing thread, although not sure its related
16
0
2.3k
Apr ’22
Adoption of New MV3 Standards for Browser Extensions
As with the adoption of MV3 standards among all major browser vendors that allow browser extensions at the client-side, I understand that this is the same with Safari as well, as mentioned here (https://www.wwdcnotes.com/notes/wwdc22/10099/). However, as with Firefox, browsers may choose to adopt them incompletely and with few changes. I had a few questions regarding how Safari views this transition and what would be the next steps from here. Thus, it would be really great if the browser team could provide your insights on any or all of the following points: Would Safari adopt the exact standards proposed by the Chromium ecosystem such as with functionalities like header-based modifications in the coming days.  What would be the general timeline be for this in general?  Does this also translate to the fact that existing standards with MV2 standards would not be allowed to operate any further, as with the timeline with Chromium? Regards
3
2
1.8k
Jul ’22
Pac File shExpMatch
I’m deploying a pac file through jamf using the auto global http proxy. The purpose of this file is to block some traffic on the network level. We’re deploying the pac on iPhones. I tried to use || shExpMatch(url, “*.pdf”) to block any url with .pdf but iOS seems to just skip that line without implementing it. Am I doing something wrong or is there an apple specific function that I should use? thanks
10
1
2.3k
Nov ’22
Safari 16.4 seems to lose session cookies on asset requests or javascript fetches.
On iPads after updating to iPadOS 16.4, Safari often "looses" the session cookie provided by PlayFramework: When the browser requests assets (js scripts) or when additional data is fetched by JavaScript, the session cookie is not included in the request. These secondary requests will redirect through our IAM because no session cookie is present. The IAM redirects back to the original domain with a payload so that the login session can be resumed. A new Set-Cookie header is sent in the response with the new session cookie. This causes the framework to issue a new CSRF token (that is part of the session cookie) which is different from the old one that was already rendered into a hidden form input. The browser stores this new token and includes it when it POSTs the form. The token in the body of the request is now different from the one in the cookies, causing the CSRF check to fail. We have tried different devices (Android, Windows, MacBook, and iPads) on different versions. The problem only occurs with Safari on iPad/MacBook running version 16.4, 16.4.1, or 16.5 beta. The problem cannot be reproduced using Chrome on iPad. Furthermore, the problem does not occur with private browsing in Safari. Some things we ruled out: Same behaviour on devices managed by MDM and on open devices. PlayFramework version is now updated to the latest 2.8 version. Using a separate cookie for the CSRF token (instead of the play session cookie) does not make a difference either. Modifying the Cache-Control header to cache responses more aggressively or not at all does not help. Has anyone also experienced this or similar problems?
20
13
14k
Apr ’23
Unable to debug with console.log in Safari on iOS 16.4 Simulator.
I'm working on a regular website, in which I'm trying to debug using the (MacOS) Safari Development tools. Since updating my Simulator to iOS 16.4, console.log is no longer displayed in the Console. Even when executing it directly in the console (console.log('test');), it's not printed. Now, I've read that this is a feature for debugging in-app browser content (https://webkit.org/blog/13936/enabling-the-inspection-of-web-content-in-apps/) but can't find the regular web workaround here. TL;DR: No longer see console.log in iOS 16.4 Safari when debugging from my Mac. Thanks in advance for your suggestions!
3
6
4.0k
May ’23
What makes Safari render an active extension's icon in color in the toolbar?
Sometimes Safari is rendering the icon for an active extension in its original provided colored representation, other times Safari is applying an overlay color in line with the system's highlight color. This difference can even be seen seen on the Safari Extensions Developer home page: https://developer.apple.com/safari/extensions/images/extensions-hero-large_2x.png You will notice that Grammarly's icon is shown in it's original color format, while the others aren't. Example of extensions where the icon is shown in color: Bitwarden Grammarly 1Password Consent-O-Matic I've compared the source code of Bitwarden and Consent-o-Matic with my own extension and cannot find any differences in the settings or image properties (resolution, DPI, file type, color profile). If I take the exact PNG source files from said open source extensions and replace them in my own source code, these icons show up in full color. Does this perhaps mean there is a bug in Safari's processing of the icons where it fails to overlay the icon with the highlight color in some cases? I and I assume many developers with me would like to understand what determines this difference. Ideally, there is a consistent UX where the end user has the choice between icons in color or highlight color overlay.
3
0
1.2k
Jul ’23