From 54c1fdb9823058281d14270576401d233c919958 Mon Sep 17 00:00:00 2001 From: Pangratios Cosma Date: Thu, 17 Oct 2024 15:53:46 +0300 Subject: [PATCH] chore(chrome-extension): update example to include content and background scripts (#1409) --- .../js/examples/chrome-extension/README.md | 18 ++++++++----- .../examples/chrome-extension/background.js | 27 ++++++++++++++++--- .../js/examples/chrome-extension/button.css | 3 ++- .../js/examples/chrome-extension/content.js | 8 ++++++ .../chrome-extension/error-reporting.js | 17 ++++++++---- .../examples/chrome-extension/manifest.json | 8 +++++- .../js/examples/chrome-extension/popup.html | 3 +++ .../js/examples/chrome-extension/popup.js | 11 ++++++-- .../js/examples/chrome-extension/setup.sh | 2 +- .../chrome-extension/vendor/.gitignore | 3 ++- 10 files changed, 79 insertions(+), 21 deletions(-) create mode 100644 packages/js/examples/chrome-extension/content.js mode change 100644 => 100755 packages/js/examples/chrome-extension/setup.sh diff --git a/packages/js/examples/chrome-extension/README.md b/packages/js/examples/chrome-extension/README.md index 9620dad8e..1a96b1640 100644 --- a/packages/js/examples/chrome-extension/README.md +++ b/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 Extensions 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. diff --git a/packages/js/examples/chrome-extension/background.js b/packages/js/examples/chrome-extension/background.js index fb11f3521..3d2b40c83 100644 --- a/packages/js/examples/chrome-extension/background.js +++ b/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}`); -}); \ No newline at end of file + // 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); + } + } +}); diff --git a/packages/js/examples/chrome-extension/button.css b/packages/js/examples/chrome-extension/button.css index b477d83ea..3ff2f74f3 100644 --- a/packages/js/examples/chrome-extension/button.css +++ b/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; -} \ No newline at end of file +} diff --git a/packages/js/examples/chrome-extension/content.js b/packages/js/examples/chrome-extension/content.js new file mode 100644 index 000000000..98ef3ea3c --- /dev/null +++ b/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 diff --git a/packages/js/examples/chrome-extension/error-reporting.js b/packages/js/examples/chrome-extension/error-reporting.js index 95a46666f..64bb6a5e1 100644 --- a/packages/js/examples/chrome-extension/error-reporting.js +++ b/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.'); +} diff --git a/packages/js/examples/chrome-extension/manifest.json b/packages/js/examples/chrome-extension/manifest.json index 0515ebd89..0e0fbac22 100644 --- a/packages/js/examples/chrome-extension/manifest.json +++ b/packages/js/examples/chrome-extension/manifest.json @@ -22,5 +22,11 @@ "48": "/images/get_started48.png", "128": "/images/get_started128.png" } - } + }, + "content_scripts": [ + { + "matches": [""], + "js": ["vendor/honeybadger.ext.min.js", "error-reporting.js", "content.js"] + } + ] } diff --git a/packages/js/examples/chrome-extension/popup.html b/packages/js/examples/chrome-extension/popup.html index 12f667035..b25639ac9 100644 --- a/packages/js/examples/chrome-extension/popup.html +++ b/packages/js/examples/chrome-extension/popup.html @@ -7,6 +7,9 @@ +
+
+ diff --git a/packages/js/examples/chrome-extension/popup.js b/packages/js/examples/chrome-extension/popup.js index 88ac74978..273a7832c 100644 --- a/packages/js/examples/chrome-extension/popup.js +++ b/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; }); -} \ No newline at end of file +} + +// 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(); +}); diff --git a/packages/js/examples/chrome-extension/setup.sh b/packages/js/examples/chrome-extension/setup.sh old mode 100644 new mode 100755 index 2c6efb4db..fc4d0cb25 --- a/packages/js/examples/chrome-extension/setup.sh +++ b/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 diff --git a/packages/js/examples/chrome-extension/vendor/.gitignore b/packages/js/examples/chrome-extension/vendor/.gitignore index 760e1a9ba..97d4a33b8 100644 --- a/packages/js/examples/chrome-extension/vendor/.gitignore +++ b/packages/js/examples/chrome-extension/vendor/.gitignore @@ -1 +1,2 @@ -honeybadger.min.js \ No newline at end of file +honeybadger.min.js +honeybadger.ext.min.js