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 @@ <%= plugins.screenshot.error.message %> - <% } else { %> + <% } else if (plugins.screenshot.image) { %> + <% } else if (plugins.screenshot.content) { %> +
+ <%= plugins.screenshot.content %> +
<% } %> 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;