I've been unable to successfully get a webpage to send a message to a Safari web extension, no matter what I try doing.
I've added the following to my manifest.json file, and it's running manifest v3
{
"externally_connectable": {
"matches": [ "*://mywebsite.com/*", "*://localhost:3000/*" ]
}
}
My web page executes the following code snippet. I've tried this both while running my site locally (on localhost) and pushed to production.
let safariExtensionId = "co.companyname.productname.Extension (ABCD1234)"
browser.runtime.sendMessage(safariExtensionId, { greeting: "hello"},
function(response) {
console.log("Received response from background page");
console.log(response.farewell);
}
);
In the Safari web extension's background.js file, I've added the following onMessageExternal listener:
browser.runtime.onMessageExternal.addListener((message, sender, sendResponse) => {
console.log("Received message from the sender.");
console.log(message.greeting);
sendResponse({ farewell: "Goodbye!" });
});
This is directly copied from the instructions in this WWDC video:
https://developer.apple.com/documentation/safariservices/messaging-between-a-webpage-and-your-safari-web-extension
It's also extremely difficult to debug what's happening since the extensions service working frequently does not appear in the Web Extension Background Content menu
Is there something I'm doing wrong, or a bug I'm not aware of?
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
Activity
Hi Team,
I'm using the simple mailto functionality in the demo page and when I tested the same via Safari mailto functionality is not working.
However, the same feature is working as expected via Chrome.
Demo: https://jsfiddle.net/xut0ed4y/
Kindly help.me to resolve this issue.
We’re encountering an issue when trying to add non-standard headers to outgoing requests using Declarative Net Request (DNR) rules in our Safari Web Extension.
Tested on macOS 15.4 with Safari 18.4.
Specifically, when attempting to add a custom header such as "X-Custom-Header" using a DNR rule, the header does not appear in the request. We are able to add standard headers like "Authorization" and "Cookie" to the request successfully using the same method.
This behavior suggests that Safari may be filtering or blocking non-standard headers when set via DNR rules, unlike other browsers.
In Chrome and Firefox, the same rule adds the "X-Custom-Header" header without any issue.
We are looking for assistance in fixing these issues and having our Safari Extension function the same as it does in Firefox and Chrome.
I want use the Safari Extension to decorate the window.fetch function, But No matter how I try, I can't get the fetch function to execute correctly. I was going through the documentation: https://developer.apple.com/documentation/safariservices/using-injected-style-sheets-and-scripts
and found this sentence:
"Injected scripts have an implied namespace — you don’t have to worry about your variable or function names conflicting with those of the website author, nor can a website author call functions in your extension. In other words, injected scripts and scripts that you include in the webpage run in isolated worlds, with no access to each other’s functions or data."
Does this mean I can't modify the window object in the content script just like a Chrome extension does with the webpage?
BTW, In chrome I use chrome.scripting.executeScript API, and in
plasmo I just use world: "MAIN" content script's config to achieved this feature.
I'm building a macOS Google Chrome extension.
I need to be able to send messages from the Chrome extension to the macOS app
What's the set up flow?
I've heard about native messaging, but I struggle to implement it.
I've heard about XPC, but not sure JS can send messages to a macOS XPC service.
I am calling fetch with a POST on page1 in Safari. No special cache parameters on the fetch call.
The response from the server is a 303 redirect to page2
The second page -- page2 -- is in my browser's cache with cache-control "public, max-age=31536000, immutable".
For some reason, the page2 redirect is causing a server hit to re-GET the second page every time instead of pulling from cache.
If I instead directly get the second page by doing a fetch on page2, there is no server hit.
If I do this on Chrome or Firefox, it behaves as I would expect, pulling page2 from the cache with no server hit.
In case it matters, the fetch is coming from within an iFrame. Also, if I change the original POST to a GET, the problem still happens.
I am using a pretty old version of Safari on my Mac, so I could chalk it up to that, but I am getting the same behavior with Safari on my iPhone with iOS 18.3.2
Any ideas?
Thanks.
Push Notification Issue in iOS PWA App
We’ve been trying to implement push notifications in our iOS app, which is a wrapper around a Vite PWA built using PWA Builder. Here's a detailed overview of the issues we’re facing:
Problem Summary
We originally had a working Vite PWA and used Firebase Cloud Messaging (FCM) for push notifications. When converting this PWA to an iOS app using PWA Builder:
The notification permission prompt did not behave as expected in Safari.
Even after requesting permission via a user gesture (e.g., button press), FCM token was not received.
On Safari (both Mac and Windows), permission sometimes works, but the token isn’t saved until Safari is closed and reopened.
In the iOS PWA app, the FCM token never gets retrieved.
We tried the same process on Chrome, and everything works flawlessly there.
What We’ve Tried
Wrapped the permission request and FCM token logic in a user gesture (e.g., button click), as recommended.
Confirmed our manifest includes all necessary fields (see below).
Tested across macOS, Windows, Safari (desktop), and the iOS app.
Manifest.json
{
"name": "Periscopio",
"short_name": "Periscopio",
"start_url": "/",
"display": "standalone",
"background_color": "#f2f2f2",
"lang": "en",
"scope": "/",
"description": "Facilitates the collection of primary data for market research purposes.",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/maskable_icon_x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/maskable_icon_x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"edge_side_panel": {
"preferred_width": 400
},
"display_override": [
"window-controls-overlay",
"standalone"
],
"theme_color": "#08244c",
"orientation": "portrait"
}
Core Logic (Plain TypeScript)
1. Request Notification Permission + FCM Token
async function handleRequestPermission(): Promise<string | null> {
try {
console.log("Requesting notification permission...");
const permission = await Notification.requestPermission();
console.log("Notification permission result:", permission);
if (permission === "denied") {
console.error("Notification permission was denied.");
return null;
}
const token = await requestFCMToken();
console.log("FCM Token:", token);
if (token) {
console.log("Notification setup successful.");
return token;
} else {
console.error("Failed to retrieve FCM token.");
return null;
}
} catch (error) {
console.error("Error requesting FCM token:", error);
return null;
}
}
2. FCM Token Logic
async function requestFCMToken(): Promise<string | undefined> {
try {
let permission = Notification.permission;
if (permission === "default") {
console.log("Requesting notification permission...");
permission = await Notification.requestPermission();
}
if (permission === "granted") {
console.log("Notification permission granted.");
const isSupportedBrowser = await isSupported();
if (!isSupportedBrowser) {
console.error("This browser does not support FCM.");
return;
}
const registration = await navigator.serviceWorker.register("/firebase-messaging-sw.js");
console.log("Service Worker registered:", registration);
const token = await getToken(cloudMessaging, {
vapidKey: "YOUR_PUBLIC_VAPID_KEY_HERE",
serviceWorkerRegistration: registration,
});
if (token) {
console.log("FCM Token:", token);
localStorage.setItem("fcmToken", token);
return token;
} else {
console.warn("No registration token available. Request permission to generate one.");
return;
}
} else if (permission === "denied") {
console.warn("Permission to notify was denied.");
return;
} else {
console.warn("Notification permission not granted.");
return;
}
} catch (error) {
console.error("Error getting FCM token:", error);
return;
}
}
Request for Help
We’d really appreciate support from anyone who’s successfully implemented FCM push notifications in a Vite PWA wrapped as an iOS app using PWA Builder.
Is there something we’re missing about how iOS Safari handles push permissions in PWA mode?
Could there be an issue with the service worker or the manifest setup that causes the token not to register?
Any Safari-specific quirks to be aware of?
Thanks in advance!
Topic:
Safari & Web
SubTopic:
General
From a mail app or similar, when opening a webpage in Safari as an external browser, JavaScript on the webpage stops running if Safari goes into the background. Is there a way to prevent this from happening?
Sample code for the counter:
Behavior: Upon returning from the background, the counter continues for about 7-8 seconds but does not progress further.
For example, if Safari is kept in the background for about 20 seconds and then brought back, the counter stops at around 7-8 seconds and only resumes counting after returning to the foreground.
Expectation: The counter should continue running even if Safari goes into the background.
Hi everyone,
My web application has two services: myapp.com and account.myapp.com.
The first manages all app content, while the latter handles the authentication, with Sign In with Apple included.
The tech stack is mainly composed of React, JS, and Express.
We'd like to allow users to authenticate inside a dialog on some pages of myapp.com.
To avoid replicating stuff from one service to another, we put an iframe inside the dialog to show the authentication standard page from account.myapp.com.
Email and Facebook processes work fine, but we have the following issues with Sign in with Apple:
On desktop, not Safari, a pop-up window opens when you click on the Apple button, and it works as expected.
On desktop Safari, the pop-up window is blocked. We want the native Apple pop-up to show instead of a generic browser new window.
On mobile, nothing happens on click
Obviously, outside the iframe, everything works as expected.
I can't seem to find anything related to an iframe constraint in the Sign in with Apple docs. Is this feasible?
Topic:
Safari & Web
SubTopic:
General
Tags:
Sign in with Apple REST API
Sign in with Apple
Sign in with Apple JS
I've a apple pay integration on my website. The new sdk, that allows third party browsers.
My integration works well everywhere, except on third party when I read the QR code it results in a "payment incomplete".
I have gone through several threads in apple dev forums, and several guides on implementation steps and troubleshooting. But I'm still without solution.
When Debugging in iOS device I get: "Application failed to provide a valid merchant session. We can't proceed to authorize the transaction."
I've doublechecked, the values I send to create the payment Session are correct, the domain and merchantIds. (It works well with the same implementation on safari, what's the difference here?)
I've also doublechecked the values i'm sending to the completeMerchantValidation, and they are all in the right format and types.
What else can iIcheck?
Upon upgrading to 18.3 safari now says no connection
cleared cookies and data. Disabled all extensions and all von and security
anyone else having this issue
Topic:
Safari & Web
SubTopic:
General
I'm currently experimenting to add 3d stereo images in HEIC format to my daily Mars Rover Images website https://areo.info/mars20 which can be opened on a Vision Pro. Only a few images are yet converted into that mode, those on the sol 1411 page.
As I'm currently only working in the Vision Pro Simulator from Xcode, no real 3d effect if of course visible and I'm curious if anyone using the real hardware can confirm that the images are working.
Especially the eye distance correction is important to know about as the Mars Rover camera has a much wider pupil distance than humans and while I entered that distance in the conversion tool, I'm not sure if it worked well. So feedback is welcome!
For those who like to try to create stereo images themselves: I used https://developer.apple.com/documentation/ImageIO/writing-spatial-photos to create a HEIC file from two JPEGs.
iOS 18.4 introduces the new WKWebExtension API to support extensions in WKWebView. However, for extensions that have migrated to Manifest V3 and use an extension service worker as the background script, it's currently not possible to inspect them through Safari.
This is only thing I can see, I don't know how to inspect the details of the "background.js"
I'm wondering—has this changed? Is it now possible to inspect extension service workers?
Hello, ive been dealing with this glitch all year that hasnt happened last year. When I watch a video on public safari and then it exit the video it immediately takes me to the private tab but when I go on the private tab to watch videos and exit out it takes me back to the website just like normal. Its a pretty annoying bug and I watch all my videos in the private tab because of it
Topic:
Safari & Web
SubTopic:
General
Since the transition to iOS 18.4, we have been having an issue where when loading an m3u8 file specified in the src attribute of a video tag in WKWebView, the ts file is loaded repeatedly.
Are there any good ideas for this?
Also, if there have been any changes to the specifications of WKWebView, we would appreciate it if you could let us know.
We have an app store app that hosts an internal webserver we use as a proxy and it works for a period until iOS 18.3.x decides our cert is no longer valid at which point our customer have reinstall the app. This has only become a problem on iOS18.3. We publish the self-signed with out app, and it is valid and accepted until it's not. We know the cert is valid and our implementation of the local proxy has not changed. If we install a cert on the device and trust it, then the app will start behaving normally again without reinstall. We have replicated this locally and the error we are seeing is:
Error Domain=NSURLErrorDomain Code=-1200 "An SSL error has occurred and a secure connection to the server cannot be made." UserInfo={NSLocalizedRecoverySuggestion=Would you like to connect to the server anyway?, _WKRecoveryAttempterErrorKey=<WKReloadFrameErrorRecoveryAttempter: 0x301111e40>, networkTaskDescription=LocalDataTask <541390E2-65FA-47AB-80B1-10209D6C761A>.<3>, _kCFStreamErrorDomainKey=3, NSErrorPeerCertificateChainKey=(
"<cert(0x108e3b700) s: 127.0.0.1 i: 127.0.0.1>",
"<cert(0x108e3b980) s: 127.0.0.1 i: 127.0.0.1>"
), NSErrorClientCertificateStateKey=0, NSErrorFailingURLKey=https://localhost:8082/Blablal/?device=ios&sftouch=1&pgport=8081&secure=1, NSErrorFailingURLStringKey=https://localhost:8082/blahblah/?device=ios&sftouch=1&pgport=8081&secure=1, NSUnderlyingError=0x301e1d680 {Error Domain=kCFErrorDomainCFNetwork Code=-1200 "(null)" UserInfo={_kCFStreamPropertySSLClientCertificateState=0, _kCFNetworkCFStreamSSLErrorOriginalValue=-9802, _kCFStreamErrorDomainKey=3, _kCFStreamErrorCodeKey=-9802}}, _NSURLErrorRelatedURLSessionTaskErrorKey=(
"LocalDataTask <541390E2-65FA-47AB-80B1-10209D6C761A>.<3>"
), _kCFStreamErrorCodeKey=-9802, _NSURLErrorFailingURLSessionTaskErrorKey=LocalDataTask <541390E2-65FA-47AB-80B1-10209D6C761A>.<3>, networkTaskMetricsPrivacyStance=NotEligible, NSURLErrorFailingURLPeerTrustErrorKey=<SecTrustRef: 0x302670a50>, NSLocalizedDescription=An SSL error has occurred and a secure connection to the server cannot be made.}
Hi Apple Devs & WebKit Team,
We operate https://outdoorgala.com — a verified, HTTPS-secure Canadian ecommerce site focused on elite outdoor safety gear. We're Indigenous-owned, based in Alberta, and take customer trust and compliance seriously.
However, Safari (iOS + macOS) is falsely flagging our site as “deceptive,” preventing customers from accessing us — even though:
We use GoDaddy Website Builder with no redirections or malware
All product links are clean, HTTPS-secure, and tracked ethically
We recently implemented a fully compliant cookie banner (Accept/Decline logic)
A public security.txt and OpenPGP key has been published: https://outdoorgala.com/security
No phishing, malware, or cloaking behavior exists on the site
We’ve already submitted a review via:
➡️ https://websitereview.apple.com
And filed a bug report via Feedback Assistant (FB17608544)
What else can be done to speed up review or get flagged domains unblocked in Safari? This is hurting our business and blocking consumer access — despite following all Apple guidelines.
Would appreciate any insights or escalation tips.
Thank you!
– Derek Eiteneier
Founder, Outdoor Gala
Sometimes the Safari App Extension i'm developing does not show up in my Safari Extensions unless i change mu bundle identifier to some unique name.
Even if I delete all other apps i've built with the same (and different) bundle ID, the extension is still does not show up.
The only solution for me is to always change the bundle ID.
For example:
Now it is "kopyl.tab-finder-10"
If i change it to "kopyl.tab-finder-11", the extension does show up in the Safari extensions settings page again.
Is there any other way to fix it?
Since Safari requires a macOS app as a container for Web Extensions, is there a way to establish native messaging directly from SafariWebExtensionHandler using stdin/stdout? Or does Safari enforce a different communication mechanism?
I’d like to keep the same approach as other browsers.
Any guidance on making this work would be appreciated!
If "Not Secure Connection Warnings" is enabled in the Settings > App > Safari, are no HTTP connections allowed? Setting NSAppTransportSecurity does not seem to apply either.
Topic:
Safari & Web
SubTopic:
General