<table><tr><td style="">broulik added a comment.
</td><a style="text-decoration: none; padding: 4px 8px; margin: 0 8px 8px; float: right; color: #464C5C; font-weight: bold; border-radius: 3px; background-color: #F7F7F9; background-image: linear-gradient(to bottom,#fff,#f1f0f1); display: inline-block; border: 1px solid rgba(71,87,120,.2);" href="https://phabricator.kde.org/D13618">View Revision</a></tr></table><br /><div><div><p>An idea how to avoid adding a DOM node altogether</p></div></div><br /><div><strong>INLINE COMMENTS</strong><div><div style="margin: 6px 0 12px 0;"><div style="border: 1px solid #C7CCD9; border-radius: 3px;"><div style="padding: 0; background: #F7F7F7; border-color: #e3e4e8; border-style: solid; border-width: 0 0 1px 0; margin: 0;"><div style="color: #74777d; background: #eff2f4; padding: 6px 8px; overflow: hidden;"><a style="float: right; text-decoration: none;" href="https://phabricator.kde.org/D13618#inline-71294">View Inline</a><span style="color: #4b4d51; font-weight: bold;">content-script.js:419</span></div>
<div style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; white-space: pre-wrap; clear: both; padding: 4px 0; margin: 0;"><div style="padding: 0 8px; margin: 0 4px; "><span style="color: #766510">                    var transferItem = document.getElementById('</span><span style="color: #bb66bb">${</span><span style="color: #004012">mediaSessionsTransferDivId</span><span style="color: #bb66bb">}</span><span style="color: #766510">');</span>
</div><div style="padding: 0 8px; margin: 0 4px; "><span style="color: #766510">                    transferItem.innerText = JSON.stringify({action: action, payload: payload});</span>
</div></div></div>
<div style="margin: 8px 0; padding: 0 12px;"><p style="padding: 0; margin: 8px;">Does <tt style="background: #ebebeb; font-size: 13px;">element.dataset.mediaSessionTransfer</tt> work?</p></div></div><br /><div style="border: 1px solid #C7CCD9; border-radius: 3px;"><div style="padding: 0; background: #F7F7F7; border-color: #e3e4e8; border-style: solid; border-width: 0 0 1px 0; margin: 0;"><div style="color: #74777d; background: #eff2f4; padding: 6px 8px; overflow: hidden;"><a style="float: right; text-decoration: none;" href="https://phabricator.kde.org/D13618#inline-71293">View Inline</a><span style="color: #4b4d51; font-weight: bold;">content-script.js:423</span></div>
<div style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; white-space: pre-wrap; clear: both; padding: 4px 0; margin: 0;"><div style="padding: 0 8px; margin: 0 4px; "><span style="color: #766510">                    event.initEvent('payloadChanged', true, true);</span>
</div><div style="padding: 0 8px; margin: 0 4px; "><span style="color: #766510">                    transferItem.dispatchEvent(event);</span>
</div><div style="padding: 0 8px; margin: 0 4px; "><span style="color: #766510">                };</span>
</div></div></div>
<div style="margin: 8px 0; padding: 0 12px;"><p style="padding: 0; margin: 8px;">Would it work to <tt style="background: #ebebeb; font-size: 13px;">dispatchEvent</tt> on <tt style="background: #ebebeb; font-size: 13px;">document.documentElement</tt> or <tt style="background: #ebebeb; font-size: 13px;">document.head</tt>?</p></div></div><br /><div style="border: 1px solid #C7CCD9; border-radius: 3px;"><div style="padding: 0; background: #F7F7F7; border-color: #e3e4e8; border-style: solid; border-width: 0 0 1px 0; margin: 0;"><div style="color: #74777d; background: #eff2f4; padding: 6px 8px; overflow: hidden;"><a style="float: right; text-decoration: none;" href="https://phabricator.kde.org/D13618#inline-71295">View Inline</a><span style="color: #4b4d51; font-weight: bold;">content-script.js:484</span></div>
<div style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; white-space: pre-wrap; clear: both; padding: 4px 0; margin: 0;"><div style="padding: 0 8px; margin: 0 4px; ">        <span style="color: #74777d">// cannot access extensions from innocent page JS for security</span>
</div><div style="padding: 0 8px; margin: 0 4px; ">        <span style="color: #aa4000">var</span> <span style="color: #004012">transferItem</span> <span style="color: #aa2211">=</span> <span style="color: #304a96">document</span><span class="p">.</span><span style="color: #004012">createElement</span><span class="p">(</span><span style="color: #766510">"div"</span><span class="p">);</span>
</div><div style="padding: 0 8px; margin: 0 4px; ">        <span style="color: #004012">transferItem</span><span class="p">.</span><span style="color: #004012">setAttribute</span><span class="p">(</span><span style="color: #766510">"id"</span><span class="p">,</span> <span style="color: #004012">mediaSessionsTransferDivId</span><span class="p">);</span>
</div></div></div>
<div style="margin: 8px 0; padding: 0 12px;"><p style="padding: 0; margin: 8px;">Can we use <tt style="background: #ebebeb; font-size: 13px;">document.documentElement</tt> or <tt style="background: #ebebeb; font-size: 13px;">document.head</tt> here</p></div></div><br /><div style="border: 1px solid #C7CCD9; border-radius: 3px;"><div style="padding: 0; background: #F7F7F7; border-color: #e3e4e8; border-style: solid; border-width: 0 0 1px 0; margin: 0;"><div style="color: #74777d; background: #eff2f4; padding: 6px 8px; overflow: hidden;"><a style="float: right; text-decoration: none;" href="https://phabricator.kde.org/D13618#inline-71296">View Inline</a><span style="color: #4b4d51; font-weight: bold;">content-script.js:491</span></div>
<div style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; white-space: pre-wrap; clear: both; padding: 4px 0; margin: 0;"><div style="padding: 0 8px; margin: 0 4px; ">        <span style="color: #004012">transferItem</span><span class="p">.</span><span style="color: #004012">addEventListener</span><span class="p">(</span><span style="color: #766510">'payloadChanged'</span><span class="p">,</span> <span style="color: #aa4000">function</span><span class="p">()</span> <span class="p">{</span>
</div><div style="padding: 0 8px; margin: 0 4px; ">            <span style="color: #aa4000">var</span> <span style="color: #004012">json</span> <span style="color: #aa2211">=</span> <span style="color: #004012">JSON</span><span class="p">.</span><span style="color: #004012">parse</span><span class="p">(</span><span style="color: #aa4000">this</span><span class="p">.</span><span style="color: #004012">innerText</span><span class="p">);</span>
</div></div></div>
<div style="margin: 8px 0; padding: 0 12px;"><p style="padding: 0; margin: 8px;">And use the <tt style="background: #ebebeb; font-size: 13px;">dataset</tt> from above here</p></div></div></div></div></div><br /><div><strong>REPOSITORY</strong><div><div>R856 Plasma Browser Integration</div></div></div><br /><div><strong>REVISION DETAIL</strong><div><a href="https://phabricator.kde.org/D13618">https://phabricator.kde.org/D13618</a></div></div><br /><div><strong>To: </strong>davidedmundson<br /><strong>Cc: </strong>broulik, plasma-devel, ragreen, Pitel, ZrenBot, lesliezhai, ali-mohamed, jensreuterberg, abetts, sebas, apol, mart<br /></div>