1.0.3

NomadicDaddy · NomadicDaddy · commit 555866c098de · 2024-10-02T19:03:39.000-05:00
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -4,14 +4,14 @@ about: Create a report to help us improve
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+-   OS: [e.g. iOS]
+-   Browser [e.g. chrome, safari]
+-   Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+-   Device: [e.g. iPhone6]
+-   OS: [e.g. iOS8.1]
+-   Browser [e.g. stock browser, safari]
+-   Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -4,7 +4,6 @@ about: Suggest an idea for this project
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **Is your feature request related to a problem? Please describe.**
diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
-# htmx-debugger v1.0.0 - 2024-09-30
+# htmx-debugger v1.0.3 - 2024-10-02
 
 ## Overview
 
-htmx-debugger is a powerful Chrome extension designed to help developers debug and analyze htmx applications. It provides a comprehensive and user-friendly interface for viewing htmx events, requests, and responses in real-time. This tool is essential for understanding and troubleshooting htmx-powered web applications, making the development process smoother and more efficient.
+htmx-debugger is a powerful browser extension (compatible with Chrome and Firefox) designed to help developers debug and analyze htmx applications. It provides a comprehensive and user-friendly interface for viewing htmx events, requests, and responses in real-time. This tool is essential for understanding and troubleshooting htmx-powered web applications, making the development process smoother and more efficient.
 
 ![htmx-debugger panel with events](htmx-panel-with-events.jpg)
 
@@ -26,20 +26,27 @@ htmx-debugger is a powerful Chrome extension designed to help developers debug a
 
 ## Installation
 
-### Chrome Web Store (Recommended)
+### Chrome Web Store (Recommended - ONCE PUBLISHED, STILL TBD A/O 2024-10-02)
 
-1. Visit the [htmx-debugger page](https://chrome.google.com/webstore/detail/htmx-debugger/[extension-id]) on the Chrome Web Store.
+1. Visit the [htmx-debugger page](https://chrome.google.com/webstore/detail/htmx-debugger/kjafpfamndifhkidbjebdnfjiebgdckf) on the Chrome Web Store.
 2. Click the "Add to Chrome" button.
 3. Confirm the installation when prompted.
 
-### Manual Installation (For developers)
+### Manual Chrome Installation
 
 1. Clone this repository or download the source code.
 2. Open Google Chrome and navigate to `chrome://extensions/`.
 3. Enable "Developer mode" by toggling the switch in the top right corner.
 4. Click on "Load unpacked" and select the directory containing the extension files.
 5. The htmx-debugger extension should now appear in your list of installed extensions.
 
+### Manual Firefox Installation
+
+1. Download the latest release file for Firefox browsers.
+2. Open Firefox and navigate to `about:debugging#/runtime/this-firefox`.
+3. Click on "Load Temporary Add-on..." and select the downloaded release file.
+4. The htmx-debugger extension should now appear in your list of installed extensions.
+
 ## Usage
 
 ### Opening the Debugger
@@ -124,6 +131,8 @@ By using htmx-debugger, users can be assured that their privacy is respected and
 
 ## Version History
 
+-   v1.0.3 (2024-10-02): Minor update and new Firefox release
+    -   Fixed sanitization issue recommended by Firefox
 -   v1.0.0 (2024-09-30): Initial release
     -   core features implemented
     -   Chrome Web Store release
diff --git a/manifest-firefox.json b/manifest-firefox.json
@@ -0,0 +1,42 @@
+{
+	"manifest_version": 2,
+	"name": "htmx-debugger",
+	"version": "1.0.3",
+	"description": "htmx-debugger - a debugging tool for htmx applications",
+	"permissions": ["tabs", "activeTab", "storage", "alarms", "<all_urls>"],
+	"background": {
+		"scripts": ["background.js"],
+		"type": "module"
+	},
+	"content_scripts": [
+		{
+			"matches": ["<all_urls>"],
+			"js": ["content.js"],
+			"run_at": "document_idle"
+		}
+	],
+	"browser_action": {
+		"default_icon": {
+			"16": "htmx-debugger-logo-16.png",
+			"32": "htmx-debugger-logo-32.png",
+			"48": "htmx-debugger-logo-48.png",
+			"128": "htmx-debugger-logo-128.png"
+		},
+		"default_title": "htmx-debugger"
+	},
+	"devtools_page": "devtools.html",
+	"web_accessible_resources": ["content.js"],
+	"icons": {
+		"16": "htmx-debugger-logo-16.png",
+		"32": "htmx-debugger-logo-32.png",
+		"48": "htmx-debugger-logo-48.png",
+		"128": "htmx-debugger-logo-128.png"
+	},
+	"content_security_policy": "script-src 'self'; object-src 'self';",
+	"browser_specific_settings": {
+		"gecko": {
+			"id": "htmx-debugger@beazley.org",
+			"strict_min_version": "112.0"
+		}
+	}
+}
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
 	"manifest_version": 3,
 	"name": "htmx-debugger",
-	"version": "1.0.0",
+	"version": "1.0.3",
 	"description": "htmx-debugger - a debugging tool for htmx applications",
 	"permissions": ["activeTab", "scripting", "storage", "alarms"],
 	"host_permissions": ["https://*/", "http://*/"],
@@ -28,7 +28,7 @@
 	"devtools_page": "devtools.html",
 	"web_accessible_resources": [
 		{
-			"resources": ["content.js"],
+			"resources": ["content.js", "panel.js"],
 			"matches": ["<all_urls>"]
 		}
 	],
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "htmx-debugger",
-	"version": "1.0.0",
+	"version": "1.0.3",
 	"description": "htmx-debugger - a debugging tool for htmx applications",
 	"author": "Phillip Beazley <phillip@beazley.org>",
 	"license": "MIT",
@@ -20,7 +20,7 @@
 	"devDependencies": {
 		"@eslint/js": "^9.11.1",
 		"eslint": "^9.11.1",
-		"globals": "^15.9.0",
+		"globals": "^15.10.0",
 		"prettier": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.8",
 		"tailwindcss": "^3.4.13"
diff --git a/panel.js b/panel.js
@@ -105,31 +105,45 @@ function createEventElement(eventData) {
 
 	if (eventData.target) {
 		const targetInfo = document.createElement('div');
-		targetInfo.innerHTML = `
-			<h5 class="font-bold mt-2">Target Element:</h5>
-			<p>Tag: ${eventData.target.tagName || 'N/A'}</p>
-			<p>ID: ${eventData.target.id || 'N/A'}</p>
-			<p>Class: ${eventData.target.className || 'N/A'}</p>
-		`;
-
-		// Explicitly handle HX attributes
+
+		const targetHeader = document.createElement('h5');
+		targetHeader.className = 'font-bold mt-2';
+		targetHeader.textContent = 'Target Element:';
+		targetInfo.appendChild(targetHeader);
+
+		const tagP = document.createElement('p');
+		tagP.textContent = `Tag: ${eventData.target.tagName || 'N/A'}`;
+		targetInfo.appendChild(tagP);
+
+		const idP = document.createElement('p');
+		idP.textContent = `ID: ${eventData.target.id || 'N/A'}`;
+		targetInfo.appendChild(idP);
+
+		const classP = document.createElement('p');
+		classP.textContent = `Class: ${eventData.target.className || 'N/A'}`;
+		targetInfo.appendChild(classP);
+
+		// Handle HX Attributes
 		if (eventData.target.hxAttributes && eventData.target.hxAttributes.length > 0) {
-			const hxAttributesHeader = document.createElement('h5');
-			hxAttributesHeader.textContent = 'HX Attributes:';
-			hxAttributesHeader.className = 'font-bold mt-2 text-blue-600';
-			targetInfo.appendChild(hxAttributesHeader);
+			const hxHeader = document.createElement('h5');
+			hxHeader.className = 'font-bold mt-2 text-blue-600';
+			hxHeader.textContent = 'HX Attributes:';
+			targetInfo.appendChild(hxHeader);
 
-			const hxAttributesList = document.createElement('ul');
-			hxAttributesList.className = 'list-disc pl-5';
+			const hxList = document.createElement('ul');
+			hxList.className = 'list-disc pl-5';
 			eventData.target.hxAttributes.forEach((attr) => {
 				const li = document.createElement('li');
 				li.textContent = `${attr.name}: ${attr.value}`;
 				li.className = 'text-blue-600';
-				hxAttributesList.appendChild(li);
+				hxList.appendChild(li);
 			});
-			targetInfo.appendChild(hxAttributesList);
+			targetInfo.appendChild(hxList);
 		} else {
-			targetInfo.innerHTML += '<p class="text-gray-500">No HX attributes found.</p>';
+			const noHx = document.createElement('p');
+			noHx.className = 'text-gray-500';
+			noHx.textContent = 'No HX attributes found.';
+			targetInfo.appendChild(noHx);
 		}
 
 		eventContent.appendChild(targetInfo);

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"manifest_version": 3,`
`3`	`3`	`"name": "htmx-debugger",`
`4`		`- "version": "1.0.0",`
	`4`	`+ "version": "1.0.3",`
`5`	`5`	`"description": "htmx-debugger - a debugging tool for htmx applications",`
`6`	`6`	`"permissions": ["activeTab", "scripting", "storage", "alarms"],`
`7`	`7`	`"host_permissions": ["https:///", "http:///"],`
`@@ -28,7 +28,7 @@`
`28`	`28`	`"devtools_page": "devtools.html",`
`29`	`29`	`"web_accessible_resources": [`
`30`	`30`	`{`
`31`		`- "resources": ["content.js"],`
	`31`	`+ "resources": ["content.js", "panel.js"],`
`32`	`32`	`"matches": ["<all_urls>"]`
`33`	`33`	`}`
`34`	`34`	`],`