From 490a9691dcfc57900ab34acf7cbd995f981024e4 Mon Sep 17 00:00:00 2001
From: Simon Lecoq <22963968+lowlighter@users.noreply.github.com>
Date: Mon, 19 Dec 2022 12:48:19 -0500
Subject: [PATCH] feat(plugins/community/screenshot): add
 `plugin_screenshot_mode` (#1324)

---
 source/plugins/community/screenshot/index.mjs | 36 +++++++++++++------
 .../plugins/community/screenshot/metadata.yml | 15 +++++++-
 .../templates/classic/partials/screenshot.ejs |  6 +++-
 source/templates/classic/style.css            |  3 ++
 4 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/source/plugins/community/screenshot/index.mjs b/source/plugins/community/screenshot/index.mjs
index a4f20f02..cd6a3b1e 100644
--- a/source/plugins/community/screenshot/index.mjs
+++ b/source/plugins/community/screenshot/index.mjs
@@ -7,7 +7,7 @@ export default async function({login, q, imports, data, account}, {enabled = fal
       return null
 
     //Load inputs
-    let {url, selector, title, background, viewport, wait} = imports.metadata.plugins.screenshot.inputs({data, account, q})
+    let {url, selector, title, background, viewport, wait, mode} = imports.metadata.plugins.screenshot.inputs({data, account, q})
     if (!url)
       throw {error: {message: "URL is not set"}}
 
@@ -23,19 +23,35 @@ export default async function({login, q, imports, data, account}, {enabled = fal
       await new Promise(solve => setTimeout(solve, wait))
 
     //Screenshot
+    let content = null
+    let image = null
+    const metadata = {height:null, width:null}
     await page.waitForSelector(selector)
-    const clip = await page.evaluate(selector => {
-      const {x, y, width, height} = document.querySelector(selector).getBoundingClientRect()
-      return {x, y, width, height}
-    }, selector)
-    console.debug(`metrics/compute/${login}/plugins > screenshot > coordinates ${JSON.stringify(clip)}`)
-    const [buffer] = await imports.record({page, ...clip, frames: 1, background})
-    const screenshot = await imports.sharp(Buffer.from(buffer.split(",").pop(), "base64")).resize({width: Math.min(454 * (1 + data.large), clip.width)})
-    const metadata = await screenshot.metadata()
+    switch (mode) {
+      case "image":{
+        const clip = await page.evaluate(selector => {
+          const {x, y, width, height} = document.querySelector(selector).getBoundingClientRect()
+          return {x, y, width, height}
+        }, selector)
+        console.debug(`metrics/compute/${login}/plugins > screenshot > coordinates ${JSON.stringify(clip)}`)
+        const [buffer] = await imports.record({page, ...clip, frames: 1, background})
+        const screenshot = await imports.sharp(Buffer.from(buffer.split(",").pop(), "base64")).resize({width: Math.min(454 * (1 + data.large), clip.width)})
+        image = `data:image/png;base64,${(await screenshot.toBuffer()).toString("base64")}`
+        Object.assign(metadata, await screenshot.metadata())
+        break
+      }
+      case "text":{
+        content = await page.evaluate(selector => document.querySelector(selector)?.innerText ?? "", selector)
+        break
+      }
+      default:
+        throw {error: {message: `Unsupported mode "${mode}"`}}
+    }
+
     await browser.close()
 
     //Results
-    return {image: `data:image/png;base64,${(await screenshot.toBuffer()).toString("base64")}`, title, height: metadata.height, width: metadata.width, url}
+    return {mode, image, content, title, height: metadata.height, width: metadata.width, url}
   }
   //Handle errors
   catch (error) {
diff --git a/source/plugins/community/screenshot/metadata.yml b/source/plugins/community/screenshot/metadata.yml
index b478502e..34c9d080 100644
--- a/source/plugins/community/screenshot/metadata.yml
+++ b/source/plugins/community/screenshot/metadata.yml
@@ -42,6 +42,19 @@ inputs:
     type: string
     default: body
 
+  plugin_screenshot_mode:
+    description: |
+      Output mode
+
+      - `image`: screenshot of selected element
+      - `text`: keep [`innerText`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText) of selected element
+        - *⚠️ Any CSS style applied to text such as font size, weight or color will be removed*
+    type: string
+    default: image
+    values:
+      - image
+      - text
+
   plugin_screenshot_viewport:
     description: |
       Viewport options
@@ -63,4 +76,4 @@ inputs:
     description: |
       Background
     type: boolean
-    default: yes
\ No newline at end of file
+    default: yes
diff --git a/source/templates/classic/partials/screenshot.ejs b/source/templates/classic/partials/screenshot.ejs
index 4b3b31bb..0c498f16 100644
--- a/source/templates/classic/partials/screenshot.ejs
+++ b/source/templates/classic/partials/screenshot.ejs
@@ -11,8 +11,12 @@
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.343 13.657A8 8 0 1113.657 2.343 8 8 0 012.343 13.657zM6.03 4.97a.75.75 0 00-1.06 1.06L6.94 8 4.97 9.97a.75.75 0 101.06 1.06L8 9.06l1.97 1.97a.75.75 0 101.06-1.06L9.06 8l1.97-1.97a.75.75 0 10-1.06-1.06L8 6.94 6.03 4.97z"></path></svg>
             <%= plugins.screenshot.error.message %>
           </div>
-        <% } else { %>
+        <% } else if (plugins.screenshot.image) { %>
           <img class="screenshot autosize" src="<%= plugins.screenshot.image %>" height="<%= plugins.screenshot.height %>" width="<%= plugins.screenshot.width %>" alt=""/>
+        <% } else if (plugins.screenshot.content) { %>
+          <div class="screenshot-content">
+            <%= plugins.screenshot.content %>
+          </div>
         <% } %>
       </section>
     </div>
diff --git a/source/templates/classic/style.css b/source/templates/classic/style.css
index 00e5b7b9..6e562ccd 100644
--- a/source/templates/classic/style.css
+++ b/source/templates/classic/style.css
@@ -469,6 +469,9 @@
     margin: 8px 14px 4px;
     border-radius: 5px;
   }
+  .screenshot-content {
+    margin-left: 12px;
+  }
 
   svg.large .audits {
     display: inline-flex;