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

General Documentation

Post

Replies

Boosts

Views

Activity

Safari extension - badgeText and title set for a tab
I am building Safari extension. In my background script I am setting badge text and title like this: browser.action.setBadgeText({text: badgeText, tabId: tabId}); browser.action.setTitle({title: badgeText + " found images", tabId: tabId}) , where tabId is correct id of current tab. I was expecting that in this way I am setting a different badge and title for different tabs, so that badge and title would automatically switch if I activate different tab. However this does not happen, badge and title behave as if set globaly and don't change with tabs. How is this expected to work? I have also tried to set badge globally, and update it every time user switches a tab. I have set up listener like this: browser.tabs.onActivated.addListener(function(actInfo) { console.log("switched tab to " + actInfo.tabId); }); , however the event never fires, tab switch is never logged in console. Am I doing something wrong here? This is my manifest, if there was a problem with permissions or something similar. { "manifest_version": 3, "default_locale": "en", "name": "Test", "description": "Test Extension", "version": "1.0", "icons": { "48": "images/icon-48.png", "96": "images/icon-96.png", "128": "images/icon-128.png", "256": "images/icon-256.png", "512": "images/icon-512.png" }, "action": { "default_title": "a test title", "default_popup": "popup/hello.html", "default_icon": { "16": "images/toolbar-icon-16.png", "19": "images/toolbar-icon-19.png", "32": "images/toolbar-icon-32.png", "38": "images/toolbar-icon-38.png", "48": "images/toolbar-icon-48.png", "72": "images/toolbar-icon-72.png" } }, "web_accessible_resources": [ { "matches": ["*://*/*"], "resources": ["images/*", "css/*", "scripts/lib/*"] } ], "background": { "service_worker": "scripts/background.js", "type": "module" }, "content_scripts": [ { "js": [ "scripts/content.js" ], "matches": [ "http://*/*", "https://*/*" ], "css": ["css/style.css"], "run_at": "document_end" } ], "permissions": [ "nativeMessaging", "tabs" ] }
3
0
289
Sep ’24
App not releasing memory immediately
We as a team of engineers work on an app intended to visualize medical images. The type of situations where the app is used involves time critical decision making for acute clinical conditions. Stability of the app and performance are of almost importance and can directly help timely treatment action. The app we are developing uses Javascript. It has been observed the footprint of the app is lagging by 2 to 3 seconds in releasing memory while javascript is expecting the memory to be cleared. This is affecting the stability of our application and preventing us in delivering the right quality of application. The problem specifically can be described as follows, using javascript create an array and then remove it and after removal of the array, create a new array of the same size immediately and again remove it. Because the memory is not released in time, if you repeat these steps a few times the app memory footprint will increase and that crashes the app. To reproduce this scenario, we have created a simple app which creates an array with size of 100MB and checks the memory footprint using the Xcode instrument tool. When we create an array of 100MB size, sometimes it shows the memory footprint peak of around 700MB-800MB and when we clear the array by assigning it with an empty array it releases the memory after 2-3 seconds. Considering the critical nature of the app, I urge you to look into this and provide necessary support and resolution. Please refer below sample code that will help to reproduce the mentioned scenario. import UIKit import WebKit class ViewController: UIViewController, WKUIDelegate { @IBOutlet var webView: WKWebView! let myHTML = """ <!DOCTYPE html> <html> <head> <style> .button-style { width: 400px; height: 200px; margin: 15px; font-size: 50px; } </style> </head> <body> <button type="button" class="button-style" onclick="loadDataInCache()">Load Data In Cache</button> <button type="button" class="button-style" onclick="removeDataFromCache()">Clear Cache</button> <script> const size = 1024 * 1024 * 100; let numberArray = []; function loadDataInCache() { numberArray = Array(size).fill(0); } function removeDataFromCache() { numberArray = []; } </script> </body> </html> """ override func viewDidLoad() { super.viewDidLoad() // self.view.addSubview(webView) webView.loadHTMLString(myHTML, baseURL: nil) } override func loadView() { let webConfiguration = WKWebViewConfiguration() webView = WKWebView(frame: .zero, configuration: webConfiguration) webView.uiDelegate = self view = webView } }
2
2
382
Sep ’24
Enable/disable Safari web extension content blocker using declarative_net_request in manifest
Is it possible to enable/disable the enabled flag before the extension is loaded? we want to have a button in our app which controls the availability of the content blocker ruleSet in declarative_net_request in manifest (version 2). "declarative_net_request": { "rule_resources": [ { "id": "ruleset_1", "enabled": true, "path": "ruleset_1.json" } ] },
3
0
353
Sep ’24
Options and Services in Safari with Selenium?
Firefox and Chrome provide various options and services to set up browser characteristics while testing. These can be used with Selenium while setting up the driver. An example with Firefox is setting a custom user agent and a download directory different than the default. Using Python: from selenium.webdriver.firefox.options import \ Options as FirefoxOptions from selenium.webdriver.firefox.service import \ Service as FirefoxService firefox_options = FirefoxOptions() # set up user agent user_agent = UserAgent().get_user_agent() firefox_options.set_preference("general.useragent.override", user_agent) # set alternate download location firefox_options.set_preference('browser.download.folderList', 2) firefox_options.set_preference('browser.download.dir', download_dir_path) Many of these browser-specific options and services are listed at Selenium's website under Supported Browsers. However, Safari's information is very limited. On Selenium's site, for example, they list how to turn on Safari's limited logging: service = webdriver.SafariService(service_args=["--diagnose"]). Then, they point us to About WebDriver for Safari - which shows automaticInspection and automaticProfiling. The page primarily describes security features for testing with Safari. In a regular user session, one can configure an alternate download directory, set a custom profile with specific settings for that profile, and so on. And, in the Developer Menu I can set some of these items manually for a given session (user agent, for example). How can I access these features within Safari for use in automated web testing with Selenium? Edit: Alternatively, does Apple have, or recommend, a different automated testing package for Safari?
1
0
281
Sep ’24
iOS 18 - Safari Extension turned on but not working & storage nuked
Hello, I am developer of a Safari Extension. I have had a few reports from users who have paid for my app and have upgraded to iOS 18 report that the extension isn't working any more. I upgraded myself and opened Safari, my extension was turned on but not working. I turned the extension off and back on, then it started working. However it did not have anything in browser.storage.local... so it has to be setup again from scratch for all of these users... This has been confirmed by multiple users. What the hell is this Apple? Why have you nuked Safari Extension storage when upgrading to iOS 18? And why does the extension stop working when upgrading to iOS 18? Nowhere near good enough... was this even tested?
2
1
623
Sep ’24
The difficulties of web development in the face of opaque inappropriate Safari autofill behavior
Through focussed debugging, I have discerned that if a web page's "text" input element's name attribute contains a dash (and does not contain -#- (e.g. -0-)), Safari will: Display a contacts icon inside the field and Add a drop-down populated with phone numbers from the user's contact card (on top of any pre-existing datalist dropdown). Ignore the element's autocomplete="off" There is post after post and blog article after blog article on the web that propose endless solutions to similar Safari issues, each working in various different contexts. It's a mess really. I am currently trying to develop a django web form for scientific data using django's FormSet class. Specifically, I was using FormsSet.empty_form to create a javascript clone-able form that would propagate field values to added (numbered) forms. I implemented things incrementally. I started out with a regular form and encountered a behavior where an autofill dropdown would present me with previously submitted values, e.g.: Adding autocomplete="off" to the input element prevented this. I then implemented formsets, defaulting to 1 form (so that all input elements' names started with form-0-) and everything worked as expected. However, when I changed the strategy with default to 0 initial forms and presented FormSet.empty_form as a template that would be cloned anytime files were dropped/selected, I started getting phone number drop-downs in all of the test fields: I googled this quite a bit and tried many things, including a strategy I'd employed before, to no avail, so to make debugging this issue easier and try a bunch of things quickly, I saved the page source and put it in the static folder, then started tweaking things to figure out what was causing this to happen. It appears that anytime a text input element's name attribute contains a dash (and does not contain -#-), Safari assumes it's a phone number field, despite the fact that the name's text, placeholder's text, possibly the label's text, the fact that the element has a list attribute set to the ID of a datalist element, and the fact that autocomplete is explicitly set to off. I would say that the heuristic used to trigger phone number autofill needs some serious tweaking. Not only that, but web developers need more transparency on how it works, so that non-sensical autofill behavior like this can be avoided. Another aspect of this is that if you have lots of cloned forms that Safari tries to apply autofill to, it dramatically decreases the page's performance. Safari autofill behavior has been a constant bane of mine, because many of our users use macs. I have not yet tried CSS solutions I've seen hints of (mainly because all the articles/posts I've seen about them are quite dated). Any information anyone can provide to tame Safari autofill and prevent this errant behavior would be much appreciated.
0
0
202
Sep ’24
Universal Linking not working
Hi Team, Universal linking is not working with safelink and when using the amazon SES. https://docs.aws.amazon.com/ses/ When we have email template and click on the links we are unable to open the app with safe links, does anyone faced this problem before for when using safe link with amazon SES or any other services. Please help me to resolve this issue as soon as possible.
1
1
262
Sep ’24
Content blocker extensions vs content blocking using Safari extensions for dynamic URLs
We have observed that blocking content using Safari web extension does not fetch few URLS within the #document (documentURLs) because the onBeforeRequest webextension API is currently not available in Safari iOS. But it works fine using the Content blocking extension. We have a list of URLs which we want to block from the website. Which extension would you suggest the Content blocking extension or the Safari web extension?
1
0
268
Sep ’24
Cannot Play mp3 File via AudioContext in iOS 18 Safari
I have a Safari extension that plays audio via the javascript AudioContext API. It was working fine under iOS 17 and is now broken under iOS 18. It does not play audio at all. I've tried in both the iOS 18 public beta and the iOS 18.1 developer beta. It is broken in both of them. I've also created Feedback item FB15170620 which has a url attached to a page I created which demonstrates the issue.
0
0
351
Sep ’24
WKWebview form filling with cross origin iframe
Hi everyone, I’m working on an iOS app using WKWebView, and I have a specific use case involving cross-origin iframes and form autofill. I’m wondering if it’s possible to programmatically fill input elements, such as credit card numbers, within a cross-origin iframe loaded in a WKWebView. I understand that due to the Same-Origin Policy, direct DOM manipulation of cross-origin iframes is restricted. However, I’m curious if there are any methods or workarounds that might allow me to achieve this, specifically within the context of WKWebView. Thanks.
2
0
393
Sep ’24
SFSafariApplication::dispatchMessage() in xcode 16
We are making Safari extension for MacOS, that uses SFSafariApplication.dispatchMessage() to communicate between native and javascript parts of extension. Until recently everything worked, however after update to xcode 16 I started getting this error: 'dispatchMessage(withName:toExtensionWithIdentifier:userInfo:completionHandler:)' is unavailable in application extensions for macOS: Not available to extensions 'dispatchMessage(withName:toExtensionWithIdentifier:userInfo:completionHandler:)' has been explicitly marked unavailable here (SafariServices.SFSafariApplication) I looked into documentation, however I did not find any hint of dispatchMessage() being replaced by something else. According to https://developer.apple.com/documentation/safariservices/messaging-between-the-app-and-javascript-in-a-safari-web-extension this is the way communication should be done. Is it a bug? Or can someone direct me to working alternative of communication?
6
0
439
Sep ’24
Shadows are not displayed correctly
Open PDF https://bug-279812-attachments.webkit.org/attachment.cgi?id=472582 in Safari using https://mozilla.github.io/pdf.js/web/viewer.html It looks like: In Chrome it looks like: Bug tracker: https://bugs.webkit.org/show_bug.cgi?id=279812 Please fix the issue.
0
0
179
Sep ’24
Plans for web-based mID verification?
Hi, I run an online enrollment system for a school in Arizona. Through this, we've been able to streamline document collection ten-fold, however, we're now trying to optimize where the documents come from. Since Arizona supports mID, I was curious if Apple has any plans on allowing websites access to mID verification? I noticed Google had an interest form for a web API, so if there is one for Apple, I'd appreciate the link (i can't find it)! Thanks!
0
0
166
Sep ’24
Flutter iOS- The flutter webview on an iOS device fails to load assets, images, and CSS files with relative URLs from the local directory.
Flutter web view- I am downloading assets from server and using that assets to create html file to load on web view. I downloaded them to the local document directory on the device. From there I can load the HTML files in a webview using the file:// schema, with the benefit that images, css etc. that are referenced in the HTML are loaded as well. This works fine in Android (simulator and real device) as well as in an iOS simulator. But on an iOS device the flutter webview fails to load assets , images & css files with a relative URL from local directory. This is strange as the iOS simulator should behave the same in that case (as it is not really a hardware related issue). Help me out from this issue.
0
0
380
Sep ’24
@@extension_id replacement in CSS file fails in Sequoia, Safari 18
Typically, you can use the @@extension_id special string to reference the absolute path into the bundled resources of an extension, such as an image or a custom font, in a CSS file. However, this broke with Safari 18. Consider this section in a popup.css file: .card-icon { height: 16px; width: 20px; background-image: url(safari-web-extension://__MSG_@@extension_id__/images/card.svg); background-size: 20px 16px; } In Safari 17.4, once loaded in the browser, @@extension_id is replaced with E8BEA491-9B80-45DB-8B20-3E586473BD47, and the background-image reads as so: background-image: url(safari-web-extension://E8BEA491-9B80-45DB-8B20-3E586473BD47/images/card.svg); But as of Safari 18, the @@extension_id just collapses to an empty string, and the background-image reads as so: background-image: url(safari-web-extension:///images/card.svg); and the svg fails to load with the following error: "Failed to load resource: You do not have permission to access the requested resource." This is a regression, does to match the behavior of the other major browsers, and should be fixed. Filed with Feedback ID: FB15104807
2
1
501
Sep ’24
Safari DNR Redirect Issue When Using Address Bar for Default Search Engine Queries
I’ve noticed that redirecting from one web page to another using DNR (Declarative Net Request) no longer works if: The source page is a search results page of the default search engine, and The user searches for a keyword from Safari’s address bar. Has this functionality been degraded, or is it an intentional restriction? I'd like a response from Apple. Steps to Reproduce Create a Safari extension that adds the following rule using browser.declarativeNetRequest.updateSessionRules() in background.js: { id: 37457985, priority: 1, action: { type: "redirect", redirect: { regexSubstitution: "https://search.brave.com/search?q=\\1" }, }, condition: { regexFilter: "https://duckduckgo.com/\\?(?:.*&)?q=([^&]*).*", resourceTypes: ["main_frame"] } } Enable the extension in Safari. Set Safari’s default search engine to DuckDuckGo. Type "hello" in the address bar to search for it. Expected: Search results for "hello" appear in Brave Search. Actual: Safari navigates to neither DuckDuckGo nor Brave Search. For further reference, please see: Sample Xcode project: GitHub link Demo video: GitHub link Environment I’ve confirmed this issue on the following environments: Safari Technology Preview 202 (macOS Sonoma 14.6.1 (23G93)) iOS 18 RC (22A3354) This issue does not occur in the latest release version of Safari 17.6 (19618.3.11.11.5) on macOS, so I believe it started with the current development version of Safari. Context My Safari extension, Redirect Web for Safari, uses DNR to redirect one web page to another. While the extension is not specifically designed to change the default search engine, some users use it to set their preferred search engine. Unfortunately, this issue will break their use case. Additional Information This issue only occurs when searching from the address bar. It does not happen when searching directly from https://duckduckgo.com. I haven’t submitted this issue via Feedback Assistant because I’m unsure if it’s a bug or intentional behavior. I’d like to confirm if this is by design first.
2
0
493
Sep ’24