"]
+ }
+ ],
+ "icons": {
+ "128": "icon.png"
+ },
+ "background": {
+ "service_worker": "background.js"
+ }
+}
diff --git a/chrome-extension/panel.html b/chrome-extension/panel.html
new file mode 100644
index 0000000..b089999
--- /dev/null
+++ b/chrome-extension/panel.html
@@ -0,0 +1,86 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/chrome-extension/panel.js b/chrome-extension/panel.js
new file mode 100644
index 0000000..d2b2bcc
--- /dev/null
+++ b/chrome-extension/panel.js
@@ -0,0 +1,59 @@
+document.addEventListener("DOMContentLoaded", () => {
+ const markPageCheckbox = document.getElementById("markPage");
+ const selectorInput = document.getElementById("selector");
+ const markPlacementSelect = document.getElementById("markPlacement");
+ const showBoundingBoxesCheckbox =
+ document.getElementById("showBoundingBoxes");
+ const viewPortOnlyCheckbox = document.getElementById("viewPortOnly");
+ const copyOptionsButton = document.getElementById("copyOptions");
+ const refreshButton = document.getElementById("refresh");
+ const outputDiv = document.getElementById("output");
+
+ const getCurrentOptions = () => {
+ return {
+ selector: selectorInput.value,
+ markPlacement: markPlacementSelect.value,
+ showBoundingBoxes: showBoundingBoxesCheckbox.checked,
+ viewPortOnly: viewPortOnlyCheckbox.checked,
+ // TODO: Add new options
+ };
+ };
+
+ const sendMessageToContentScript = (action) => {
+ const options = getCurrentOptions();
+ chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+ if (tabs.length === 0) return;
+ chrome.tabs.sendMessage(tabs[0].id, { action, options }, (response) => {
+ if (chrome.runtime.lastError) {
+ outputDiv.textContent = "Error: " + chrome.runtime.lastError.message;
+ return;
+ }
+ if (response && response.markedElements) {
+ outputDiv.textContent = JSON.stringify(
+ response.markedElements,
+ null,
+ 2
+ );
+ } else if (response && response.success) {
+ outputDiv.textContent = "Unmarked successfully.";
+ }
+ });
+ });
+ };
+
+ markPageCheckbox.addEventListener("change", () => {
+ const action = markPageCheckbox.checked ? "markPage" : "unmarkPage";
+ sendMessageToContentScript(action);
+ });
+
+ copyOptionsButton.addEventListener("click", () => {
+ const options = getCurrentOptions();
+ navigator.clipboard.writeText(JSON.stringify(options, null, 2)).then(() => {
+ alert("Options copied to clipboard!");
+ });
+ });
+
+ refreshButton.addEventListener("click", () => {
+ sendMessageToContentScript("refresh");
+ });
+});