From 3f000203615d5e51bad135e4db209d93f634b1a2 Mon Sep 17 00:00:00 2001 From: Vansh Date: Sun, 23 Jun 2024 23:18:14 +0530 Subject: [PATCH] Added Web Annotation Extension --- Web Annotation Extension/annotation-old.js | 376 ++++++++++++++++++ Web Annotation Extension/annotation.js | 426 +++++++++++++++++++++ Web Annotation Extension/background.js | 29 ++ Web Annotation Extension/icons/icon128.png | Bin 0 -> 12500 bytes Web Annotation Extension/icons/icon16.png | Bin 0 -> 1716 bytes Web Annotation Extension/icons/icon32.png | Bin 0 -> 2499 bytes Web Annotation Extension/icons/icon48.png | Bin 0 -> 3709 bytes Web Annotation Extension/manifest.json | 36 ++ Web Annotation Extension/popup.css | 42 ++ Web Annotation Extension/popup.html | 15 + Web Annotation Extension/popup.js | 38 ++ 11 files changed, 962 insertions(+) create mode 100644 Web Annotation Extension/annotation-old.js create mode 100644 Web Annotation Extension/annotation.js create mode 100644 Web Annotation Extension/background.js create mode 100644 Web Annotation Extension/icons/icon128.png create mode 100644 Web Annotation Extension/icons/icon16.png create mode 100644 Web Annotation Extension/icons/icon32.png create mode 100644 Web Annotation Extension/icons/icon48.png create mode 100644 Web Annotation Extension/manifest.json create mode 100644 Web Annotation Extension/popup.css create mode 100644 Web Annotation Extension/popup.html create mode 100644 Web Annotation Extension/popup.js diff --git a/Web Annotation Extension/annotation-old.js b/Web Annotation Extension/annotation-old.js new file mode 100644 index 00000000..cedf12fe --- /dev/null +++ b/Web Annotation Extension/annotation-old.js @@ -0,0 +1,376 @@ +(function() { + if (document.getElementById('annotationSidebar')) return; + + // Add Sidebar + const sidebar = document.createElement('div'); + sidebar.id = 'annotationSidebar'; + sidebar.style.position = 'fixed'; + sidebar.style.top = '10px'; + sidebar.style.left = '10px'; + sidebar.style.width = '200px'; + sidebar.style.backgroundColor = 'white'; + sidebar.style.border = '1px solid #ccc'; + sidebar.style.zIndex = '10000'; + sidebar.style.padding = '10px'; + sidebar.style.boxShadow = '0 0 10px rgba(0,0,0,0.5)'; + sidebar.style.display = 'flex'; + sidebar.style.flexDirection = 'column'; + sidebar.style.display = 'none'; + document.body.appendChild(sidebar); + + sidebar.innerHTML = ` +
+ Tools + +
+ + + + + `; + + const startAnnotationButton = document.getElementById('startAnnotation'); + const stopAnnotationButton = document.getElementById('stopAnnotation'); + const screenshotButton = document.getElementById('screenshotButton'); + const clearButton = document.getElementById('clearButton'); + const closeSidebarButton = document.getElementById('closeSidebar'); + + // Annotation Canvas + const canvas = document.createElement('canvas'); + canvas.id = 'annotationCanvas'; + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + canvas.style.position = 'fixed'; + canvas.style.top = '0'; + canvas.style.left = '0'; + canvas.style.zIndex = '9999'; + canvas.style.display = 'none'; + document.body.appendChild(canvas); + + const ctx = canvas.getContext('2d'); + let drawing = false; + let penColor = '#000000'; + let penWidth = 2; + const paths = []; + let currentPath = []; + + const penWidthInput = document.createElement('input'); + penWidthInput.type = 'range'; + penWidthInput.min = 1; + penWidthInput.max = 20; + penWidthInput.value = 2; + penWidthInput.style.display = 'none'; + sidebar.appendChild(penWidthInput); + + const colorPickerInput = document.createElement('input'); + colorPickerInput.type = 'color'; + colorPickerInput.value = '#000000'; + colorPickerInput.style.display = 'none'; + sidebar.appendChild(colorPickerInput); + + const undoButton = document.createElement('button'); + undoButton.textContent = 'Undo'; + undoButton.style.display = 'none'; + sidebar.appendChild(undoButton); + + penWidthInput.addEventListener('input', (e) => { + penWidth = e.target.value; + }); + + colorPickerInput.addEventListener('input', (e) => { + penColor = e.target.value; + }); + + startAnnotationButton.addEventListener('click', () => { + canvas.style.display = 'block'; + canvas.style.cursor = 'crosshair'; + startAnnotationButton.style.display = 'none'; + stopAnnotationButton.style.display = 'inline'; + penWidthInput.style.display = 'block'; + colorPickerInput.style.display = 'block'; + undoButton.style.display = 'block'; + clearButton.style.display = 'block'; + }); + + stopAnnotationButton.addEventListener('click', () => { + canvas.style.display = 'none'; + canvas.style.cursor = 'default'; + startAnnotationButton.style.display = 'inline'; + stopAnnotationButton.style.display = 'none'; + penWidthInput.style.display = 'none'; + colorPickerInput.style.display = 'none'; + undoButton.style.display = 'none'; + clearButton.style.display = 'none'; + }); + + undoButton.addEventListener('click', () => { + paths.pop(); + redraw(); + }); + + closeSidebarButton.addEventListener('click', () => { + sidebar.style.display = 'none'; + }); + + clearButton.addEventListener('click', () => { + paths.length = 0; + redraw(); + }); + + canvas.addEventListener('mousedown', (e) => { + if (e.target.id === 'annotationCanvas') { + drawing = true; + currentPath = [{ x: e.clientX, y: e.clientY, color: penColor, width: penWidth }]; + ctx.beginPath(); + ctx.moveTo(e.clientX, e.clientY); + } + }); + + canvas.addEventListener('mousemove', (e) => { + if (drawing) { + currentPath.push({ x: e.clientX, y: e.clientY, color: penColor, width: penWidth }); + ctx.lineTo(e.clientX, e.clientY); + ctx.strokeStyle = penColor; + ctx.lineWidth = penWidth; + ctx.stroke(); + } + }); + + canvas.addEventListener('mouseup', () => { + if (drawing) { + paths.push(currentPath); + drawing = false; + ctx.closePath(); + } + }); + + canvas.addEventListener('mouseleave', () => { + if (drawing) { + paths.push(currentPath); + drawing = false; + ctx.closePath(); + } + }); + + function redraw() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + paths.forEach(path => { + ctx.beginPath(); + path.forEach((point, index) => { + ctx.strokeStyle = point.color; + ctx.lineWidth = point.width; + if (index === 0) { + ctx.moveTo(point.x, point.y); + } else { + ctx.lineTo(point.x, point.y); + } + ctx.stroke(); + }); + ctx.closePath(); + }); + } + + screenshotButton.addEventListener('click', () => { + const link = document.createElement('a'); + link.href = canvas.toDataURL(); + link.download = 'screenshot.png'; + link.click(); + }); + + chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { + if (request.action === 'toggleSidebar') { + sidebar.style.display = (sidebar.style.display === 'none' || sidebar.style.display === '') ? 'flex' : 'none'; + } + }); + +})(); + + + +/* (function() { + if (document.getElementById('annotationSidebar')) return; + + // Add Sidebar + const sidebar = document.createElement('div'); + sidebar.id = 'annotationSidebar'; + sidebar.classList.add('collapsed'); + sidebar.style.position = 'fixed'; + sidebar.style.top = '10px'; + sidebar.style.left = '10px'; + sidebar.style.width = '150px'; + sidebar.style.backgroundColor = 'white'; + sidebar.style.border = '1px solid #ccc'; + sidebar.style.zIndex = '10000'; + sidebar.style.padding = '10px'; + sidebar.style.boxShadow = '0 0 10px rgba(0,0,0,0.5)'; + document.body.appendChild(sidebar); + + sidebar.innerHTML = ` +
☰
+ + `; + + const dragHandle = document.getElementById('dragHandle'); + const toolsDiv = document.getElementById('tools'); + const startAnnotationButton = document.getElementById('startAnnotation'); + const stopAnnotationButton = document.getElementById('stopAnnotation'); + let isDragging = false; + let offsetX, offsetY; + + dragHandle.addEventListener('mousedown', (e) => { + isDragging = true; + dragHandle.style.cursor = 'grabbing'; + offsetX = e.clientX - sidebar.getBoundingClientRect().left; + offsetY = e.clientY - sidebar.getBoundingClientRect().top; + document.addEventListener('mousemove', onDrag); + document.addEventListener('mouseup', onStopDrag); + }); + + function onDrag(e) { + if (isDragging) { + sidebar.style.left = `${e.clientX - offsetX}px`; + sidebar.style.top = `${e.clientY - offsetY}px`; + } + } + + function onStopDrag() { + isDragging = false; + dragHandle.style.cursor = 'grab'; + document.removeEventListener('mousemove', onDrag); + document.removeEventListener('mouseup', onStopDrag); + } + + sidebar.addEventListener('click', (e) => { + e.stopPropagation(); + sidebar.classList.toggle('expanded'); + sidebar.classList.toggle('collapsed'); + if (sidebar.classList.contains('expanded')) { + toolsDiv.style.display = 'block'; + } else { + toolsDiv.style.display = 'none'; + } + }); + + document.addEventListener('click', (e) => { + if (sidebar.classList.contains('expanded') && !e.target.closest('#annotationSidebar')) { + sidebar.classList.remove('expanded'); + sidebar.classList.add('collapsed'); + toolsDiv.style.display = 'none'; + } + }); + + // Prevent annotation on the sidebar + sidebar.addEventListener('mousedown', (e) => e.stopPropagation()); + sidebar.addEventListener('mousemove', (e) => e.stopPropagation()); + sidebar.addEventListener('mouseup', (e) => e.stopPropagation()); + + // Annotation Canvas + const canvas = document.createElement('canvas'); + canvas.id = 'annotationCanvas'; + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + canvas.style.position = 'fixed'; + canvas.style.top = '0'; + canvas.style.left = '0'; + canvas.style.zIndex = '9999'; + canvas.style.display = 'none'; + document.body.appendChild(canvas); + + const ctx = canvas.getContext('2d'); + let drawing = false; + let penColor = '#000000'; + let penWidth = 2; + const paths = []; + let currentPath = []; + + const penWidthInput = document.getElementById('penWidth'); + const colorPickerInput = document.getElementById('colorPicker'); + const undoButton = document.getElementById('undoButton'); + + penWidthInput.addEventListener('input', (e) => { + penWidth = e.target.value; + }); + + colorPickerInput.addEventListener('input', (e) => { + penColor = e.target.value; + }); + + startAnnotationButton.addEventListener('click', () => { + canvas.style.display = 'block'; + startAnnotationButton.style.display = 'none'; + stopAnnotationButton.style.display = 'inline'; + }); + + stopAnnotationButton.addEventListener('click', () => { + canvas.style.display = 'none'; + startAnnotationButton.style.display = 'inline'; + stopAnnotationButton.style.display = 'none'; + }); + + undoButton.addEventListener('click', () => { + paths.pop(); + redraw(); + }); + + canvas.addEventListener('mousedown', (e) => { + if (e.target.id === 'annotationCanvas') { + drawing = true; + currentPath = [{ x: e.clientX, y: e.clientY, color: penColor, width: penWidth }]; + ctx.beginPath(); + ctx.moveTo(e.clientX, e.clientY); + } + }); + + canvas.addEventListener('mousemove', (e) => { + if (drawing) { + currentPath.push({ x: e.clientX, y: e.clientY, color: penColor, width: penWidth }); + ctx.lineTo(e.clientX, e.clientY); + ctx.strokeStyle = penColor; + ctx.lineWidth = penWidth; + ctx.stroke(); + } + }); + + canvas.addEventListener('mouseup', () => { + if (drawing) { + paths.push(currentPath); + drawing = false; + ctx.closePath(); + } + }); + + canvas.addEventListener('mouseleave', () => { + if (drawing) { + paths.push(currentPath); + drawing = false; + ctx.closePath(); + } + }); + + function redraw() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + paths.forEach(path => { + ctx.beginPath(); + path.forEach((point, index) => { + ctx.strokeStyle = point.color; + ctx.lineWidth = point.width; + if (index === 0) { + ctx.moveTo(point.x, point.y); + } else { + ctx.lineTo(point.x, point.y); + } + ctx.stroke(); + }); + ctx.closePath(); + }); + } +})(); + */ \ No newline at end of file diff --git a/Web Annotation Extension/annotation.js b/Web Annotation Extension/annotation.js new file mode 100644 index 00000000..e12dee1d --- /dev/null +++ b/Web Annotation Extension/annotation.js @@ -0,0 +1,426 @@ +(function() { + if (document.getElementById('annotationSidebar')) return; + + // Add Sidebar + const sidebar = document.createElement('div'); + sidebar.id = 'annotationSidebar'; + sidebar.style.position = 'fixed'; + sidebar.style.top = '10px'; + sidebar.style.left = '10px'; + sidebar.style.width = '220px'; + sidebar.style.backgroundColor = 'white'; + sidebar.style.border = '1px solid #ccc'; + sidebar.style.zIndex = '10000'; + sidebar.style.padding = '10px'; + sidebar.style.boxShadow = '0 0 10px rgba(0,0,0,0.5)'; + sidebar.style.display = 'flex'; + sidebar.style.flexDirection = 'column'; + sidebar.style.display = 'none'; + sidebar.style.borderRadius = '8px'; + document.body.appendChild(sidebar); + + sidebar.innerHTML = ` +
+ ☰ Drag + +
+ + + + + + + + + + `; + + const startAnnotationButton = document.getElementById('startAnnotation'); + const stopAnnotationButton = document.getElementById('stopAnnotation'); + const screenshotButton = document.getElementById('screenshotButton'); + const clearButton = document.getElementById('clearButton'); + const closeSidebarButton = document.getElementById('closeSidebar'); + const dragHandle = document.getElementById('dragHandle'); + const penWidthInput = document.getElementById('penWidthInput'); + const colorPickerInput = document.getElementById('colorPickerInput'); + const undoButton = document.getElementById('undoButton'); + const penInputText = document.getElementById('penInputText'); + const colorInputText = document.getElementById('colorInputText'); + + + // Annotation Canvas + const canvas = document.createElement('canvas'); + canvas.id = 'annotationCanvas'; + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + canvas.style.position = 'fixed'; + canvas.style.top = '0'; + canvas.style.left = '0'; + canvas.style.zIndex = '9999'; + canvas.style.display = 'none'; + document.body.appendChild(canvas); + + const ctx = canvas.getContext('2d'); + let drawing = false; + let penColor = '#000000'; + let penWidth = 2; + const paths = []; + let currentPath = []; + +/* const penWidthInput = document.createElement('input'); + penWidthInput.type = 'range'; + penWidthInput.min = 1; + penWidthInput.max = 20; + penWidthInput.value = 2; + penWidthInput.style.display = 'none'; + penWidthInput.style.margin = '10px 0'; + sidebar.appendChild(penWidthInput); + + const colorPickerInput = document.createElement('input'); + colorPickerInput.type = 'color'; + colorPickerInput.value = '#000000'; + colorPickerInput.style.display = 'none'; + colorPickerInput.style.margin = '10px 0'; + sidebar.appendChild(colorPickerInput); */ + + /* const undoButton = document.createElement('button'); + undoButton.textContent = 'Undo'; + undoButton.style.display = 'none'; + undoButton.style.borderRadius = '8px'; + undoButton.style.margin = '10px 0'; + undoButton.style.padding = '10px'; + undoButton.style.background = '#6c757d'; + undoButton.style.color = 'white'; + undoButton.style.border = 'none'; + undoButton.style.cursor = 'pointer'; + sidebar.appendChild(undoButton); */ + + penWidthInput.addEventListener('input', (e) => { + penWidth = e.target.value; + }); + + colorPickerInput.addEventListener('input', (e) => { + penColor = e.target.value; + }); + + startAnnotationButton.addEventListener('click', () => { + canvas.style.display = 'block'; + canvas.style.cursor = 'crosshair'; + startAnnotationButton.style.display = 'none'; + stopAnnotationButton.style.display = 'inline'; + penWidthInput.style.display = 'block'; + colorPickerInput.style.display = 'block'; + undoButton.style.display = 'block'; + clearButton.style.display = 'block'; + penInputText.style.display = 'block'; + colorInputText.style.display = 'block'; + }); + + stopAnnotationButton.addEventListener('click', () => { + canvas.style.display = 'none'; + canvas.style.cursor = 'default'; + startAnnotationButton.style.display = 'inline'; + stopAnnotationButton.style.display = 'none'; + penWidthInput.style.display = 'none'; + colorPickerInput.style.display = 'none'; + undoButton.style.display = 'none'; + clearButton.style.display = 'none'; + penInputText.style.display = 'none'; + colorInputText.style.display = 'none'; + }); + + undoButton.addEventListener('click', () => { + paths.pop(); + redraw(); + }); + + closeSidebarButton.addEventListener('click', () => { + sidebar.style.display = 'none'; + }); + + clearButton.addEventListener('click', () => { + paths.length = 0; + redraw(); + }); + + let isDragging = false; + let offsetX, offsetY; + + dragHandle.addEventListener('mousedown', (e) => { + isDragging = true; + offsetX = e.clientX - sidebar.getBoundingClientRect().left; + offsetY = e.clientY - sidebar.getBoundingClientRect().top; + document.addEventListener('mousemove', onDrag); + document.addEventListener('mouseup', stopDrag); + }); + + function onDrag(e) { + if (isDragging) { + sidebar.style.left = `${e.clientX - offsetX}px`; + sidebar.style.top = `${e.clientY - offsetY}px`; + } + } + + function stopDrag() { + isDragging = false; + document.removeEventListener('mousemove', onDrag); + document.removeEventListener('mouseup', stopDrag); + } + + canvas.addEventListener('mousedown', (e) => { + if (e.target.id === 'annotationCanvas') { + drawing = true; + currentPath = [{ x: e.clientX, y: e.clientY, color: penColor, width: penWidth }]; + ctx.beginPath(); + ctx.moveTo(e.clientX, e.clientY); + } + }); + + canvas.addEventListener('mousemove', (e) => { + if (drawing) { + currentPath.push({ x: e.clientX, y: e.clientY, color: penColor, width: penWidth }); + ctx.lineTo(e.clientX, e.clientY); + ctx.strokeStyle = penColor; + ctx.lineWidth = penWidth; + ctx.stroke(); + } + }); + + canvas.addEventListener('mouseup', () => { + if (drawing) { + paths.push(currentPath); + drawing = false; + ctx.closePath(); + } + }); + + canvas.addEventListener('mouseleave', () => { + if (drawing) { + paths.push(currentPath); + drawing = false; + ctx.closePath(); + } + }); + + function redraw() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + paths.forEach(path => { + ctx.beginPath(); + path.forEach((point, index) => { + ctx.strokeStyle = point.color; + ctx.lineWidth = point.width; + if (index === 0) { + ctx.moveTo(point.x, point.y); + } else { + ctx.lineTo(point.x, point.y); + } + ctx.stroke(); + }); + ctx.closePath(); + }); + } + + screenshotButton.addEventListener('click', () => { + const link = document.createElement('a'); + link.href = canvas.toDataURL(); + link.download = 'screenshot.png'; + link.click(); + }); + + chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { + if (request.action === 'toggleSidebar') { + sidebar.style.display = (sidebar.style.display === 'none' || sidebar.style.display === '') ? 'flex' : 'none'; + } + }); + +})(); + + + +/* (function() { + if (document.getElementById('annotationSidebar')) return; + + // Add Sidebar + const sidebar = document.createElement('div'); + sidebar.id = 'annotationSidebar'; + sidebar.classList.add('collapsed'); + sidebar.style.position = 'fixed'; + sidebar.style.top = '10px'; + sidebar.style.left = '10px'; + sidebar.style.width = '150px'; + sidebar.style.backgroundColor = 'white'; + sidebar.style.border = '1px solid #ccc'; + sidebar.style.zIndex = '10000'; + sidebar.style.padding = '10px'; + sidebar.style.boxShadow = '0 0 10px rgba(0,0,0,0.5)'; + document.body.appendChild(sidebar); + + sidebar.innerHTML = ` +
☰
+ + `; + + const dragHandle = document.getElementById('dragHandle'); + const toolsDiv = document.getElementById('tools'); + const startAnnotationButton = document.getElementById('startAnnotation'); + const stopAnnotationButton = document.getElementById('stopAnnotation'); + let isDragging = false; + let offsetX, offsetY; + + dragHandle.addEventListener('mousedown', (e) => { + isDragging = true; + dragHandle.style.cursor = 'grabbing'; + offsetX = e.clientX - sidebar.getBoundingClientRect().left; + offsetY = e.clientY - sidebar.getBoundingClientRect().top; + document.addEventListener('mousemove', onDrag); + document.addEventListener('mouseup', onStopDrag); + }); + + function onDrag(e) { + if (isDragging) { + sidebar.style.left = `${e.clientX - offsetX}px`; + sidebar.style.top = `${e.clientY - offsetY}px`; + } + } + + function onStopDrag() { + isDragging = false; + dragHandle.style.cursor = 'grab'; + document.removeEventListener('mousemove', onDrag); + document.removeEventListener('mouseup', onStopDrag); + } + + sidebar.addEventListener('click', (e) => { + e.stopPropagation(); + sidebar.classList.toggle('expanded'); + sidebar.classList.toggle('collapsed'); + if (sidebar.classList.contains('expanded')) { + toolsDiv.style.display = 'block'; + } else { + toolsDiv.style.display = 'none'; + } + }); + + document.addEventListener('click', (e) => { + if (sidebar.classList.contains('expanded') && !e.target.closest('#annotationSidebar')) { + sidebar.classList.remove('expanded'); + sidebar.classList.add('collapsed'); + toolsDiv.style.display = 'none'; + } + }); + + // Prevent annotation on the sidebar + sidebar.addEventListener('mousedown', (e) => e.stopPropagation()); + sidebar.addEventListener('mousemove', (e) => e.stopPropagation()); + sidebar.addEventListener('mouseup', (e) => e.stopPropagation()); + + // Annotation Canvas + const canvas = document.createElement('canvas'); + canvas.id = 'annotationCanvas'; + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + canvas.style.position = 'fixed'; + canvas.style.top = '0'; + canvas.style.left = '0'; + canvas.style.zIndex = '9999'; + canvas.style.display = 'none'; + document.body.appendChild(canvas); + + const ctx = canvas.getContext('2d'); + let drawing = false; + let penColor = '#000000'; + let penWidth = 2; + const paths = []; + let currentPath = []; + + const penWidthInput = document.getElementById('penWidth'); + const colorPickerInput = document.getElementById('colorPicker'); + const undoButton = document.getElementById('undoButton'); + + penWidthInput.addEventListener('input', (e) => { + penWidth = e.target.value; + }); + + colorPickerInput.addEventListener('input', (e) => { + penColor = e.target.value; + }); + + startAnnotationButton.addEventListener('click', () => { + canvas.style.display = 'block'; + startAnnotationButton.style.display = 'none'; + stopAnnotationButton.style.display = 'inline'; + }); + + stopAnnotationButton.addEventListener('click', () => { + canvas.style.display = 'none'; + startAnnotationButton.style.display = 'inline'; + stopAnnotationButton.style.display = 'none'; + }); + + undoButton.addEventListener('click', () => { + paths.pop(); + redraw(); + }); + + canvas.addEventListener('mousedown', (e) => { + if (e.target.id === 'annotationCanvas') { + drawing = true; + currentPath = [{ x: e.clientX, y: e.clientY, color: penColor, width: penWidth }]; + ctx.beginPath(); + ctx.moveTo(e.clientX, e.clientY); + } + }); + + canvas.addEventListener('mousemove', (e) => { + if (drawing) { + currentPath.push({ x: e.clientX, y: e.clientY, color: penColor, width: penWidth }); + ctx.lineTo(e.clientX, e.clientY); + ctx.strokeStyle = penColor; + ctx.lineWidth = penWidth; + ctx.stroke(); + } + }); + + canvas.addEventListener('mouseup', () => { + if (drawing) { + paths.push(currentPath); + drawing = false; + ctx.closePath(); + } + }); + + canvas.addEventListener('mouseleave', () => { + if (drawing) { + paths.push(currentPath); + drawing = false; + ctx.closePath(); + } + }); + + function redraw() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + paths.forEach(path => { + ctx.beginPath(); + path.forEach((point, index) => { + ctx.strokeStyle = point.color; + ctx.lineWidth = point.width; + if (index === 0) { + ctx.moveTo(point.x, point.y); + } else { + ctx.lineTo(point.x, point.y); + } + ctx.stroke(); + }); + ctx.closePath(); + }); + } +})(); + */ \ No newline at end of file diff --git a/Web Annotation Extension/background.js b/Web Annotation Extension/background.js new file mode 100644 index 00000000..886ed0f5 --- /dev/null +++ b/Web Annotation Extension/background.js @@ -0,0 +1,29 @@ +chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { + if (request.action === 'captureScreenshot') { + chrome.tabs.query({active: true, currentWindow: true}, (tabs) => { + chrome.tabs.captureVisibleTab(null, { format: 'png' }, (dataUrl) => { + sendResponse({ screenshotUrl: dataUrl }); + }); + }); + return true; // Required to use sendResponse asynchronously. + } +}); + +chrome.runtime.onInstalled.addListener(() => { + chrome.contextMenus.create({ + id: "startAnnotation", + title: "Start Annotation", + contexts: ["all"] + }); +}); + +chrome.contextMenus.onClicked.addListener((info, tab) => { + if (info.menuItemId === "startAnnotation") { + chrome.scripting.executeScript({ + target: { tabId: tab.id }, + files: ['annotation.js'] + }, () => { + chrome.tabs.sendMessage(tab.id, { action: "toggleSidebar" }); + }); + } +}); diff --git a/Web Annotation Extension/icons/icon128.png b/Web Annotation Extension/icons/icon128.png new file mode 100644 index 0000000000000000000000000000000000000000..7555650c24c21596d05b3c10195baa7a2ef608a0 GIT binary patch literal 12500 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 literal 0 HcmV?d00001 diff --git a/Web Annotation Extension/icons/icon16.png b/Web Annotation Extension/icons/icon16.png new file mode 100644 index 0000000000000000000000000000000000000000..48acfb7cb213ed1950a21757b2c37216aa7a2eb4 GIT binary patch literal 1716 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 SKvk6K0Ur-P_dBlPr~d(-NMhFj literal 0 HcmV?d00001 diff --git a/Web Annotation Extension/icons/icon48.png b/Web Annotation Extension/icons/icon48.png new file mode 100644 index 0000000000000000000000000000000000000000..f065117e71e8ad64bdf3c3d405bceb1fcbb92cff GIT binary patch literal 3709 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 literal 0 HcmV?d00001 diff --git a/Web Annotation Extension/manifest.json b/Web Annotation Extension/manifest.json new file mode 100644 index 00000000..05f00c48 --- /dev/null +++ b/Web Annotation Extension/manifest.json @@ -0,0 +1,36 @@ +{ + "manifest_version": 3, + "name": "Web Annotation Tool", + "version": "1.0", + "description": "Annotate webpages and save them as screenshots", + "permissions": [ + "activeTab", + "storage", + "scripting", + "tabs", + "contextMenus" + ], + "background": { + "service_worker": "background.js" + }, + "action": { + "default_popup": "popup.html", + "default_icon": { + "16": "icons/icon16.png", + "48": "icons/icon48.png", + "128": "icons/icon128.png" + } + }, + "content_scripts": [ + { + "matches": ["http://*/*", "https://*/*"], + "js": ["annotation.js"], + "run_at": "document_idle" + } + ], + "icons": { + "16": "icons/icon16.png", + "48": "icons/icon48.png", + "128": "icons/icon128.png" + } +} \ No newline at end of file diff --git a/Web Annotation Extension/popup.css b/Web Annotation Extension/popup.css new file mode 100644 index 00000000..090a842c --- /dev/null +++ b/Web Annotation Extension/popup.css @@ -0,0 +1,42 @@ +body { + font-family: Arial, sans-serif; + width: 200px; + margin: 0; +} + +.container { + text-align: center; + padding: 20px; +} + +button { + width: 100%; + padding: 10px; + margin: 10px 0; + cursor: pointer; + border: none; + background-color: #007bff; + color: white; + border-radius: 5px; + outline: none; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #0056b3; +} + +#penWidth, #colorPicker, #undoButton { + margin: 5px 0; +} + +#undoButton:hover, #clearButton:hover { + background-color: #c82333; +} + +canvas { + position: fixed; + top: 0; + left: 0; + z-index: 9999; +} diff --git a/Web Annotation Extension/popup.html b/Web Annotation Extension/popup.html new file mode 100644 index 00000000..7105a534 --- /dev/null +++ b/Web Annotation Extension/popup.html @@ -0,0 +1,15 @@ + + + + Web Annotation Tool + + + + +
+

Annotation Tool

+ + +
+ + \ No newline at end of file diff --git a/Web Annotation Extension/popup.js b/Web Annotation Extension/popup.js new file mode 100644 index 00000000..16cb7c7d --- /dev/null +++ b/Web Annotation Extension/popup.js @@ -0,0 +1,38 @@ +document.addEventListener("DOMContentLoaded", function(){ + document.getElementById('enableAnnotation').addEventListener('click', () => { + chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { + const tab = tabs[0]; + if ((tab.url.startsWith('http://') || tab.url.startsWith('https://')) && (tab && tab.id)) { + chrome.scripting.executeScript({ + target: { tabId: tab.id }, + files: ['annotation.js'] + }).then(() => { + console.log("Annotation script executed."); + chrome.tabs.sendMessage(tab.id, {action: "toggleSidebar"}); + }).catch((err) => { + console.error("Script execution failed: ", err); + }); + } else { + console.error("Cannot run script on this URL."); + alert("Cannot run script on this URL."); + } + }); + }); + + document.getElementById('saveScreenshot').addEventListener('click', () => { + chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { + const tab = tabs[0]; + if (tab.url.startsWith('http://') || tab.url.startsWith('https://')) { + chrome.tabs.captureVisibleTab(tabs[0].windowId, {}, function(image) { + const link = document.createElement('a'); + link.href = image; + link.download = 'screenshot.png'; + link.click(); + }); + } else { + console.error("Cannot capture screenshot on this URL."); + alert("Cannot capture screenshot on this URL."); + } + }); + }); +}); \ No newline at end of file