feat(plugins/community/screenshot): add plugin_screenshot_mode (#1324)

Author: lowlighter

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) {

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
+    default: yes

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>

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;