message passing between background and content

manifest.json

@@ -8,5 +8,8 @@
       "matches": [ "http://*/*", "https://*/*" ],
       "js": [ "build/index.js" ]
     }
-  ]
+  ],
+  "background": {
+    "scripts": ["build/background.js"]
+  }
 }

src/background/index.js

@@ -0,0 +1,4 @@
+browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  console.log("Pressed " + request.which);
+  sendResponse({ response: "Response from background script" });
+});

src/content/index.js

@@ -0,0 +1,9 @@
+window.addEventListener("keypress", (e) => {
+  browser.runtime.sendMessage({
+    which: e.which || e.keyCode,
+  }).then((msg) => {
+    console.log(`Message from the background script:  ${msg.response}`);
+  }, (err) => {
+    console.log(`Error: ${err}`);
+  });
+});

src/index.js

@@ -1,3 +0,0 @@
-import * as Module from './module';
-
-Module.initialize()

src/module.js

@@ -1,18 +0,0 @@
-const initialize = () => {
-  let p = document.createElement("p");
-  p.textContent = "Hello Vim Vixen";
-  p.style.position = 'fixed';
-  p.style.right = '0';
-  p.style.bottom = '0';
-  p.style.padding = '0rem .5rem';
-  p.style.margin = '0';
-  p.style.backgroundColor = 'lightgray';
-  p.style.border = 'gray';
-  p.style.boxShadow = '0 0 2px gray inset';
-  p.style.borderRadius = '3px';
-  p.style.fontFamily = 'monospace';
-
-  document.body.append(p)
-}
-
-export { initialize };

webpack.config.js

@@ -5,7 +5,8 @@ const dist = path.resolve(__dirname, 'build');
 
 module.exports = {
   entry: {
-    index: path.join(src, 'index.js')
+    index: path.join(src, 'content'),
+    background: path.join(src, 'background')
   },
 
   output: {