Skip to content

Instantly share code, notes, and snippets.

@cuylerstuwe
Last active July 3, 2019 07:21
Show Gist options
  • Select an option

  • Save cuylerstuwe/e5a2cd634644906657f2de40a7bd68f2 to your computer and use it in GitHub Desktop.

Select an option

Save cuylerstuwe/e5a2cd634644906657f2de40a7bd68f2 to your computer and use it in GitHub Desktop.
Hit Forker and Panda Crazy in a split shared tab.
// ==UserScript==
// @name Panda Express
// @namespace salembeats
// @version 1.3
// @description Puts Hit Forker (and variants) side-by-side with Panda Crazy. Also acts as a liason allowing Hit Forker and Panda Crazy to post/receive messages from one another by using window.parent as a proxy.
// @author Cuyler Stuwe (salembeats)
// @match https://worker.mturk.com/?pandaExpress*
// @grant none
// ==/UserScript==
// Posting a message to window.parent in either Hit Forker or Panda Crazy
// will relay that message to the other running script (as a message from window.parent).
// NOTE:
// As long as referrers are not disabled, an embedded instance of Panda Crazy or Hit Forker
// should be able to tell that it's contained within Panda Express
// by checking document.referrer for the match pattern for this userscript ("https://worker.mturk.com/?pandaExpress").
// So if Panda Crazy has a document.referrer containing "?pandaExpress", it's reasonable to assume that any
// messages coming from window.parent are actually coming from Hit Forker.
(function() {
document.write(`
<style>.panda-container { z-index: 1; position: fixed; left: 0px; top: 0px; display: flex; box-sizing: border-box; width: 100vw; height: 100vh; padding: 0px; margin: 0px; }</style>
<style>.panda-logo { z-index: 2; position: fixed; background: url("https://i.imgur.com/y10aWEe.png"); background-size: cover; width: 100px; height: 100px; left: calc(50vw - 50px); top: calc(100vh - 100px); pointer-events: none;}</style>
<style>iframe { display: inline-block; width: 50%; border: 0px; margin: 0px; padding: 0px;}</style>
<div class="panda-logo"></div>
<div class="panda-container">
<iframe src="https://worker.mturk.com/?over9000"></iframe>
<iframe src="http*://worker.mturk.com/?PandaCrazy"></iframe>
</div>
`);
const [forker, pandaCrazy] = [...document.querySelectorAll("iframe")].map(frame => frame.contentWindow);
window.addEventListener("message", e => {
const {source} = e;
[forker, pandaCrazy].forEach(iframeWindow => {
if(iframeWindow !== source) {
iframeWindow.postMessage(e.data, "*");
}
});
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment