Add background script to notify when URL changes

Author: joshgrib

.gitignore

@@ -1,2 +1,2 @@
 node_modules
-dist/bundle.js
+dist/*.bundle.js

dist/manifest.json

@@ -2,13 +2,19 @@
   "manifest_version": 2,
   "name": "My Cool Extension",
   "version": "0.1",
+  "background": {
+    "scripts": ["background.bundle.js"]
+  },
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
       "js": [
         "jquery-3.4.1.slim.min.js",
-        "bundle.js"
+        "content.bundle.js"
       ]
     }
+  ],
+  "permissions": [
+    "tabs"
   ]
 }

rollup.config.js

@@ -1,9 +1,14 @@
 import json from '@rollup/plugin-json';
 
-export default {
+export default [{
   input: 'src/index.js',
   output: {
-    file: 'dist/bundle.js'
+    file: 'dist/content.bundle.js'
   },
   plugins: [json()]
-};
+}, {
+  input: 'src/background.js',
+  output: {
+    file: 'dist/background.bundle.js'
+  }
+}];

src/background.js

@@ -0,0 +1,10 @@
+import messages from './messages.js';
+
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+  if (changeInfo.url) {
+    chrome.tabs.sendMessage( tabId, {
+      message: messages.URL_CHANGE,
+      url: changeInfo.url
+    });
+  }
+});

src/index.js

@@ -1,13 +1,24 @@
 import plugins from './plugins/index.js';
 import { version } from '../package.json';
+import messages from './messages.js';
 
-const url = document.URL;
-
-for (let plugin of plugins) {
-  if (plugin.runFor(url)) {
-    console.group(`Josh's extension v${version}`);
-    console.log(`Running '${plugin.name}'...`)
-    plugin.run();
-    console.groupEnd(`Josh's extension`);
+const runPlugins = () => {
+  const url = document.URL;
+  for (let plugin of plugins) {
+    if (plugin.runFor(url)) {
+      console.group(`Josh's extension v${version}`);
+      console.log(`Running '${plugin.name}'...`)
+      plugin.run();
+      console.groupEnd(`Josh's extension v${version}`);
+    }
   }
 }
+runPlugins();
+
+chrome.runtime.onMessage.addListener(
+  function(request, sender, sendResponse) {
+    // listen for messages sent from background.js
+    if (request.message === messages.URL_CHANGE) {
+      runPlugins();
+    }
+});

src/messages.js

@@ -0,0 +1,3 @@
+export default {
+    URL_CHANGE: 'url-change'
+};