Reputation: 5942
I developed a chrome extension and for auth I am using signInWithPopup on my auth.js that is hosted on my local by firebase emulators.
window.addEventListener('message', function(event) {
debug(`Received message: ${JSON.stringify(event. Data)}`);
if (event.data?.initAuth) {
debug('Starting auth process');
PROVIDER.setCustomParameters({
prompt: 'select_account'
});
debug('Starting popup');
signInWithPopup(auth, PROVIDER)
.then(result => {
debug(`Auth successful: ${result.user.uid}`);
window.parent.postMessage(JSON.stringify({
success: true,
data: { user: result.user }
}), '*');
})
.catch(error => {
debug(`Auth error: ${error.message}`);
window.parent.postMessage(JSON.stringify({
success: false,
error: {
code: error.code,
message: error.message
}
}), '*');
});
}
});
I send messages from offscreen
const iframe = document.createElement('iframe');
iframe.src = FIREBASE_HOSTING_URL;
document.body.appendChild(iframe);
console.error('Iframe added to offscreen document:', iframe);
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
console.error('Offscreen received message:', JSON.stringify(message, null, 2));
if (message.action === 'getAuth' && message.target === 'offscreen') {
console.error('Attempting to initiate auth in iframe');
....
window.addEventListener('message', handleIframeMessage);
iframe.contentWindow.postMessage({initAuth: true}, FIREBASE_HOSTING_URL);
sendResponse({ success: true });
return false;
}
});
but the sign-in popup always opens under chrome browser, how can I bring it on top of the browser not under?
I a using manifest v3 and my app is opened in side panel .
Upvotes: 0
Views: 22