Use connection-based messaging for popup

ext/src/main.js

@@ -363,7 +363,6 @@ function initBridge (tabId, frameId) {
 }
 
 
-let popupTabId;
 let popupWinId;
 let popupOpenerTabId;
 let popupOpenerFrameId;
@@ -397,7 +396,6 @@ async function openPopup (tabId, frameId) {
     });
 
     // Store popup details for message forwarding
-    popupTabId = popup.tabs[0].id;
     popupWinId = popup.id;
     popupOpenerTabId = tabId;
     popupOpenerFrameId = frameId;
@@ -427,7 +425,6 @@ browser.windows.onRemoved.addListener(id => {
             subject: "shim:popupClosed"
         });
 
-        popupTabId = null;
         popupWinId = null;
         popupOpenerTabId = null;
 
@@ -435,6 +432,19 @@ browser.windows.onRemoved.addListener(id => {
 });
 
 
+/**
+ * Extension scripts make a connection to the background script
+ * with a destination name to be registered as message route.
+ */
+browser.runtime.onConnect.addListener(port => {
+    messageRouter.register(port.name, message => {
+        port.postMessage(message);
+    });
+    port.onMessage.addListener(message => {
+        messageRouter.handleMessage(message);
+    })
+});
+
 messageRouter.register("main", async (message, sender) => {
     const tabId = sender && sender.tab.id;
 
@@ -487,16 +497,6 @@ messageRouter.register("shim", (message, sender) => {
           , { frameId: popupOpenerFrameId })
 });
 
-messageRouter.register("popup", (message, sender) => {
-    if (!popupTabId) return;
-
-    try {
-        browser.tabs.sendMessage(popupTabId, message);
-    } catch (err) {
-        // Popup is closed
-    }
-});
-
 messageRouter.register("mirrorCast", message => {
     browser.tabs.sendMessage(mirrorCastTabId, message
           , { frameId: mirrorCastFrameId });

ext/src/popup/index.jsx

@@ -43,29 +43,37 @@ class App extends Component {
     }
 
     componentDidMount () {
-        browser.runtime.sendMessage({
+        this.port = browser.runtime.connect({
+            name: "popup"
+        });
+
+        this.port.postMessage({
             subject: "shim:popupReady"
         });
 
-        browser.runtime.onMessage.addListener(message => {
+        this.port.onMessage.addListener(message => {
             switch (message.subject) {
-                case "popup:populate":
+                case "popup:populate": {
                     this.setState({
                         receivers: message.data.receivers
                       , selectedMedia: message.data.selectedMedia
-                    });
+                    }, () => {
+                        // Get height of content without window decoration
+                        winHeight = document.body.clientHeight + frameHeight;
 
-                    winHeight = document.body.clientHeight + frameHeight;
-
-                    browser.windows.update(this.win.id, {
-                        height: winHeight
+                        // Adjust height to fit content
+                        browser.windows.update(this.win.id, {
+                            height: winHeight
+                        });
                     });
 
                     break;
+                }
 
-                case "popup:close":
+                case "popup:close": {
                     window.close();
                     break;
+                }
             }
         });
     }
@@ -75,7 +83,7 @@ class App extends Component {
             isLoading: true
         });
 
-        browser.runtime.sendMessage({
+        this.port.postMessage({
             subject: "shim:selectReceiver"
           , data: {
                 receiver