Fix all innerHTML calls

dist/birb.js

@@ -1352,8 +1352,8 @@
 	padding-left: 10px;
 	padding-right: 10px;
 	box-sizing: border-box;
-	justify-content: start;
-	align-items: start;
+	justify-content: center;
+	align-items: center;
 }
 
 .birb-grid-item {
@@ -1398,6 +1398,7 @@
 
 .birb-field-guide-description {
 	width: calc(100% - 20px);
+	margin-left: 10px;
 	margin-top: 5px;
 	padding: 8px;
 	padding-top: 4px;
@@ -1414,11 +1415,9 @@
 
 .birb-message-content {
 	box-sizing: border-box;
+	margin: 2px;
 	width: 100%;
-	margin-top: 10px;
-	padding: 8px;
-	padding-top: 4px;
-	padding-bottom: 4px;
+	padding: 10px;
 	font-size: 14px;
 	color: rgb(124, 108, 75);
 }
@@ -1596,10 +1595,17 @@
 			new MenuItem("Toggle Birb Mode", () => {
 				userSettings.birbMode = !userSettings.birbMode;
 				save();
-				insertModal(`${birdBirb()} Mode`, `Your ${birdBirb().toLowerCase()} shall now be referred to as "${birdBirb()}"${userSettings.birbMode ? "\n\nWelcome back to 2012" : ""}`);
+				const message = makeElement("birb-message-content");
+				message.appendChild(document.createTextNode(`Your ${birdBirb().toLowerCase()} shall now be referred to as "${birdBirb()}"`));
+				if (userSettings.birbMode) {
+					message.appendChild(document.createElement("br"));
+					message.appendChild(document.createElement("br"));
+					message.appendChild(document.createTextNode("Welcome back to 2012"));
+				}
+				insertModal(`${birdBirb()} Mode`, message);
 			}),
 			new Separator(),
-			new MenuItem("2025.10.26.500", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.10.26.500"); }, false),
+			new MenuItem("2025.10.26.536", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.10.26.536"); }, false),
 		];
 
 		const styleElement = document.createElement("style");
@@ -1933,31 +1939,34 @@
 		 * Create a window element with header and content
 		 * @param {string} id
 		 * @param {string} title
-		 * @param {string} contentHtml
+		 * @param {HTMLElement} contentElement
 		 * @param {() => void} [onClose]
 		 * @returns {HTMLElement}
 		 */
-		function createWindow(id, title, contentHtml, onClose) {
+		function createWindow(id, title, contentElement, onClose) {
 			const window = makeElement("birb-window", undefined, id);
-			window.innerHTML = `
-			<div class="birb-window-header">
-				<div class="birb-window-title">${title}</div>
-				<div class="birb-window-close">x</div>
-			</div>
-			<div class="birb-window-content">
-				${contentHtml}
-			</div>
-		`;
+			
+			const header = makeElement("birb-window-header");
+			const titleElement = makeElement("birb-window-title");
+			titleElement.textContent = title;
+			const closeButton = makeElement("birb-window-close");
+			closeButton.textContent = "x";
+			
+			header.appendChild(titleElement);
+			header.appendChild(closeButton);
+			
+			const contentWrapper = makeElement("birb-window-content");
+			contentWrapper.appendChild(contentElement);
+			
+			window.appendChild(header);
+			window.appendChild(contentWrapper);
 
 			document.body.appendChild(window);
-			makeDraggable(window.querySelector(".birb-window-header"));
+			makeDraggable(header);
 
-			const closeButton = window.querySelector(".birb-window-close");
-			if (closeButton) {
-				makeClosable(() => {
-					window.remove();
-				}, closeButton);
-			}
+			makeClosable(() => {
+				window.remove();
+			}, closeButton);
 
 			return window;
 		}
@@ -2017,7 +2026,13 @@
 		function unlockBird(birdType) {
 			if (!unlockedSpecies.includes(birdType)) {
 				unlockedSpecies.push(birdType);
-				insertModal("New Bird Unlocked!", `You've found a <b>${SPECIES[birdType].name}</b> feather! Use the Field Guide to switch your bird's species.`);
+				const message = makeElement("birb-message-content");
+				message.appendChild(document.createTextNode("You've found a "));
+				const bold = document.createElement("b");
+				bold.textContent = SPECIES[birdType].name;
+				message.appendChild(bold);
+				message.appendChild(document.createTextNode(" feather! Use the Field Guide to switch your bird's species."));
+				insertModal("New Bird Unlocked!", message);
 			}
 			save();
 		}
@@ -2044,18 +2059,14 @@
 
 		/**
 		 * @param {string} title
-		 * @param {string} message
+		 * @param {HTMLElement} content
 		 */
-		function insertModal(title, message) {
+		function insertModal(title, content) {
 			if (document.querySelector("#" + FIELD_GUIDE_ID)) {
 				return;
 			}
 
-			const modal = createWindow("birb-modal", title, `
-			<div class="birb-message-content">
-				${message}
-			</div>
-		`);
+			const modal = createWindow("birb-modal", title, content);
 
 			modal.style.width = "270px";
 			centerElement(modal);
@@ -2090,30 +2101,39 @@
 				return;
 			}
 
+			const contentContainer = document.createElement("div");
+			const content = makeElement("birb-grid-content");
+			const description = makeElement("birb-field-guide-description");
+			contentContainer.appendChild(content);
+			contentContainer.appendChild(description);
+
 			const fieldGuide = createWindow(
 				FIELD_GUIDE_ID,
 				"Field Guide",
-				`<div class="birb-grid-content"></div>
-			<div class="birb-field-guide-description"></div>`
+				contentContainer
 			);
 
-			const content = fieldGuide.querySelector(".birb-grid-content");
-			if (!content) {
-				return;
-			}
-			content.innerHTML = "";
-
 			const generateDescription = (/** @type {string} */ speciesId) => {
 				const type = SPECIES[speciesId];
 				const unlocked = unlockedSpecies.includes(speciesId);
-				return "<b>" + type.name + "</b><div style='height: 0.3em'></div>" + (!unlocked ? "Not yet unlocked" : type.description);
+				
+				const boldName = document.createElement("b");
+				boldName.textContent = type.name;
+				
+				const spacer = document.createElement("div");
+				spacer.style.height = "0.3em";
+				
+				const descText = document.createTextNode(!unlocked ? "Not yet unlocked" : type.description);
+				
+				const fragment = document.createDocumentFragment();
+				fragment.appendChild(boldName);
+				fragment.appendChild(spacer);
+				fragment.appendChild(descText);
+				
+				return fragment;
 			};
 
-			const description = fieldGuide.querySelector(".birb-field-guide-description");
-			if (!description) {
-				return;
-			}
-			description.innerHTML = generateDescription(currentSpecies);
+			description.appendChild(generateDescription(currentSpecies));
 			for (const [id, type] of Object.entries(SPECIES)) {
 				const unlocked = unlockedSpecies.includes(id);
 				const speciesElement = makeElement("birb-grid-item");
@@ -2142,10 +2162,12 @@
 					speciesElement.classList.add("birb-grid-item-locked");
 				}
 				speciesElement.addEventListener("mouseover", () => {
-					description.innerHTML = generateDescription(id);
+					description.textContent = "";
+					description.appendChild(generateDescription(id));
 				});
 				speciesElement.addEventListener("mouseout", () => {
-					description.innerHTML = generateDescription(currentSpecies);
+					description.textContent = "";
+					description.appendChild(generateDescription(currentSpecies));
 				});
 			}
 			centerElement(fieldGuide);

dist/birb.user.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         Pocket Bird
 // @namespace    https://idreesinc.com
-// @version      2025.10.26.500
+// @version      2025.10.26.536
 // @description  birb
 // @author       Idrees
 // @downloadURL  https://github.com/IdreesInc/Pocket-Bird/raw/refs/heads/main/dist/birb.user.js
@@ -1366,8 +1366,8 @@
 	padding-left: 10px;
 	padding-right: 10px;
 	box-sizing: border-box;
-	justify-content: start;
-	align-items: start;
+	justify-content: center;
+	align-items: center;
 }
 
 .birb-grid-item {
@@ -1412,6 +1412,7 @@
 
 .birb-field-guide-description {
 	width: calc(100% - 20px);
+	margin-left: 10px;
 	margin-top: 5px;
 	padding: 8px;
 	padding-top: 4px;
@@ -1428,11 +1429,9 @@
 
 .birb-message-content {
 	box-sizing: border-box;
+	margin: 2px;
 	width: 100%;
-	margin-top: 10px;
-	padding: 8px;
-	padding-top: 4px;
-	padding-bottom: 4px;
+	padding: 10px;
 	font-size: 14px;
 	color: rgb(124, 108, 75);
 }
@@ -1610,10 +1609,17 @@
 			new MenuItem("Toggle Birb Mode", () => {
 				userSettings.birbMode = !userSettings.birbMode;
 				save();
-				insertModal(`${birdBirb()} Mode`, `Your ${birdBirb().toLowerCase()} shall now be referred to as "${birdBirb()}"${userSettings.birbMode ? "\n\nWelcome back to 2012" : ""}`);
+				const message = makeElement("birb-message-content");
+				message.appendChild(document.createTextNode(`Your ${birdBirb().toLowerCase()} shall now be referred to as "${birdBirb()}"`));
+				if (userSettings.birbMode) {
+					message.appendChild(document.createElement("br"));
+					message.appendChild(document.createElement("br"));
+					message.appendChild(document.createTextNode("Welcome back to 2012"));
+				}
+				insertModal(`${birdBirb()} Mode`, message);
 			}),
 			new Separator(),
-			new MenuItem("2025.10.26.500", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.10.26.500"); }, false),
+			new MenuItem("2025.10.26.536", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.10.26.536"); }, false),
 		];
 
 		const styleElement = document.createElement("style");
@@ -1947,31 +1953,34 @@
 		 * Create a window element with header and content
 		 * @param {string} id
 		 * @param {string} title
-		 * @param {string} contentHtml
+		 * @param {HTMLElement} contentElement
 		 * @param {() => void} [onClose]
 		 * @returns {HTMLElement}
 		 */
-		function createWindow(id, title, contentHtml, onClose) {
+		function createWindow(id, title, contentElement, onClose) {
 			const window = makeElement("birb-window", undefined, id);
-			window.innerHTML = `
-			<div class="birb-window-header">
-				<div class="birb-window-title">${title}</div>
-				<div class="birb-window-close">x</div>
-			</div>
-			<div class="birb-window-content">
-				${contentHtml}
-			</div>
-		`;
+			
+			const header = makeElement("birb-window-header");
+			const titleElement = makeElement("birb-window-title");
+			titleElement.textContent = title;
+			const closeButton = makeElement("birb-window-close");
+			closeButton.textContent = "x";
+			
+			header.appendChild(titleElement);
+			header.appendChild(closeButton);
+			
+			const contentWrapper = makeElement("birb-window-content");
+			contentWrapper.appendChild(contentElement);
+			
+			window.appendChild(header);
+			window.appendChild(contentWrapper);
 
 			document.body.appendChild(window);
-			makeDraggable(window.querySelector(".birb-window-header"));
+			makeDraggable(header);
 
-			const closeButton = window.querySelector(".birb-window-close");
-			if (closeButton) {
-				makeClosable(() => {
-					window.remove();
-				}, closeButton);
-			}
+			makeClosable(() => {
+				window.remove();
+			}, closeButton);
 
 			return window;
 		}
@@ -2031,7 +2040,13 @@
 		function unlockBird(birdType) {
 			if (!unlockedSpecies.includes(birdType)) {
 				unlockedSpecies.push(birdType);
-				insertModal("New Bird Unlocked!", `You've found a <b>${SPECIES[birdType].name}</b> feather! Use the Field Guide to switch your bird's species.`);
+				const message = makeElement("birb-message-content");
+				message.appendChild(document.createTextNode("You've found a "));
+				const bold = document.createElement("b");
+				bold.textContent = SPECIES[birdType].name;
+				message.appendChild(bold);
+				message.appendChild(document.createTextNode(" feather! Use the Field Guide to switch your bird's species."));
+				insertModal("New Bird Unlocked!", message);
 			}
 			save();
 		}
@@ -2058,18 +2073,14 @@
 
 		/**
 		 * @param {string} title
-		 * @param {string} message
+		 * @param {HTMLElement} content
 		 */
-		function insertModal(title, message) {
+		function insertModal(title, content) {
 			if (document.querySelector("#" + FIELD_GUIDE_ID)) {
 				return;
 			}
 
-			const modal = createWindow("birb-modal", title, `
-			<div class="birb-message-content">
-				${message}
-			</div>
-		`);
+			const modal = createWindow("birb-modal", title, content);
 
 			modal.style.width = "270px";
 			centerElement(modal);
@@ -2104,30 +2115,39 @@
 				return;
 			}
 
+			const contentContainer = document.createElement("div");
+			const content = makeElement("birb-grid-content");
+			const description = makeElement("birb-field-guide-description");
+			contentContainer.appendChild(content);
+			contentContainer.appendChild(description);
+
 			const fieldGuide = createWindow(
 				FIELD_GUIDE_ID,
 				"Field Guide",
-				`<div class="birb-grid-content"></div>
-			<div class="birb-field-guide-description"></div>`
+				contentContainer
 			);
 
-			const content = fieldGuide.querySelector(".birb-grid-content");
-			if (!content) {
-				return;
-			}
-			content.innerHTML = "";
-
 			const generateDescription = (/** @type {string} */ speciesId) => {
 				const type = SPECIES[speciesId];
 				const unlocked = unlockedSpecies.includes(speciesId);
-				return "<b>" + type.name + "</b><div style='height: 0.3em'></div>" + (!unlocked ? "Not yet unlocked" : type.description);
+				
+				const boldName = document.createElement("b");
+				boldName.textContent = type.name;
+				
+				const spacer = document.createElement("div");
+				spacer.style.height = "0.3em";
+				
+				const descText = document.createTextNode(!unlocked ? "Not yet unlocked" : type.description);
+				
+				const fragment = document.createDocumentFragment();
+				fragment.appendChild(boldName);
+				fragment.appendChild(spacer);
+				fragment.appendChild(descText);
+				
+				return fragment;
 			};
 
-			const description = fieldGuide.querySelector(".birb-field-guide-description");
-			if (!description) {
-				return;
-			}
-			description.innerHTML = generateDescription(currentSpecies);
+			description.appendChild(generateDescription(currentSpecies));
 			for (const [id, type] of Object.entries(SPECIES)) {
 				const unlocked = unlockedSpecies.includes(id);
 				const speciesElement = makeElement("birb-grid-item");
@@ -2156,10 +2176,12 @@
 					speciesElement.classList.add("birb-grid-item-locked");
 				}
 				speciesElement.addEventListener("mouseover", () => {
-					description.innerHTML = generateDescription(id);
+					description.textContent = "";
+					description.appendChild(generateDescription(id));
 				});
 				speciesElement.addEventListener("mouseout", () => {
-					description.innerHTML = generateDescription(currentSpecies);
+					description.textContent = "";
+					description.appendChild(generateDescription(currentSpecies));
 				});
 			}
 			centerElement(fieldGuide);

manifest.json

@@ -2,7 +2,7 @@
     "manifest_version": 3,
     "name": "Pocket Bird",
     "description": "It's a bird, in your browser. What more could you want?",
-    "version": "2025.10.26.500",
+    "version": "2025.10.26.536",
     "homepage_url": "https://idreesinc.com",
     "content_scripts": [
         {

src/application.js

@@ -215,7 +215,14 @@ Promise.all([
 		new MenuItem("Toggle Birb Mode", () => {
 			userSettings.birbMode = !userSettings.birbMode;
 			save();
-			insertModal(`${birdBirb()} Mode`, `Your ${birdBirb().toLowerCase()} shall now be referred to as "${birdBirb()}"${userSettings.birbMode ? "\n\nWelcome back to 2012" : ""}`);
+			const message = makeElement("birb-message-content");
+			message.appendChild(document.createTextNode(`Your ${birdBirb().toLowerCase()} shall now be referred to as "${birdBirb()}"`));
+			if (userSettings.birbMode) {
+				message.appendChild(document.createElement("br"));
+				message.appendChild(document.createElement("br"));
+				message.appendChild(document.createTextNode("Welcome back to 2012"));
+			}
+			insertModal(`${birdBirb()} Mode`, message);
 		}),
 		new Separator(),
 		new MenuItem("__VERSION__", () => { alert("Thank you for using Pocket Bird! You are on version: __VERSION__") }, false),
@@ -552,34 +559,37 @@ Promise.all([
 	 * Create a window element with header and content
 	 * @param {string} id
 	 * @param {string} title
-	 * @param {string} contentHtml
+	 * @param {HTMLElement} contentElement
 	 * @param {() => void} [onClose]
 	 * @returns {HTMLElement}
 	 */
-	function createWindow(id, title, contentHtml, onClose) {
+	function createWindow(id, title, contentElement, onClose) {
 		const window = makeElement("birb-window", undefined, id);
-		window.innerHTML = `
-			<div class="birb-window-header">
-				<div class="birb-window-title">${title}</div>
-				<div class="birb-window-close">x</div>
-			</div>
-			<div class="birb-window-content">
-				${contentHtml}
-			</div>
-		`;
+		
+		const header = makeElement("birb-window-header");
+		const titleElement = makeElement("birb-window-title");
+		titleElement.textContent = title;
+		const closeButton = makeElement("birb-window-close");
+		closeButton.textContent = "x";
+		
+		header.appendChild(titleElement);
+		header.appendChild(closeButton);
+		
+		const contentWrapper = makeElement("birb-window-content");
+		contentWrapper.appendChild(contentElement);
+		
+		window.appendChild(header);
+		window.appendChild(contentWrapper);
 
 		document.body.appendChild(window);
-		makeDraggable(window.querySelector(".birb-window-header"));
+		makeDraggable(header);
 
-		const closeButton = window.querySelector(".birb-window-close");
-		if (closeButton) {
-			makeClosable(() => {
-				if (onClose) {
-					onClose();
-				}
-				window.remove();
-			}, closeButton);
-		}
+		makeClosable(() => {
+			if (onClose) {
+				onClose();
+			}
+			window.remove();
+		}, closeButton);
 
 		return window;
 	}
@@ -639,7 +649,13 @@ Promise.all([
 	function unlockBird(birdType) {
 		if (!unlockedSpecies.includes(birdType)) {
 			unlockedSpecies.push(birdType);
-			insertModal("New Bird Unlocked!", `You've found a <b>${SPECIES[birdType].name}</b> feather! Use the Field Guide to switch your bird's species.`);
+			const message = makeElement("birb-message-content");
+			message.appendChild(document.createTextNode("You've found a "));
+			const bold = document.createElement("b");
+			bold.textContent = SPECIES[birdType].name;
+			message.appendChild(bold);
+			message.appendChild(document.createTextNode(" feather! Use the Field Guide to switch your bird's species."));
+			insertModal("New Bird Unlocked!", message);
 		}
 		save();
 	}
@@ -666,18 +682,14 @@ Promise.all([
 
 	/**
 	 * @param {string} title
-	 * @param {string} message
+	 * @param {HTMLElement} content
 	 */
-	function insertModal(title, message) {
+	function insertModal(title, content) {
 		if (document.querySelector("#" + FIELD_GUIDE_ID)) {
 			return;
 		}
 
-		const modal = createWindow("birb-modal", title, `
-			<div class="birb-message-content">
-				${message}
-			</div>
-		`);
+		const modal = createWindow("birb-modal", title, content);
 
 		modal.style.width = "270px";
 		centerElement(modal);
@@ -713,30 +725,39 @@ Promise.all([
 			return;
 		}
 
+		const contentContainer = document.createElement("div");
+		const content = makeElement("birb-grid-content");
+		const description = makeElement("birb-field-guide-description");
+		contentContainer.appendChild(content);
+		contentContainer.appendChild(description);
+
 		const fieldGuide = createWindow(
 			FIELD_GUIDE_ID,
 			"Field Guide",
-			`<div class="birb-grid-content"></div>
-			<div class="birb-field-guide-description"></div>`
-		)
-
-		const content = fieldGuide.querySelector(".birb-grid-content");
-		if (!content) {
-			return;
-		}
-		content.innerHTML = "";
+			contentContainer
+		);
 
 		const generateDescription = (/** @type {string} */ speciesId) => {
 			const type = SPECIES[speciesId];
 			const unlocked = unlockedSpecies.includes(speciesId);
-			return "<b>" + type.name + "</b><div style='height: 0.3em'></div>" + (!unlocked ? "Not yet unlocked" : type.description);
+			
+			const boldName = document.createElement("b");
+			boldName.textContent = type.name;
+			
+			const spacer = document.createElement("div");
+			spacer.style.height = "0.3em";
+			
+			const descText = document.createTextNode(!unlocked ? "Not yet unlocked" : type.description);
+			
+			const fragment = document.createDocumentFragment();
+			fragment.appendChild(boldName);
+			fragment.appendChild(spacer);
+			fragment.appendChild(descText);
+			
+			return fragment;
 		};
 
-		const description = fieldGuide.querySelector(".birb-field-guide-description");
-		if (!description) {
-			return;
-		}
-		description.innerHTML = generateDescription(currentSpecies);
+		description.appendChild(generateDescription(currentSpecies));
 		for (const [id, type] of Object.entries(SPECIES)) {
 			const unlocked = unlockedSpecies.includes(id);
 			const speciesElement = makeElement("birb-grid-item");
@@ -765,10 +786,12 @@ Promise.all([
 				speciesElement.classList.add("birb-grid-item-locked");
 			}
 			speciesElement.addEventListener("mouseover", () => {
-				description.innerHTML = generateDescription(id);
+				description.textContent = "";
+				description.appendChild(generateDescription(id));
 			});
 			speciesElement.addEventListener("mouseout", () => {
-				description.innerHTML = generateDescription(currentSpecies);
+				description.textContent = "";
+				description.appendChild(generateDescription(currentSpecies));
 			});
 		}
 		centerElement(fieldGuide);

src/stylesheet.css

@@ -243,8 +243,8 @@
 	padding-left: 10px;
 	padding-right: 10px;
 	box-sizing: border-box;
-	justify-content: start;
-	align-items: start;
+	justify-content: center;
+	align-items: center;
 }
 
 .birb-grid-item {
@@ -289,6 +289,7 @@
 
 .birb-field-guide-description {
 	width: calc(100% - 20px);
+	margin-left: 10px;
 	margin-top: 5px;
 	padding: 8px;
 	padding-top: 4px;
@@ -305,11 +306,9 @@
 
 .birb-message-content {
 	box-sizing: border-box;
+	margin: 2px;
 	width: 100%;
-	margin-top: 10px;
-	padding: 8px;
-	padding-top: 4px;
-	padding-bottom: 4px;
+	padding: 10px;
 	font-size: 14px;
 	color: rgb(124, 108, 75);
 }