fix: content-webapp messaging with postMessage for firefox (#33)

- content-webapp events with abstract function
- use window.postMessage instead of custom event

See [here](https://stackoverflow.com/a/46081249/839513), and I can't
find the official documentation right now, but for security reasons,
Firefox desn't allow to pass an object inside a CustomEvent between
content-script and the host app.

You have to `cloneInto` it or something.

src/content/content-events.js

@@ -1,4 +1,5 @@
 import {
+  addMessagingEventListener,
   CONTENT_PORT_CONNECTION,
   dispatchEvent,
   READY_EVENT,
@@ -38,7 +39,7 @@ export const onScriptLoaded = (timeout = 5000, interval = 100) => {
 };
 
 export const listen = () => {
-  window.addEventListener(READY_EVENT, () => {
+  addMessagingEventListener(READY_EVENT, () => {
     console.log('Ready event received from injected script');
     isWebappReady = true;
   });

src/custom-elements/webapp-events.js

@@ -1,11 +1,11 @@
-import { dispatchEvent, READY_EVENT, RESPONSE_PACKAGE_INFO_EVENT } from '../events-shared.js';
+import { addMessagingEventListener, dispatchEvent, READY_EVENT, RESPONSE_PACKAGE_INFO_EVENT } from '../events-shared.js';
 import * as store from './store.js';
 
 export const initEventListenersAndStore = () => {
   console.debug('Store initialized by referencing to the store', store);
 
-  window.addEventListener(RESPONSE_PACKAGE_INFO_EVENT, ({ detail }) => {
-    const { packageId, part, info } = detail;
+  addMessagingEventListener(RESPONSE_PACKAGE_INFO_EVENT, (data) => {
+    const { packageId, part, info } = data;
     store.updatePackageInfo(packageId, part, info);
   });
 

src/events-shared.js

@@ -5,6 +5,13 @@ export const READY_EVENT = overlayPrefix + 'READY_EVENT';
 export const CONTENT_PORT_CONNECTION = overlayPrefix + 'content-script';
 
 export const dispatchEvent = (type, detail) => {
-  const event = new CustomEvent(type, { detail });
-  window.dispatchEvent(event);
+  window.postMessage({ type, detail });
+};
+
+export const addMessagingEventListener = (type, callback) => {
+  window.addEventListener('message', (event) => {
+    if (event?.data?.type === type) {
+      callback(event.data.detail);
+    }
+  });
 };