refactor(opnusercss-hook): modularize logic

content/install-hook-openusercss.js

@@ -1,29 +1,25 @@
 'use strict';
 
-(() => {
+const manifest = chrome.runtime.getManifest();
-  const manifest = chrome.runtime.getManifest();
+const allowedOrigins = [
-  const allowedOrigins = [
   'https://openusercss.org',
   'https://openusercss.com'
-  ];
+];
 
+const askHandshake = () => {
   // Tell the page that we exist and that it should send the handshake
   allowedOrigins.forEach(origin => {
     window.postMessage({
       'type': 'ouc-begin-handshake'
     }, origin);
   });
+};
 
-  // Wait for the handshake
+const doHandshake = () => {
-  window.addEventListener('message', event => {
-    if (
-      event.data
-      && event.data.type === 'ouc-handshake-question'
-      && allowedOrigins.includes(event.origin)
-    ) {
   // This is a representation of features that Stylus is capable of
   const implementedFeatures = [
     'install-usercss',
+    'install-usercss-event',
     'configure-after-install',
     'builtin-editor',
     'create-usercss',
@@ -64,6 +60,22 @@
       }
     }, origin);
   });
+};
+
+const attachHandshakeListeners = () => {
+  // Wait for the handshake request, then start it
+  window.addEventListener('message', event => {
+    if (
+      event.data
+      && event.data.type === 'ouc-handshake-question'
+      && allowedOrigins.includes(event.origin)
+    ) {
+      doHandshake();
     }
   });
+};
+
+(() => {
+  attachHandshakeListeners();
+  askHandshake();
 })();