Hi, I am working on safari web extension for iOS, Since Message passing is only supported from safari extension to iOS application. To pass the data from app to safari extension, I thought of storing the required data using the Userdefault suite name and "app group" to access the UserDefaults data from the safari extension. I am stuck at how to access the data at the safari extension. Any sample javascript to access the UserDefaults data is appreciated Thanks

Hi in my web extension I have a button, which I programmatically create a file for download when the user clicks it. Here is my code: a.click() However, this does nothing when I do it within the popup. It works fine on the main Safari webpage. Am I doing something wrong?

I want to get user's dictation content and do something. However, during dictation progress, system will continuously trigger 'input' DOM event with duplicated strings. It is impossible to know whether the dictation progress is end to get the final result. Several solutions here: provide specific field, like dictationStatus: end in input event params. trigger composition event instead of input event trigger specific DOM event when user presses on the dictation button. trigger input event only with latest recognized string. for example, I say " I like apple" will get 3 events with strings: "I" "like" "apple" ( not "I" "I like" "I like apple")

I recently converted my Chrome extension to a Safari extension using the Apple Conversion tool (XCode CLI). The extension is developed with ReactJS and SaSS. It works very well on Google Chrome but when I try it on Safari after converting it, the local extension works but the CSS file that handles the extension is not applied. There are no errors during the conversion but the Safari developer tool indicates several errors : console tab : Failed to load resource: You are not allowed to access the required resource. network tab : An error occurred while trying to load the resource and the resource was requested in an insecure manner. In the extension, we isolate CSS using iframe : /*global chrome*/ /* src/content.js */ import React from 'react'; import ReactDOM from 'react-dom'; import Frame, { FrameContextConsumer }from 'react-frame-component'; import "./content.css"; class Main extends React.Component { render() { return ( <Frame head={[<link type="text/css" rel="stylesheet" href={chrome.runtime.getURL("/static/css/content.css")} ></link>]}> <FrameContextConsumer> { // Callback is invoked with iframe's window and document instances ({document, window}) => { // Render Children return ( <div className={'my-extension'}> <h1>Hello world - My first Extension</h1> </div> ) } } </FrameContextConsumer> </Frame> ) } } Here is the manifest.json file: { "short_name": "My Extension", "name": "My Extension", "version": "1.0", "manifest_version": 3, "icons": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png" }, "action": { "default_icon": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png" }, "default_title": "" }, "background": { "service_worker": "background.js" }, "content_scripts" : [ { "matches": ["<all_urls>"], "css": ["/css/root.css"], "js": ["/static/js/content.js"] } ], "permissions": [ "activeTab", "scripting", "storage" ], "host_permissions": ["https://www.google.com/*"], "web_accessible_resources": [{ "resources": [ "/static/css/content.css", "/static/media/*" ], "matches": ["<all_urls>"] }] } After many attempts, I did not understand the exact origin of the problem and I do not know how to solve it. Do you have any suggestions ?

I'm in the need to know if it's possible to add a different action to an apple pay button instead of performing the checkout. In this case, I need to request for login (redirect) before performing purchases. Is this allowed by Apple?

I’m in a web dev program and since yesterday my js code causes chrome, ff and safari to freeze and crash. Chrome task manager shows cpu at 100+. On m1 Mac mini and air

As the title suggests: Safari on Monterey Beta 5 hangs on certain sites unless JavaScript is disabled. M1, safe mode, clean re-installs of everything, latest build of the STP, running latest JDK for good measure. It's annoying – anyone else seen this?

I´ve been creating a automatic Instagram Login for the past few days now but now I have encountered my probably biggest problem. Whenever I try to click on the "Not now" Button automatically for Remembering my Password on Instagram, which it does , Safari Crashes completely, not only the automatically processed tabs even the ones no Program is using. This is the code I use to press the "Not now" Button: new WebDriverWait(driver, Duration.ofSeconds(10)); WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10)); WebElement Nichtjetzt = wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//button[text()='Not Now']"))); WebElement Notnow = driver.findElement(By.xpath("//button[text()='Not Now']")); ((JavascriptExecutor)driver).executeScript("arguments[0].click();",Notnow); When I now try to execute the Method it will press only essential cookies fill out my username and password and press the login button , but then when it gets to the Press Not now button it will press it and immediately crash. This will then be the Error Code: Safari Error Code Question Ending

Hi guys, I have built a PWA that calls the javascript API navigator.geolocation.getCurrentPosition which prompts the user for location access when the Safari permission is set to Ask. This is the correct behavior and works as expected when open in Safari. However when added to the Home Screen and running with a display mode of "standalone", the location alert does not open on my phone (iPhone 13 mini / iOS 15.1.1). And the call never times out. Then if I switch from the PWA to Safari the location alert / prompt is suddenly showing in Safari. So it seems that the alert is targeting the wrong "tab". This does not happen if the PWA display mode is "browser" or "mimimal-ui" with either of those it behaves normally. I can only replicate this on my phone (iPhone 13 mini / iOS 15.1.1). I have also tested on various older phones (15.1.1 and 14.7) as well as several emulators and they all behave as expected. It is possible this is a obscure setting on my phone but it does feel a lot like an iOS Safari bug.

Is there any way to grant access to JavaScript browser API like tabs: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs#tabs for safari app extension? For web extension it is done in manifest.json. But I can't find a way to do it for app extension.

I am trying to create a webplayer for apple music and have run into some issues with actually playing the music. authorized.then((res) => { console.log(res); musicInstance.setQueue({ song: '1025212395' }).then((queue) => { console.log(queue) musicInstance.play(); }); },(rej) => { console.log("Failed to Recieve User Authorization") }) where authorized is the promise that is returned when the user logs in. I keep getting the following console errors when attempting to play any sort of media and have no clue how to debug it. Sometimes, it says DOM error and mediasource readyState is not 'open' Any ideas?

This is pretty complex to explain in details. But basically, we have an app that is allow our customer to manage their employees. The app main flow is written in Swift already. But each customer have different / unique business model that they require the app to allow them have some custom pages to input their complex data beside the main flow (which is written in Swift) Let's say the current flow for managing a flow data will look like this in our core app: Page A -> Page B -> Page C And they want something like: Page A -> Custom Page A.1 -> Page B -> Custom Page B.1 -> Page C And every customers have different flow and UI. That's why we're creating our own framework that allow customer to embed their own developed UI via Javascript (React Native), which will generate a virtual DOM and render the native UI for their custom pages. The idea is very similar with this: https://github.com/microsoft/react-native-code-push The only difference is we don't use this to push code changes for our main flow, but for each customer, after they login will have additional flow (custom pages) we need to show. So these javascript files will be downloaded remotely after the user is login, and we will run these javascript files to generate their custom forms (base on React native framework). On technical perspective, it's seem possible so far. The only problem is we don't know if Apple allow such implementation or not. But I don't think this will violate Apple's policy since the javascript will only generate virtual DOM that will generate dynamic UI.

Hello, I would like to have some fringe information about ioS Safari App extensions. My need is passing some HTML to the iOS Safari browser so a new tab or window is opened and the HTML rendered (and its Javascript executed, if any). Being that this is not possible directly, and said that I need that the HTML is handled by Safari and not by a WKWebView or by a SFSafariViewController inside my app, I thought about using an app extension. This seems to be cumbersome, especially for the reaasons described here: https://www.wildfire-corp.com/blog/to-apple-your-new-mobile-safari-extensions-are-great-can-opting-in-be-made-easier I do not know if something has changed or will change, I did not dive in the extension development yet. My idea is creating an extension with access to only a special domain, like html.myapp The url would be https://html.myapp/37h238rd83dt2d2tr8fai33cf When my app wants to open an url like that, Safari should open a window and start the extension, right? open(url,options:options,completionHandler:handler) The url contains a sort of query parameter that is a long string (bas64?) representing the entire HTML code, or a sort of unique ID. The script has to display the HTML after extracting it from the url, or read some shared data between the app and the extension based on the ID. After this point no other interaction is needed between the app and the app extension. I would like to know if the Safari browser in fact can open the new window just on behalf of a special url like the above mentioned one, that is, an url that does not point to a real web page, being that the domain is somehow "fake", although authorised from the Info.plist file. The domain is just for enabling Safari to receive the entire url with HTML string or the unique ID. So would the iOS Safari browser open the window, start the script and then display the HTML? And would all this be allowed by the submission review process? Thanks in advance, Regards PS I know that it was better that Apple allows to pass securely some HTML from a registered iOS app to Safari, instead of this workaround, even with special info.plist keys, certificates or something like that.

I am writing a web server and testing with Safari. The server is written in Go. I have a page which allows the user to upload an image. The image displays properly in Safari. The image data is in a base64 string. This is on an input tag in the HTML. The save button submits this image along with other inputs. If the string length is over about 500K, when the request arrives at the server, the image string has been truncated which then produces an error EOF when attempting to decode the image. I have used the web inspector to see if I can find an issue there, but everything appears normal. If I select an image of less than around 500K, it is shown fine in the browser and the data string is fine when it arrives at the server. The image upload is accomplished by an input button of type "file" which onchange() executes this javascript code: function processFile(imageInput) { const reader = new FileReader() reader.addEventListener("load", () => { uploaded_image = reader.result; let displayImage = document.querySelector("#display_image"); displayImage.style.backgroundImage = `url(${uploaded_image})`; document.querySelector("#display_image_data").value = uploaded_image; document.querySelector("#display_image_size").innerHTML = uploaded_image.length.toString(); }); reader.readAsDataURL(imageInput.files[0]); } The display_image_data element is <input id = "display_image_data" name = "photoBytesString" hidden>

I have a WKWebView in my app which opens a page where there is a button that uses javascript to open another page with window.open(). Now it's seems that webView(navigationAction) is never called when tapping this button. I have managed to get target="_blank" links to open, but I don't understand how I can get window.open() to work? I have added a uiDelegate to create popup windows like this: public class WKWebVC: UIViewController { &#9;... &#9;override public func viewDidLoad() { &#9;&#9;super.viewDidLoad() &#9;&#9;webView.navigationDelegate = self &#9;&#9;webView.uiDelegate = self &#9;&#9;webView.configuration.preferences.javaScriptEnabled = true    webView.configuration.preferences.javaScriptCanOpenWindowsAutomatically = true &#9;... and then the extension for WKWebVC: extension WKWebVC: WKUIDelegate {   private func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {     debugPrint("(👉🏽👉🏽👉🏽 createWebViewWith")     popupWebView = WKWebView(frame: view.bounds, configuration: configuration)     popupWebView!.autoresizingMask = [.flexibleWidth, .flexibleHeight]     popupWebView!.navigationDelegate = self     popupWebView!.uiDelegate = self     view.addSubview(popupWebView!)     return popupWebView!   }   private func webViewDidClose(_ webView: WKWebView) {     if webView == popupWebView {       popupWebView?.removeFromSuperview()       popupWebView = nil     }   } } But createWebViewWith is never called either...

Greetings to all fellow front-end coders. I have quite a headache because of Apple's autoplay policy. As you've probably experienced, you can't autoplay a video / audio element with sound without user interaction. (I'm referring to this) I'm currently trying to create my own music web application that will support playlists. I work with the Next.js framework and use react-player as player. Since it does not natively support playlists, I created a two-player pendulum system, where one plays the current sound file and the other loads the next. Then their roles change. Everything works great in all browsers, except those on iOS, because this player uses autoplay to start playing. I've been worried about this for several days. I've already thought about letting an Apple product users press play button every time a song changes as a punishment, but of course it's not a good solution. I think a lot of you have encountered this and you have certainly found a solution. Please help me :(

Hi, I'm working on screen recording in Safari. After permission prompted and recording started I see red icon with "screens" next to search bar and the same icon but with white color in tray. After clicking on such icon I can see "pause" option. Is it possible to catch event from that action or disable such option at all? PS. Different icon appears in case when I try to record from camera or just from microphone but with same "pause" option. Screenshots are attached Thanks

Hello all! Is there a way to detect with JavaScript if the website runs inside the iPhone's Safari Browser or inside an application SafariServices? I found scripts but it detect WebView or not. What I want to is detect SafariServices. Any suggestion or solution would be great! Thanks..

We are currently facing a problem with our homepage (https://www.medienwerft.de/), which only occurs when the device is using a backup from an old device. In this case the website has problems with loading headlines, sliders and other elements. Has anyone encountered problems like this before and knows how to solve them? I will attach some screenshots, that depict the mentioned problems and the device information. Thank you in advance. Video not loading headlines on images not loading slider not loading scroll elements content not loading device information