PROBLEM
An embedded chat in an iframe no longer works with the latest Chrome (Version 91.0.4472.19) update. The chat is visible but when you type something you immediately get the following error:
You rejected the prompt to send messages in this embedded version of Twitch Chat. If this was done in error, please refresh the page.
This happens because the latest Chrome (Version 91.0.4472.19) has removed alert() and confirm() for cross-origin iframes. (See: Chrome Platform Status)
Before this Chrome update you would get a notification on the parent frame that you’re about to type into the chat.
QUESTION
Does anyone know if you can prompt the user to accept sending messages any different way?
EXAMPLE CODE
In development I’m using parent=localhost
<iframe
height="100%"
width="100%"
title="1"
frameborder="0"
scrolling="no"
id="chat_embed"
src="https://www.twitch.tv/embed/Insomniac/chat?darkpopout=true&parent=localhost"
sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-modals">
</iframe>
In production, the same problem happens using parent=plamper.life
<iframe
height="100%"
width="100%"
title="1"
frameborder="0"
scrolling="no"
id="chat_embed"
src="https://www.twitch.tv/embed/Insomniac/chat?darkpopout=true&parent=plamper.life"
sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-modals">
</iframe>
USE CASE
I’ve created a small website (https://plamper.life) where I can watch many of my favorite music streams simultaneously, be chat/mod multiple channels, and use one button to solo one stream at a time. It works by creating two iFrames (video and chat), wrapping it in another <div>
then stacking them horizontally.
Example screenshot: https://twitter.com/triodeofficial/status/1343730006829068288/photo/1