Added snipping tool logic and hooked it to listners

src/lib/getScreenshotImage.ts

@@ -0,0 +1,57 @@
+/**
+ * We use this function to
+ * 1. Create a snipping tool view for the user to select the area of the screen
+ * 2. Grab the screen image with canvas
+ * 3. Crop the image with the user's selection
+ * 4. Return the cropped image as a blob
+ */
+export const getScreenshotImage = async () => {
+  // Create a snipping tool view for the user to select the area of the screen
+  const snippingTool = document.createElement('div')
+  snippingTool.style.position = 'fixed'
+  snippingTool.style.top = '0'
+  snippingTool.style.left = '0'
+  snippingTool.style.width = '100vw'
+  snippingTool.style.height = '100vh'
+  snippingTool.style.zIndex = '999'
+  snippingTool.style.background = 'rgba(0, 0, 0, 0.5)'
+  snippingTool.style.cursor = 'crosshair'
+  document.body.appendChild(snippingTool)
+
+  // Grab the screen image with canvas
+  const canvas = document.createElement('canvas')
+  canvas.width = window.innerWidth
+  canvas.height = window.innerHeight
+  const ctx = canvas.getContext('2d')
+  if (!ctx) {
+    throw new Error('Could not get canvas context')
+  }
+
+  // Crop the image with the user's selection
+  await new Promise((resolve) => {
+    snippingTool.addEventListener('mousedown', (e) => {
+      const startX = e.clientX
+      const startY = e.clientY
+      snippingTool.addEventListener('mouseup', (e) => {
+        const endX = e.clientX
+        const endY = e.clientY
+        const width = endX - startX
+        const height = endY - startY
+        const imageData = ctx.getImageData(startX, startY, width, height)
+        ctx.putImageData(imageData, 0, 0)
+        resolve(null)
+      })
+    })
+  })
+
+  // Return the cropped image as a blob
+  const blob = await new Promise<Blob | null>((resolve) => {
+    canvas.toBlob((blob) => {
+      resolve(blob)
+    })
+  })
+  if (!blob) {
+    throw new Error('Could not get blob')
+  }
+  return blob
+}

src/pages/content/sidebar.tsx

@@ -1,3 +1,4 @@
+import { getScreenshotImage } from '../../lib/getScreenShotImage'
 import { contentScriptLog } from '../../logs'
 
 contentScriptLog('Sidebar')
@@ -39,9 +40,10 @@ chrome.runtime.onMessage.addListener(function (msg) {
  * To get the page content, the sidebar sends a message with the action 'get-page-content'.
  * The page content is sent back to the sidebar by posting a message with the action 'get-page-content'.
  */
-window.addEventListener('message', (event) => {
+window.addEventListener('message', async (event) => {
   const { action, _payload } = event.data as { action: string; _payload: any }
 
+  // ACTION: get-page-content ==============================
   if (action === 'get-page-content') {
     console.log('get-page-content Triggered')
     const pageContent = document.body.innerText
@@ -53,4 +55,18 @@ window.addEventListener('message', (event) => {
       '*',
     )
   }
+
+  // ACTION: get-screenshot-image ===========================
+  if (action === 'get-screenshot-image') {
+    iframe.style.width = '0px'
+    const image = await getScreenshotImage()
+    iframe.style.width = '400px'
+    iframe.contentWindow?.postMessage(
+      {
+        action: 'get-screenshot-image',
+        image,
+      },
+      '*',
+    )
+  }
 })