Add content-script-side functions to messageBridge

ext/src/content.js

@@ -1,38 +0,0 @@
-"use strict";
-
-const backgroundPort = browser.runtime.connect({
-    name: "shim"
-});
-
-backgroundPort.onMessage.addListener(message => {
-    const event = new CustomEvent("__castMessage", {
-        detail: JSON.stringify(message)
-    });
-    document.dispatchEvent(event);
-});
-
-let popupPort;
-browser.runtime.onConnect.addListener(port => {
-    if (port.name === "popup") {
-        popupPort = port;
-    }
-
-    port.onMessage.addListener(message => {
-        const event = new CustomEvent("__castMessage", {
-            detail: JSON.stringify(message)
-        });
-        document.dispatchEvent(event);
-    })
-});
-
-document.addEventListener("__castMessageResponse", ev => {
-    const [ destination ] = ev.detail.subject.split(":/");
-    if (destination === "popup") {
-        if (popupPort) {
-            popupPort.postMessage(ev.detail);
-        }
-        return;
-    }
-
-    backgroundPort.postMessage(ev.detail);
-});

ext/src/main.js

@@ -122,7 +122,7 @@ browser.webRequest.onBeforeRequest.addListener(
                 case SENDER_SCRIPT_URL:
                     // Content/Page script bridge
                     await browser.tabs.executeScript(details.tabId, {
-                        file: "content.js"
+                        file: "shim/content.js"
                       , frameId: details.frameId
                       , runAt: "document_start"
                     });
@@ -257,7 +257,7 @@ browser.runtime.onMessage.addListener(message => {
 // Defines window.chrome for site compatibility
 browser.contentScripts.register({
     allFrames: true
-  , js: [{ file: "contentSetup.js" }]
+  , js: [{ file: "shim/contentSetup.js" }]
   , matches: [ "<all_urls>" ]
   , runAt: "document_start"
 });
@@ -276,7 +276,7 @@ browser.menus.onClicked.addListener(async (info, tab) => {
 
     // Load cast setup script
     await browser.tabs.executeScript(tab.id, {
-        file: "content.js"
+        file: "shim/content.js"
       , frameId
     });
 

ext/src/shim/cast/classes/Session.js

@@ -8,7 +8,7 @@ import { SessionStatus
        , ErrorCode
        , VolumeControlType } from "../enums";
 
-import { onMessage, sendMessage } from "../../messageBridge";
+import { onMessage, sendMessageResponse } from "../../messageBridge";
 
 import uuid from "uuid/v1";
 
@@ -182,7 +182,7 @@ export default class Session {
     }
 
     _sendMessage (subject, data = {}) {
-        sendMessage({
+        sendMessageResponse({
             subject
           , data
           , _id: this._id

ext/src/shim/cast/index.js

@@ -28,7 +28,7 @@ import { requestSession as requestSessionTimeout } from "../timeout";
 
 import state from "../state";
 
-import { onMessage, sendMessage } from "../messageBridge";
+import { onMessage, sendMessageResponse } from "../messageBridge";
 
 
 const cast = {
@@ -90,7 +90,7 @@ cast.initialize = (
 
     state.apiConfig = apiConfig;
 
-    sendMessage({
+    sendMessageResponse({
         subject: "bridge:/discover"
     });
 
@@ -145,7 +145,7 @@ cast.requestSession = (
     sessionErrorCallback = errorCallback;
 
     // Open destination chooser
-    sendMessage({
+    sendMessageResponse({
         subject: "main:/openPopup"
     });
 };
@@ -223,7 +223,7 @@ onMessage(message => {
               , []                                   // appImages
               , selectedReceiver                     // receiver
               , (session) => {
-                    sendMessage({
+                    sendMessageResponse({
                         subject: "popup:/close"
                     });
 
@@ -257,7 +257,7 @@ onMessage(message => {
          * chooser.
          */
         case "shim:/popupReady": {
-            sendMessage({
+            sendMessageResponse({
                 subject: "popup:/populateReceiverList"
               , data: {
                     receivers: state.receiverList

ext/src/shim/content.js

@@ -0,0 +1,34 @@
+"use strict";
+
+import { onMessageResponse, sendMessage } from "./messageBridge";
+
+
+const backgroundPort = browser.runtime.connect({
+    name: "shim"
+});
+backgroundPort.onMessage.addListener(sendMessage);
+
+let popupPort;
+browser.runtime.onConnect.addListener(port => {
+    if (port.name === "popup") {
+        popupPort = port;
+    }
+    port.onMessage.addListener(sendMessage)
+});
+
+onMessageResponse(message => {
+    const [ destination ] = message.subject.split(":/");
+    switch (destination) {
+        case "popup": {
+            if (popupPort) {
+                popupPort.postMessage(message);
+            }
+
+            break;
+        };
+
+        default: {
+            backgroundPort.postMessage(message);
+        }
+    }
+});

ext/src/shim/index.js

@@ -3,7 +3,7 @@
 import cast  from "./cast";
 import media from "./media";
 
-import { onMessage, sendMessage } from "./messageBridge";
+import { onMessage } from "./messageBridge";
 
 
 if (!window.chrome) {

ext/src/shim/media/classes/Media.js

@@ -10,7 +10,7 @@ import { PlayerState
 import _Error from "../../cast/classes/Error";
 import { ErrorCode } from "../../cast/enums";
 
-import { onMessage, sendMessage } from "../../messageBridge";
+import { onMessage, sendMessageResponse } from "../../messageBridge";
 
 import uuid from "uuid/v1";
 
@@ -93,7 +93,7 @@ export default class Media {
     }
 
     _sendMessage (subject, data) {
-        sendMessage({
+        sendMessageResponse({
             subject
           , data
           , _id: this._id

ext/src/shim/messageBridge.js

@@ -1,15 +1,40 @@
 "use strict";
 
 export function onMessage (listener) {
-	document.addEventListener("__castMessage", ev => {
+    document.addEventListener("__castMessage", ev => {
-		listener(JSON.parse(ev.detail));
+        listener(JSON.parse(ev.detail));
-	});
+
+        /**
+         * TODO:
+         * Figure out a way to handle and stop propagation of this
+         * event to hide it from page scripts.
+         * Currently the event handler is set after the page loads the
+         * cast API, allowing pages set handlers before this script,
+         * intercept the event, and cancel it.
+         */
+        ev.stopPropagation();
+    }, true);
+}
+
+export function sendMessageResponse (message) {
+    const event = new CustomEvent("__castMessageResponse", {
+        detail: JSON.stringify(message)
+    });
+
+    document.dispatchEvent(event);
+}
+
+
+export function onMessageResponse (listener) {
+    document.addEventListener("__castMessageResponse", ev => {
+        listener(JSON.parse(ev.detail));
+    }, true);
 }
 
 export function sendMessage (message) {
-	const event = new CustomEvent("__castMessageResponse", {
+    const event = new CustomEvent("__castMessage", {
-		detail: message
+        detail: JSON.stringify(message)
-	});
+    });
 
-	document.dispatchEvent(event);
+    document.dispatchEvent(event);
 }

ext/webpack.config.js

@@ -9,13 +9,15 @@ module.exports = (env) => ({
         "main"           : `${env.includePath}/main.js`
       , "popup/bundle"   : `${env.includePath}/popup/index.jsx`
       , "options/bundle" : `${env.includePath}/options/index.jsx`
-      , "shim/bundle"    : `${env.includePath}/shim/index.js`
       , "updater/bundle" : `${env.includePath}/updater/index.jsx`
-      , "content"        : `${env.includePath}/content.js`
-      , "contentSetup"   : `${env.includePath}/contentSetup.js`
       , "mediaCast"      : `${env.includePath}/mediaCast.js`
       , "mirroringCast"  : `${env.includePath}/mirroringCast.js`
       , "compat/youtube" : `${env.includePath}/compat/youtube.js`
+
+        // Shim entries
+      , "shim/bundle"       : `${env.includePath}/shim/index.js`
+      , "shim/content"      : `${env.includePath}/shim/content.js`
+      , "shim/contentSetup" : `${env.includePath}/shim/contentSetup.js`
     }
   , output: {
         filename: "[name].js"