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?
Explore the integration of web technologies within your app. Discuss building web-based apps, leveraging Safari functionalities, and integrating with web services.
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Created
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!
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?
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.
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.
The extension popups don't seem to support the dark mode media query.
The only way the query gets detected is when a color-scheme is added:
<meta name="color-scheme"content="light dark">
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?
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
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
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)?
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
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
Hello,
I'm not able to get the webauthn attestation statement using the option (attestation.direct) on Safari. The answer I get is a fmt of none and a aaguid of zeros.
The same code works on Chrome and I was able to get a none zero aaguid and a packed fmt attestation.
Can you explain why this does not work on Safari ?
Thank you.
I recently noticed that putting the app on background for some time, then switching back to it again causes the WKWebView to reload the current page, same with just hitting f5 on it. How do we disable this behavior?
My team recently released an app to the iOS app store. We are trying to add the Smart App Banner to our website to promote the app, but the banner is not shown. When the page loads, there is a flash of an empty Smart App Banner before it is automatically dismissed. This happens on every page load. If I put use an app ID of other apps the banner appears. I've triple checked that I'm using the correct app ID. So it seems like it is an issue with my app. I can see my app in the App Store, so I know it's available. I've tested on multiple phones.
I'd like to know the install state of my iOS safari extension in the associated swift app. Is there any way to get this? As we have seen it is available for macOS here, is there anyway to know iOS Safari extension is enabled or not?
Thanks
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?
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!
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.
I am encountering an intermittent issue with WKWebView in my iOS app. The problem occurs infrequently, but when it does, the WKWebView consistently displays a white screen and remains in this state until the app is forcefully terminated and relaunched.
To provide more context, here are the key characteristics of the issue:
The white screen problem occurs sporadically and is not easily reproducible.
The WKWebView remains unresponsive despite attempts to interact with it.
Reloading the webpage or navigating to a different URL does not resolve the white screen issue.
The problem persists until the app is terminated and relaunched.
This issue is specific to the WKWebView; other components of the app function correctly.
The WKWebView renders normally, and the main document synchronously loads resources both offline and online without any issues. The bridge and JavaScript execution also work as expected.
However, when interacting with the WKWebView, it becomes unresponsive to user clicks, and the web inspector fails to respond. Additionally, asynchronous network requests also do not receive any response.
The problem occurs exclusively on HTTPS pages, whereas HTTP pages load without any issues. Other components, such as workers, function correctly.
addUserScript injection during WKWebView creation is effective, and evaluateJavaScript during the page loading process works as expected. However, when the document becomes unresponsive, executing evaluateJavaScript only triggers the callback after the WKWebView is destroyed.
I have discovered a reliable method to reproduce the white screen issue in WKWebView. This method involves the following steps and conditions:
Create a WKWebView instance.
Load an HTML page using the loadRequest method(https url request).
Before the WKWebView is attached to the UI (not yet visible to the user), call the evaluateJavaScript function.
This issue has occurred in almost all iOS versions, including the latest iOS 17.x version.