Move sticky note element to context

dist/birb.js

@@ -900,6 +900,14 @@
 			return window.location.href;
 		}
 
+		/**
+		 * @returns {HTMLElement} The current active page element where sticky notes can be applied
+		 */
+		getActivePage() {
+			// Default to root element
+			return document.documentElement;
+		}
+
 		/**
 		 * Checks if a path is applicable given the context
 		 * @param {string} path Can be a site URL or another context-specific path
@@ -1173,11 +1181,12 @@
 
 	/**
 	 * @param {StickyNote} stickyNote
+	 * @param {HTMLElement} page
 	 * @param {() => void} onSave
 	 * @param {() => void} onDelete
 	 * @returns {HTMLElement}
 	 */
-	function renderStickyNote(stickyNote, onSave, onDelete) {
+	function renderStickyNote(stickyNote, page, onSave, onDelete) {
 		const noteElement = makeElement("birb-window");
 		noteElement.classList.add("birb-sticky-note");
 		
@@ -1202,7 +1211,7 @@
 
 		noteElement.style.top = `${stickyNote.top}px`;
 		noteElement.style.left = `${stickyNote.left}px`;
-		document.body.appendChild(noteElement);
+		page.appendChild(noteElement);
 
 		makeDraggable(header, true, (top, left) => {
 			stickyNote.top = top;
@@ -1253,10 +1262,11 @@
 		const existingNotes = document.querySelectorAll(".birb-sticky-note");
 		existingNotes.forEach(note => note.remove());
 		// Render all sticky notes
+		const pageElement = getContext().getActivePage();
 		const context = getContext();
 		for (let stickyNote of stickyNotes) {
 			if (context.isPathApplicable(stickyNote.site)) {
-				renderStickyNote(stickyNote, onSave, () => onDelete(stickyNote));
+				renderStickyNote(stickyNote, pageElement, onSave, () => onDelete(stickyNote));
 			}
 		}
 	}
@@ -1270,9 +1280,10 @@
 		const id = Date.now().toString();
 		const site = getContext().getPath();
 		const stickyNote = new StickyNote(id, site, "");
-		const element = renderStickyNote(stickyNote, onSave, () => onDelete(stickyNote));
+		const page = getContext().getActivePage();
-		element.style.left = `${window.innerWidth / 2 - element.offsetWidth / 2}px`;
+		const element = renderStickyNote(stickyNote, page, onSave, () => onDelete(stickyNote));
-		element.style.top = `${window.scrollY + window.innerHeight / 2 - element.offsetHeight / 2}px`;
+		element.style.left = `${page.clientWidth / 2 - element.offsetWidth / 2}px`;
+		element.style.top = `${page.scrollTop + page.clientHeight / 2 - element.offsetHeight / 2}px`;
 		stickyNote.top = parseInt(element.style.top, 10);
 		stickyNote.left = parseInt(element.style.left, 10);
 		stickyNotes.push(stickyNote);
@@ -1946,7 +1957,7 @@
 				insertModal(`${birdBirb()} Mode`, message);
 			}),
 			new Separator(),
-			new MenuItem("2025.11.13.64", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.11.13.64"); }, false),
+			new MenuItem("2025.11.13.80", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.11.13.80"); }, false),
 		];
 
 		const styleElement = document.createElement("style");

dist/extension/birb.js

@@ -900,6 +900,14 @@
 			return window.location.href;
 		}
 
+		/**
+		 * @returns {HTMLElement} The current active page element where sticky notes can be applied
+		 */
+		getActivePage() {
+			// Default to root element
+			return document.documentElement;
+		}
+
 		/**
 		 * Checks if a path is applicable given the context
 		 * @param {string} path Can be a site URL or another context-specific path
@@ -1173,11 +1181,12 @@
 
 	/**
 	 * @param {StickyNote} stickyNote
+	 * @param {HTMLElement} page
 	 * @param {() => void} onSave
 	 * @param {() => void} onDelete
 	 * @returns {HTMLElement}
 	 */
-	function renderStickyNote(stickyNote, onSave, onDelete) {
+	function renderStickyNote(stickyNote, page, onSave, onDelete) {
 		const noteElement = makeElement("birb-window");
 		noteElement.classList.add("birb-sticky-note");
 		
@@ -1202,7 +1211,7 @@
 
 		noteElement.style.top = `${stickyNote.top}px`;
 		noteElement.style.left = `${stickyNote.left}px`;
-		document.body.appendChild(noteElement);
+		page.appendChild(noteElement);
 
 		makeDraggable(header, true, (top, left) => {
 			stickyNote.top = top;
@@ -1253,10 +1262,11 @@
 		const existingNotes = document.querySelectorAll(".birb-sticky-note");
 		existingNotes.forEach(note => note.remove());
 		// Render all sticky notes
+		const pageElement = getContext().getActivePage();
 		const context = getContext();
 		for (let stickyNote of stickyNotes) {
 			if (context.isPathApplicable(stickyNote.site)) {
-				renderStickyNote(stickyNote, onSave, () => onDelete(stickyNote));
+				renderStickyNote(stickyNote, pageElement, onSave, () => onDelete(stickyNote));
 			}
 		}
 	}
@@ -1270,9 +1280,10 @@
 		const id = Date.now().toString();
 		const site = getContext().getPath();
 		const stickyNote = new StickyNote(id, site, "");
-		const element = renderStickyNote(stickyNote, onSave, () => onDelete(stickyNote));
+		const page = getContext().getActivePage();
-		element.style.left = `${window.innerWidth / 2 - element.offsetWidth / 2}px`;
+		const element = renderStickyNote(stickyNote, page, onSave, () => onDelete(stickyNote));
-		element.style.top = `${window.scrollY + window.innerHeight / 2 - element.offsetHeight / 2}px`;
+		element.style.left = `${page.clientWidth / 2 - element.offsetWidth / 2}px`;
+		element.style.top = `${page.scrollTop + page.clientHeight / 2 - element.offsetHeight / 2}px`;
 		stickyNote.top = parseInt(element.style.top, 10);
 		stickyNote.left = parseInt(element.style.left, 10);
 		stickyNotes.push(stickyNote);
@@ -1946,7 +1957,7 @@
 				insertModal(`${birdBirb()} Mode`, message);
 			}),
 			new Separator(),
-			new MenuItem("2025.11.13.64", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.11.13.64"); }, false),
+			new MenuItem("2025.11.13.80", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.11.13.80"); }, false),
 		];
 
 		const styleElement = document.createElement("style");

dist/extension/manifest.json

@@ -2,7 +2,7 @@
     "manifest_version": 3,
     "name": "Pocket Bird",
     "description": "It's a pet bird in your browser, what more could you want?",
-    "version": "2025.11.13.64",
+    "version": "2025.11.13.80",
     "homepage_url": "https://idreesinc.com",
     "icons": {
         "48": "images/icons/transparent/48x48x1.png",

dist/obsidian/main.js

@@ -2,7 +2,7 @@
 const { Plugin, Notice } = require('obsidian');
 module.exports = class PocketBird extends Plugin {
 	onload() {
-		console.log("Loading Pocket Bird version 2025.11.13.64...");
+		console.log("Loading Pocket Bird version 2025.11.13.80...");
 		const OBSIDIAN_PLUGIN = this;
 		(function () {
 	'use strict';
@@ -906,6 +906,14 @@ module.exports = class PocketBird extends Plugin {
 			return window.location.href;
 		}
 
+		/**
+		 * @returns {HTMLElement} The current active page element where sticky notes can be applied
+		 */
+		getActivePage() {
+			// Default to root element
+			return document.documentElement;
+		}
+
 		/**
 		 * Checks if a path is applicable given the context
 		 * @param {string} path Can be a site URL or another context-specific path
@@ -1179,11 +1187,12 @@ module.exports = class PocketBird extends Plugin {
 
 	/**
 	 * @param {StickyNote} stickyNote
+	 * @param {HTMLElement} page
 	 * @param {() => void} onSave
 	 * @param {() => void} onDelete
 	 * @returns {HTMLElement}
 	 */
-	function renderStickyNote(stickyNote, onSave, onDelete) {
+	function renderStickyNote(stickyNote, page, onSave, onDelete) {
 		const noteElement = makeElement("birb-window");
 		noteElement.classList.add("birb-sticky-note");
 		
@@ -1208,7 +1217,7 @@ module.exports = class PocketBird extends Plugin {
 
 		noteElement.style.top = `${stickyNote.top}px`;
 		noteElement.style.left = `${stickyNote.left}px`;
-		document.body.appendChild(noteElement);
+		page.appendChild(noteElement);
 
 		makeDraggable(header, true, (top, left) => {
 			stickyNote.top = top;
@@ -1259,10 +1268,11 @@ module.exports = class PocketBird extends Plugin {
 		const existingNotes = document.querySelectorAll(".birb-sticky-note");
 		existingNotes.forEach(note => note.remove());
 		// Render all sticky notes
+		const pageElement = getContext().getActivePage();
 		const context = getContext();
 		for (let stickyNote of stickyNotes) {
 			if (context.isPathApplicable(stickyNote.site)) {
-				renderStickyNote(stickyNote, onSave, () => onDelete(stickyNote));
+				renderStickyNote(stickyNote, pageElement, onSave, () => onDelete(stickyNote));
 			}
 		}
 	}
@@ -1276,9 +1286,10 @@ module.exports = class PocketBird extends Plugin {
 		const id = Date.now().toString();
 		const site = getContext().getPath();
 		const stickyNote = new StickyNote(id, site, "");
-		const element = renderStickyNote(stickyNote, onSave, () => onDelete(stickyNote));
+		const page = getContext().getActivePage();
-		element.style.left = `${window.innerWidth / 2 - element.offsetWidth / 2}px`;
+		const element = renderStickyNote(stickyNote, page, onSave, () => onDelete(stickyNote));
-		element.style.top = `${window.scrollY + window.innerHeight / 2 - element.offsetHeight / 2}px`;
+		element.style.left = `${page.clientWidth / 2 - element.offsetWidth / 2}px`;
+		element.style.top = `${page.scrollTop + page.clientHeight / 2 - element.offsetHeight / 2}px`;
 		stickyNote.top = parseInt(element.style.top, 10);
 		stickyNote.left = parseInt(element.style.left, 10);
 		stickyNotes.push(stickyNote);
@@ -1952,7 +1963,7 @@ module.exports = class PocketBird extends Plugin {
 				insertModal(`${birdBirb()} Mode`, message);
 			}),
 			new Separator(),
-			new MenuItem("2025.11.13.64", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.11.13.64"); }, false),
+			new MenuItem("2025.11.13.80", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.11.13.80"); }, false),
 		];
 
 		const styleElement = document.createElement("style");

dist/obsidian/manifest.json

@@ -1,7 +1,7 @@
 {
     "id": "pocket-bird",
     "name": "Pocket Bird",
-    "version": "2025.11.13.64",
+    "version": "2025.11.13.80",
     "minAppVersion": "0.15.0",
     "description": "It's a pet bird in your Obsidian, what more could you want?",
     "author": "Idrees Hassan",

dist/userscript/birb.user.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         Pocket Bird
 // @namespace    https://idreesinc.com
-// @version      2025.11.13.64
+// @version      2025.11.13.80
 // @description  It's a bird that hops around your web browser, the future is here 
 // @author       Idrees
 // @downloadURL  https://github.com/IdreesInc/Pocket-Bird/raw/refs/heads/main/dist/userscript/birb.user.js
@@ -914,6 +914,14 @@
 			return window.location.href;
 		}
 
+		/**
+		 * @returns {HTMLElement} The current active page element where sticky notes can be applied
+		 */
+		getActivePage() {
+			// Default to root element
+			return document.documentElement;
+		}
+
 		/**
 		 * Checks if a path is applicable given the context
 		 * @param {string} path Can be a site URL or another context-specific path
@@ -1187,11 +1195,12 @@
 
 	/**
 	 * @param {StickyNote} stickyNote
+	 * @param {HTMLElement} page
 	 * @param {() => void} onSave
 	 * @param {() => void} onDelete
 	 * @returns {HTMLElement}
 	 */
-	function renderStickyNote(stickyNote, onSave, onDelete) {
+	function renderStickyNote(stickyNote, page, onSave, onDelete) {
 		const noteElement = makeElement("birb-window");
 		noteElement.classList.add("birb-sticky-note");
 		
@@ -1216,7 +1225,7 @@
 
 		noteElement.style.top = `${stickyNote.top}px`;
 		noteElement.style.left = `${stickyNote.left}px`;
-		document.body.appendChild(noteElement);
+		page.appendChild(noteElement);
 
 		makeDraggable(header, true, (top, left) => {
 			stickyNote.top = top;
@@ -1267,10 +1276,11 @@
 		const existingNotes = document.querySelectorAll(".birb-sticky-note");
 		existingNotes.forEach(note => note.remove());
 		// Render all sticky notes
+		const pageElement = getContext().getActivePage();
 		const context = getContext();
 		for (let stickyNote of stickyNotes) {
 			if (context.isPathApplicable(stickyNote.site)) {
-				renderStickyNote(stickyNote, onSave, () => onDelete(stickyNote));
+				renderStickyNote(stickyNote, pageElement, onSave, () => onDelete(stickyNote));
 			}
 		}
 	}
@@ -1284,9 +1294,10 @@
 		const id = Date.now().toString();
 		const site = getContext().getPath();
 		const stickyNote = new StickyNote(id, site, "");
-		const element = renderStickyNote(stickyNote, onSave, () => onDelete(stickyNote));
+		const page = getContext().getActivePage();
-		element.style.left = `${window.innerWidth / 2 - element.offsetWidth / 2}px`;
+		const element = renderStickyNote(stickyNote, page, onSave, () => onDelete(stickyNote));
-		element.style.top = `${window.scrollY + window.innerHeight / 2 - element.offsetHeight / 2}px`;
+		element.style.left = `${page.clientWidth / 2 - element.offsetWidth / 2}px`;
+		element.style.top = `${page.scrollTop + page.clientHeight / 2 - element.offsetHeight / 2}px`;
 		stickyNote.top = parseInt(element.style.top, 10);
 		stickyNote.left = parseInt(element.style.left, 10);
 		stickyNotes.push(stickyNote);
@@ -1960,7 +1971,7 @@
 				insertModal(`${birdBirb()} Mode`, message);
 			}),
 			new Separator(),
-			new MenuItem("2025.11.13.64", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.11.13.64"); }, false),
+			new MenuItem("2025.11.13.80", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.11.13.80"); }, false),
 		];
 
 		const styleElement = document.createElement("style");

src/context.js

@@ -61,6 +61,14 @@ export class Context {
 		return window.location.href;
 	}
 
+	/**
+	 * @returns {HTMLElement} The current active page element where sticky notes can be applied
+	 */
+	getActivePage() {
+		// Default to root element
+		return document.documentElement;
+	}
+
 	/**
 	 * Checks if a path is applicable given the context
 	 * @param {string} path Can be a site URL or another context-specific path

src/stickyNotes.js

@@ -33,11 +33,12 @@ export class StickyNote {
 
 /**
  * @param {StickyNote} stickyNote
+ * @param {HTMLElement} page
  * @param {() => void} onSave
  * @param {() => void} onDelete
  * @returns {HTMLElement}
  */
-export function renderStickyNote(stickyNote, onSave, onDelete) {
+export function renderStickyNote(stickyNote, page, onSave, onDelete) {
 	const noteElement = makeElement("birb-window");
 	noteElement.classList.add("birb-sticky-note");
 	
@@ -62,7 +63,7 @@ export function renderStickyNote(stickyNote, onSave, onDelete) {
 
 	noteElement.style.top = `${stickyNote.top}px`;
 	noteElement.style.left = `${stickyNote.left}px`;
-	document.body.appendChild(noteElement);
+	page.appendChild(noteElement);
 
 	makeDraggable(header, true, (top, left) => {
 		stickyNote.top = top;
@@ -113,10 +114,11 @@ export function drawStickyNotes(stickyNotes, onSave, onDelete) {
 	const existingNotes = document.querySelectorAll(".birb-sticky-note");
 	existingNotes.forEach(note => note.remove());
 	// Render all sticky notes
+	const pageElement = getContext().getActivePage();
 	const context = getContext();
 	for (let stickyNote of stickyNotes) {
 		if (context.isPathApplicable(stickyNote.site)) {
-			renderStickyNote(stickyNote, onSave, () => onDelete(stickyNote));
+			renderStickyNote(stickyNote, pageElement, onSave, () => onDelete(stickyNote));
 		}
 	}
 }
@@ -130,9 +132,10 @@ export function createNewStickyNote(stickyNotes, onSave, onDelete) {
 	const id = Date.now().toString();
 	const site = getContext().getPath();
 	const stickyNote = new StickyNote(id, site, "");
-	const element = renderStickyNote(stickyNote, onSave, () => onDelete(stickyNote));
+	const page = getContext().getActivePage();
-	element.style.left = `${window.innerWidth / 2 - element.offsetWidth / 2}px`;
+	const element = renderStickyNote(stickyNote, page, onSave, () => onDelete(stickyNote));
-	element.style.top = `${window.scrollY + window.innerHeight / 2 - element.offsetHeight / 2}px`;
+	element.style.left = `${page.clientWidth / 2 - element.offsetWidth / 2}px`;
+	element.style.top = `${page.scrollTop + page.clientHeight / 2 - element.offsetHeight / 2}px`;
 	stickyNote.top = parseInt(element.style.top, 10);
 	stickyNote.left = parseInt(element.style.left, 10);
 	stickyNotes.push(stickyNote);