feat: implement browser API abstraction for compatibility with Chrome

Author: cmuench

.github/copilot-instructions.md

@@ -1,7 +1,7 @@
 # Firefox Extension Project Instructions
 
 ## Overview
-This project is a Firefox extension. The codebase includes manifest files, localized messages, icons, and scripts for the extension's popup and options pages.
+This project is a Chrome and Firefox extension. The codebase includes manifest files, localized messages, icons, and scripts for the extension's popup and options pages.
 
 ## Getting Started
 1. **Clone the repository:**

README.md

@@ -1,6 +1,6 @@
-# muench-dev Webhook Trigger Firefox Extension
+# muench-dev Webhook Trigger Browser Extension
 
-This Firefox extension allows you to manage and trigger webhooks directly from your browser. It is designed for users who want to quickly send HTTP requests (webhooks) to custom endpoints, such as automation services, APIs, or personal scripts.
+This browser extension allows you to manage and trigger webhooks directly from your browser. It works with both Firefox and Chrome. It is designed for users who want to quickly send HTTP requests (webhooks) to custom endpoints, such as automation services, APIs, or personal scripts.
 
 ## Features
 
@@ -13,7 +13,8 @@ This Firefox extension allows you to manage and trigger webhooks directly from y
 ## Getting Started
 
 1. **Install the Extension**
-   - Load the extension in Firefox via `about:debugging` or package and install it from the [Add-ons Manager](about:addons).
+   - **Firefox**: Load the extension in Firefox via `about:debugging` or package and install it from the [Add-ons Manager](about:addons).
+   - **Chrome**: Load the extension in Chrome via `chrome://extensions` in developer mode by clicking "Load unpacked" and selecting the extension directory.
 
 2. **Open the Options Page**
    - Right-click the extension icon and select "Options", or open it from the extension's popup menu.
@@ -41,7 +42,7 @@ This Firefox extension allows you to manage and trigger webhooks directly from y
 
 ![Popup Page Screenshot](./docs/images/popup.png)
 
-1. Click the extension icon in the Firefox toolbar to open the popup.
+1. Click the extension icon in your browser's toolbar to open the popup.
 2. Select the webhook you want to trigger from the list.
 3. Click the "Send" or equivalent button to trigger the webhook.
 
@@ -60,4 +61,3 @@ This Firefox extension allows you to manage and trigger webhooks directly from y
 ## License
 
 This project is licensed under the MIT License.
-

options/options.js

@@ -1,3 +1,8 @@
+// Polyfill for browser API to support Chrome and Firefox
+if (typeof window.browser === "undefined") {
+  window.browser = window.chrome;
+}
+
 // Function to load and display webhooks
 const loadWebhooks = async () => {
   const { webhooks = [] } = await browser.storage.sync.get("webhooks");

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "firefox-extension-webhook-trigger",
+  "name": "browser-extension-webhook-trigger",
   "version": "1.0.0",
-  "description": "This Firefox extension allows you to manage and trigger webhooks directly from your browser. It is designed for users who want to quickly send HTTP requests (webhooks) to custom endpoints, such as automation services, APIs, or personal scripts.",
+  "description": "This browser extension allows you to manage and trigger webhooks directly from your browser. It works with both Firefox and Chrome. It is designed for users who want to quickly send HTTP requests (webhooks) to custom endpoints, such as automation services, APIs, or personal scripts.",
   "main": "index.js",
   "directories": {
     "doc": "docs"

popup/popup.js

@@ -1,3 +1,8 @@
+// Polyfill for browser API to support Chrome and Firefox
+if (typeof window !== "undefined" && typeof window.browser === "undefined") {
+  window.browser = window.chrome;
+}
+
 document.addEventListener("DOMContentLoaded", async () => {
   // Replace i18n placeholders
   replaceI18nPlaceholders();

utils/utils.js

@@ -1,5 +1,10 @@
 // Shared utility functions
 
+// Polyfill for browser API to support Chrome and Firefox
+if (typeof window !== "undefined" && typeof window.browser === "undefined") {
+  window.browser = window.chrome;
+}
+
 /**
  * Replaces i18n placeholders in the HTML document.
  * It targets elements with the 'data-i18n' attribute,