Load content scripts on document.body is ready

4 files changed, 51 insertions, 14 deletions

diff --git a/manifest.json b/manifest.json
index 569d17b..4d3aebc 100644
--- a/manifest.json
+++ b/manifest.json
@@ -17,7 +17,7 @@
       "all_frames": true,
       "matches": [ "<all_urls>" ],
       "js": [ "build/content.js" ],
-      "run_at": "document_end",
+      "run_at": "document_start",
       "match_about_blank": true
     }
   ],
diff --git a/src/console/index.tsx b/src/console/index.tsx
index 228625e..f9313a0 100644
--- a/src/console/index.tsx
+++ b/src/console/index.tsx
@@ -11,7 +11,7 @@ import ReactDOM from "react-dom";
 
 const store = createStore(reducers, applyMiddleware(promise));
 
-window.addEventListener("load", () => {
+window.addEventListener("DOMContentLoaded", () => {
   const wrapper = document.getElementById("vimvixen-console");
   ReactDOM.render(
     <Provider store={store}>
diff --git a/src/content/Bootstrap.ts b/src/content/Bootstrap.ts
new file mode 100644
index 0000000..62e1530
--- /dev/null
+++ b/src/content/Bootstrap.ts
@@ -0,0 +1,27 @@
+type Callback = () => void;
+
+export default class Bootstrap {
+  constructor() {}
+
+  isReady(): boolean {
+    return document.body !== null;
+  }
+
+  waitForReady(callback: Callback): void {
+    const observer = new MutationObserver(() => {
+      if (document.body != null) {
+        observer.disconnect();
+        callback();
+      }
+    });
+
+    observer.observe(document, {
+      attributes: false,
+      attributeOldValue: false,
+      characterData: false,
+      characterDataOldValue: false,
+      childList: true,
+      subtree: true,
+    });
+  }
+}
diff --git a/src/content/index.ts b/src/content/index.ts
index b575e0d..5252338 100644
--- a/src/content/index.ts
+++ b/src/content/index.ts
@@ -1,22 +1,32 @@
 import "reflect-metadata";
 
 import Application from "./Application";
+import Bootstrap from "./Bootstrap";
 import consoleFrameStyle from "./site-style";
 import { ConsoleFramePresenterImpl } from "./presenters/ConsoleFramePresenter";
 import { container } from "tsyringe";
 import "./di";
 
-if (window.self === window.top) {
-  new ConsoleFramePresenterImpl().initialize();
-}
+const initDom = () => {
+  if (window.self === window.top) {
+    new ConsoleFramePresenterImpl().initialize();
+  }
 
-try {
-  const app = container.resolve(Application);
-  app.run();
-} catch (e) {
-  console.error(e);
-}
+  try {
+    const app = container.resolve(Application);
+    app.run();
+  } catch (e) {
+    console.error(e);
+  }
 
-const style = window.document.createElement("style");
-style.textContent = consoleFrameStyle;
-window.document.head.appendChild(style);
+  const style = window.document.createElement("style");
+  style.textContent = consoleFrameStyle;
+  window.document.head.appendChild(style);
+};
+
+const bootstrap = new Bootstrap();
+if (bootstrap.isReady()) {
+  initDom();
+} else {
+  bootstrap.waitForReady(() => initDom());
+}