chore(chrome-extension): update example to include content and backgr…

…ound scripts (#1409)

packages/js/examples/chrome-extension/README.md

@@ -17,10 +17,14 @@ The main page is shown by left clicking on the extension. To see the options pag
 
 In the <strong>Extensions</strong> page (`chrome://extensions`), click on the reload (↺) button.
 
-## Report an error
-
-To report an error:
-1. Open `error-reporting.js` and replace `YOUR_API_KEY` with your Honeybadger.js API key.
-2. Make sure to reload the extension (see above).
-3. Open the Options page and click on the Report Error button.
-4. Check your Honeybadger.js dashboard. The error should show up after a few seconds. 
+## Reporting an error
+
+There are multiple ways to report an error, showcasing the different execution contexts in a chrome extension:
+- An error is automatically reported from the background worker (`background.js`) as soon as it's loaded. This is how you know Honeybadger was loaded successfully in the worker.
+- An error is automatically reported from the content script (`content.js`) as soon as it's loaded. This is how you know Honeybadger was loaded successfully in the content script.
+- To report an error from the options page (`options.html` and `options.js`) or the popup (`popup.html` and `popup.js`):
+  1. Open `error-reporting.js` and replace `YOUR_API_KEY` with your Honeybadger.js API key.
+  2. Make sure to reload the extension (see above).
+  3. Open the Options page and click on the Report Error button.
+     Or click on the extension icon to open the popup and click on the Report Error button.
+  4. Check your Honeybadger.js dashboard. The error should show up after a few seconds. 

packages/js/examples/chrome-extension/background.js

@@ -1,6 +1,27 @@
+/* eslint-disable no-undef */
+// background.js
+importScripts(chrome.runtime.getURL('vendor/honeybadger.ext.min.js'));
+importScripts(chrome.runtime.getURL('error-reporting.js'));
+
 let color = '#3aa757';
 
 chrome.runtime.onInstalled.addListener(() => {
-  chrome.storage.sync.set({ color });
-  console.log('Default background color set to %cgreen', `color: ${color}`);
-});
+  // in order to catch errors in listeners, we have to wrap them in a try-catch block
+  try {
+    chrome.storage.sync.set({ color });
+    console.log('Default background color set to %cgreen', `color: ${color}`);
+
+    // You can now use Honeybadger functions here
+    if (typeof globalThis.Honeybadger !== 'undefined') {
+      somethingUndefinedInBackgroundScript(); // This will throw an error
+    }
+    else {
+      console.log('[background.js] Honeybadger is not loaded.');
+    }
+  }
+  catch (error) {
+    if (typeof globalThis.Honeybadger !== 'undefined') {
+      globalThis.Honeybadger.notify(error);
+    }
+  }
+});

packages/js/examples/chrome-extension/button.css

@@ -1,4 +1,5 @@
 button {
+    cursor: pointer;
     height: 30px;
     width: 30px;
     outline: none;
@@ -10,4 +11,4 @@ button {
 button.current {
     box-shadow: 0 0 0 2px white,
     0 0 0 4px black;
-}
+}

packages/js/examples/chrome-extension/content.js

@@ -0,0 +1,8 @@
+console.log('[content.js] Hello from content.js');
+
+if (typeof window.Honeybadger !== 'undefined') {
+  console.log('[content.js] Honeybadger is loaded.');
+}
+
+// eslint-disable-next-line no-undef
+somethingUndefined(); // This will throw an error

packages/js/examples/chrome-extension/error-reporting.js

@@ -1,5 +1,12 @@
-// eslint-disable-next-line no-undef
-Honeybadger.configure({
-  apiKey: 'YOUR_API_KEY',
-  environment: 'production'
-});
+/* eslint-disable no-undef */
+if (typeof globalThis.Honeybadger !== 'undefined') {
+  globalThis.Honeybadger.configure({
+    apiKey: 'API_KEY',
+    environment: 'chrome-extension',
+    debug: true
+  });
+  console.log('[error-reporting.js] Honeybadger is configured.');
+}
+else {
+  console.log('[error-reporting.js] Honeybadger is not loaded.');
+}

packages/js/examples/chrome-extension/manifest.json

@@ -22,5 +22,11 @@
       "48": "/images/get_started48.png",
       "128": "/images/get_started128.png"
     }
-  }
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["vendor/honeybadger.ext.min.js", "error-reporting.js", "content.js"]
+    }
+  ]
 }

packages/js/examples/chrome-extension/popup.html

@@ -7,6 +7,9 @@
 </head>
 <body>
 <button id="changeColor"></button>
+<br/>
+<br/>
+<button id="reportErrorButton" style="width: auto">Report error!</button>
 <script src="popup.js"></script>
 </body>
 </html>

packages/js/examples/chrome-extension/popup.js

@@ -1,5 +1,5 @@
 // Initialize button with user's preferred color
-let changeColor = document.getElementById('changeColor');
+const changeColor = document.getElementById('changeColor');
 
 chrome.storage.sync.get('color', ({ color }) => {
   changeColor.style.backgroundColor = color;
@@ -21,4 +21,11 @@ function setPageBackgroundColor() {
   chrome.storage.sync.get('color', ({ color }) => {
     document.body.style.backgroundColor = color;
   });
-}
+}
+
+// Button to throw an error and have it reported on Honeybadger
+const reportErrorButton = document.getElementById('reportErrorButton');
+reportErrorButton.addEventListener('click', async () => {
+  // eslint-disable-next-line no-undef
+  someUndefinedFunction();
+});

packages/js/examples/chrome-extension/setup.sh

@@ -1,3 +1,3 @@
 #!/bin/bash
 
-curl -o vendor/honeybadger.min.js https://js.honeybadger.io/v6.9/honeybadger.ext.min.js
+curl -o vendor/honeybadger.ext.min.js https://js.honeybadger.io/v6.10/honeybadger.ext.min.js

packages/js/examples/chrome-extension/vendor/.gitignore

@@ -1 +1,2 @@
-honeybadger.min.js
+honeybadger.min.js
+honeybadger.ext.min.js