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

[iOS Safari] Fullscreen API on a non-video element
webkitEnterFullScreen API is supported on iOS for video element, but not for a div element. Also as a fullscreen demo website shown, Safari on macOS supports div element but not on iOS. Is there any plan to add the support in iOS? If not is there any way to fullscreen a div element or make it run as fullscreen on Safari iOS?
31
12
32k
May ’20
DOMContentLoaded not working in Safari App Extension
I am trying to run JavaScript only after the page has loaded, and according to here - https://developer.apple.com/documentation/safariservices/safari_app_extensions/injecting_a_script_into_a_webpage, I should use DOMContentLoaded. However, it does not seem to work. This is my content.js file: function runOnStart() {     document.addEventListener('DOMContentLoaded', function(e) {         document.body.style.background = "rgb(20, 20, 20)";         document.html.style.background = "rgb(20, 20, 20)";                var divElements = document.body.getElementsByTagName('div');         for(var i = 0; i < divElements.length; i++) {             let elem = divElements[i];             elem.style.background = "rgba(255, 255, 255, 0.05)";         }     }); } runOnStart(); If I take the code outside of the event listener, it runs fine, but a lot of the elements haven't loaded in yet so it doesn't work as it should. The function is definitely running, but the event listener simply doesn't work. I appreciate any help you can give!
12
3
11k
Jun ’20
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 &#9;.then(tab => { &#9;&#9;// tab is undefined &#9;}); 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.7k
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. { &#9;"id": 121, &#9;"index": 6, &#9;"active": true, &#9;"width": 1324, &#9;"audible": false, &#9;"url": "https://github.com/", &#9;"mutedInfo": { &#9;&#9;"muted": false &#9;}, &#9;"windowId": 2, &#9;"title": "GitHub", &#9;"incognito": false, &#9;"pinned": false, &#9;"height": 935, &#9;"highlighted": true, &#9;"status": "complete" } &#9;&#9; 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
483
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
738
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
779
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
787
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
What is the recommended way to programmatically apply proxy to WKWebView
Hi Apple engineers! We are making an iOS browser and are planing to deliver a feature that allows enterprise customers to use a MAM key to set a PAC file for proxy. It's designed to support unmanaged device so the MDM based solutions like 'Global HTTP Proxy MDM payload' or 'Per-App VPN' simply don't work. After doing some research we found that with WKWebView, the only framework allowed on iOS for web browsing, there's no API for programmatically setting proxy. The closes API is the WKURLSchemeHandler, but it's for data management not network request interception, in other word it can not be used to handle HTTP/HTTPS request well. When we go from the web-view level to the app level, it seems there's no API to let an app set proxy for itself at an app-level, the closest API is Per-App VPN but as mentioned above, Per-App VPN is only available for managed device so we can't use that as well. Eventually we go to the system level, and try to use Network Extension, but there's still obstacles. It seems Network Extension doesn't directly provide a way to write system proxy. In order to archive that, we may have to use Packet Tunnel Provider in destination IP mode and create a local VPN server to loop back the network traffic and do the proxy stuff in that server. In other word, the custom VPN protocol is 'forward directly without encryption'. This approach looks viable as we see some of the network analysis tools use this approach, but still I'd like to ask is this against App Store Review Guidelines? If the above approach with Network Extension is not against App Store Review Guidelines, I have a further question that, what is the NEProxySettings of NETunnelNetworkSettings for? Is it the proxy which proxies the VPN traffic (in order to hide source IP from VPN provider) or it is the proxy to use after network traffic goes into the virtual private network? If none of the above is considered recommended, what is the recommended way to programmatically set proxy on WKWebView on an unmanaged device (regardless of where the proxy runs, web-view/app/system)?
4
0
1.7k
Apr ’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.4k
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.9k
Jul ’22