added onmessage to the background handler, improved check for signed messages and fixed syntax error in the event trigger function

Author: andreadev-it

README.md

@@ -8,7 +8,8 @@ This project was inspired by comlink, and it started out as a way for me to bett
 ## How does it work?
 
 In your background script, you must create a BackgroundHandler class and pass it an object that contains the property and methods that you want to share:
-```
+
+```js
 // background.js
 
 function remoteFunction() {
@@ -22,7 +23,8 @@ let bgHandler = new BackgroundHandler({
 ```
 
 In your content script, you should create a BackgroundScript class and then use it in this way:
-```
+
+```js
 var bgScript = new BackgroundScript();
 
 async function foo() {
@@ -34,3 +36,32 @@ async function foo() {
 
 }
 ```
+
+## Installation
+
+Download the `bgscript.js` file and include it in your chrome extension in the following two ways.
+
+In order to use it in your content scripts, include it in your manifest.json as the first content script:
+
+```
+"content_scripts": [{
+  "js": ["bgscript.js", "my-content-script.js", ...]
+}]
+```
+
+Similarly, you need to declare it as first script in the "background scripts" section of your manifest file:
+
+```
+"background": {
+  "scripts": [ "bgscript.js", "my-background-script.js"]
+}
+```
+
+When you do this, the two classes will be automatically available in your scripts.
+
+If you're building an html page for your extension, just add the following tag to the head of your page, before any other script.
+```html
+<script src='bgscript.js'></script>
+```
+
+Of course, the background script location might be different in your project.

bgscript.js

@@ -1,5 +1,6 @@
 // This must be used in the content script (or extension page script)
 
+// Class that is used internally to emulate the chrome "onMessage" event handling for further user customization
 class BSEvent {
     listeners = []
 
@@ -14,9 +15,9 @@ class BSEvent {
         }
     }
 
-    trigger(details) {
-        for (f of this.listeners) {
-            f(details);
+    trigger(...details) {
+        for (let f of this.listeners) {
+            f(...details);
         }
     }
 }
@@ -35,7 +36,7 @@ class BackgroundScript {
 
     // Starts the event listener on message
     init() {
-        chrome.runtime.onMessage.addListener((message) => {
+        chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
             // If the message is an object, and has a "type" property, the it may be for our internal use
             if (this.isScriptMessage(message)) {
 
@@ -51,7 +52,7 @@ class BackgroundScript {
             }
 
             // If it's not for our use, than redirect it to the user handler
-            this.onMessage.trigger(message);
+            this.onMessage.trigger(message, sender, sendResponse);
         });
     }
 
@@ -100,7 +101,8 @@ class BackgroundScript {
                     let request = {
                         type: "call",
                         name: property,
-                        args: args
+                        args: args,
+                        signature: this.signature
                     }
 
                     chrome.runtime.sendMessage(request, (response) => {
@@ -138,6 +140,7 @@ class BackgroundScript {
         });
     }
 
+    // Check if the message received is coming from the bgscript library
     isScriptMessage(message) {
         if (typeof(message) === "object" && "signature" in message && message.signature == this.signature)
             return true;
@@ -146,6 +149,9 @@ class BackgroundScript {
 
     _sendMessage(request, resolve, reject) {
         try {
+            if (this.signature)
+                request.signature = this.signature;
+
             chrome.runtime.sendMessage(request, resolve);
         }
         catch (err) {
@@ -166,7 +172,8 @@ class BackgroundHandler {
     sharedMethods = {}
     sharedProps = {}
     currentCallId = 1
-    signature = null;
+    signature = null
+    onMessage = new BSEvent()
 
     constructor(sharedData) {
         // Split the shared data between functions and properties, for easier access
@@ -184,13 +191,18 @@ class BackgroundHandler {
 
     // Initialization function, adds the message listener
     init() {
-
+        // Create a signature to help identify library messages
         this.signature = this._uuidv4();
 
         // Add listener for incoming messages
         chrome.runtime.onMessage.addListener(
             (request, sender, sendResponse) => {
-                sendResponse( this.handleRequest(request, sender) );
+                if (this.isScriptMessage(request)) {
+                    sendResponse( this.handleRequest(request, sender) );
+                }
+                else {
+                    this.onMessage.trigger(request, sender, sendResponse);
+                }
             }
         );
     }
@@ -254,6 +266,15 @@ class BackgroundHandler {
         });
     }
 
+    // Check if the message received is coming from the bgscript library
+    isScriptMessage(message) {
+        if (typeof(message) === "object") {
+            if (message.type === "bootstrap") return true;
+            if (message.signature == this.signature) return true;
+        }
+        return false;
+    }
+
     _promisify(func, args) {
         let result = null;
         try {