Fix: content script may load before the background is ready

background/background.js

@@ -279,6 +279,8 @@ if (FIREFOX && browser.commands && browser.commands.update) {
   });
 }
 
+msg.broadcastTab({method: 'backgroundReady'});
+
 function reinjectContentScripts() {
   const NTP = 'chrome://newtab/';
   const ALL_URLS = '<all_urls>';

content/apply.js

@@ -15,24 +15,8 @@ const APPLY = (() => {
   var disabledElements = new Map();
   var docRewriteObserver;
   var docRootObserver;
+  const initializing = init();
 
-  // FIXME: styleViaAPI
-  // FIXME: getStylesFallback?
-  if (!chrome.app && document instanceof XMLDocument) {
-    API.styleViaAPI({action: 'styleApply'});
-  } else {
-    API.getSectionsByUrl(getMatchUrl(), {enabled: true})
-      .then(result => {
-        const styles = Object.values(result);
-        // CSS transition bug workaround: since we insert styles asynchronously,
-        // the browsers, especially Firefox, may apply all transitions on page load
-        applyStyles(styles, () => {
-          if (styles.some(s => s.code.includes('transition'))) {
-            applyTransitionPatch();
-          }
-        });
-      });
-  }
   msg.onTab(applyOnMessage);
 
   if (!isOwnPage) {
@@ -52,6 +36,25 @@ const APPLY = (() => {
 
   const setStyleContent = createSetStyleContent();
 
+  function init() {
+    // FIXME: styleViaAPI
+    // FIXME: getStylesFallback?
+    if (!chrome.app && document instanceof XMLDocument) {
+      return API.styleViaAPI({action: 'styleApply'});
+    }
+    return API.getSectionsByUrl(getMatchUrl(), {enabled: true})
+      .then(result => {
+        const styles = Object.values(result);
+        // CSS transition bug workaround: since we insert styles asynchronously,
+        // the browsers, especially Firefox, may apply all transitions on page load
+        applyStyles(styles, () => {
+          if (styles.some(s => s.code.includes('transition'))) {
+            applyTransitionPatch();
+          }
+        });
+      });
+  }
+
   function pageObject(target) {
     // https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts
     const obj = new window.Object();
@@ -209,6 +212,14 @@ const APPLY = (() => {
 
       case 'ping':
         return true;
+
+      case 'backgroundReady':
+        initializing.catch(err => {
+          if (msg.RX_NO_RECEIVER.test(err.message)) {
+            init();
+          }
+        });
+        break;
     }
   }
 

js/msg.js

@@ -27,6 +27,8 @@ const msg = (() => {
   const EXTENSION_URL = chrome.runtime.getURL('');
   let handler;
   const from_ = location.href.startsWith(EXTENSION_URL) ? 'extension' : 'content';
+  const RX_NO_RECEIVER = /Receiving end does not exist/;
+  const RX_PORT_CLOSED = /The message port closed before a response was received/;
   return {
     send,
     sendTab,
@@ -38,7 +40,9 @@ const msg = (() => {
     on,
     onTab,
     onExtension,
-    off
+    off,
+    RX_NO_RECEIVER,
+    RX_PORT_CLOSED
   };
 
   function send(data, target = 'extension') {
@@ -83,8 +87,8 @@ const msg = (() => {
 
   function broadcastError(err) {
     if (err.message && (
-      /Receiving end does not exist/.test(err.message) ||
+      RX_NO_RECEIVER.test(err.message) ||
-      /The message port closed before a response was received/.test(err.message)
+      RX_PORT_CLOSED.test(err.message)
     )) {
       return;
     }