全页面截图

background/messages/screenshot.ts

@@ -0,0 +1,20 @@
+import type { PlasmoMessaging } from "@plasmohq/messaging"
+
+const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
+  const tabs = await chrome.tabs.query({ currentWindow: true, active: true })
+  const tab = tabs[0]
+  chrome.tabs.captureVisibleTab(
+    tab.windowId,
+    {
+      format: "png"
+    },
+    (dataUrl) => {
+      console.log(dataUrl)
+      res.send({
+        dataUrl: dataUrl
+      })
+    }
+  )
+}
+
+export default handler

component/options/config.tsx

@@ -1,3 +1,6 @@
+import { DownloadOutlined, StarTwoTone } from "@ant-design/icons"
+
+import { sendToBackground, sendToContentScript } from "@plasmohq/messaging"
 import { useStorage } from "@plasmohq/storage/hook"
 
 import { i18n } from "~tools"
@@ -7,6 +10,12 @@ export default function Config() {
     v === undefined ? true : v
   )
 
+  async function downloadImg() {
+    sendToContentScript({
+      name: "app-full-page-screenshot"
+    })
+  }
+
   return (
     <fieldset>
       <legend>{i18n("AppConfig")}</legend>
@@ -22,6 +31,13 @@ export default function Config() {
         />
         <label className="codebox-switch" htmlFor="config-closeLog"></label>
       </div>
+      <div className="item download" onClick={downloadImg}>
+        <span>
+          <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+          {i18n("fullPageScreenshot")}
+        </span>
+        <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
+      </div>
     </fieldset>
   )
 }

contents/custom.tsx

@@ -1,10 +1,12 @@
-import { Modal, message } from "antd"
+import { message, Modal } from "antd"
 import { useEffect, useState } from "react"
 
+import { sendToBackground } from "@plasmohq/messaging"
 import { useMessage } from "@plasmohq/messaging/hook"
 import { useStorage } from "@plasmohq/storage/hook"
 
 import { addCss, saveHtml, saveMarkdown, saveTxt, setIcon } from "~tools"
+import DrawImages from "~utils/drawImages"
 import Dom2Pdf from "~utils/html2Pdf"
 import Turndown from "~utils/turndown"
 
@@ -46,22 +48,46 @@ export default function Custom() {
     if (req.name == "custom-downloadHtml") {
       isSelect = true
       isDownloadType = "html"
-      message.info('请在页面选择要下载区域！')
+      message.info("请在页面选择要下载区域！")
     }
     if (req.name == "custom-downloadMarkdown") {
       isSelect = true
       isDownloadType = "markdown"
-      message.info('请在页面选择要下载区域！')
+      message.info("请在页面选择要下载区域！")
     }
     if (req.name == "custom-downloadPdf") {
       isSelect = true
       isDownloadType = "pdf"
-      message.info('请在页面选择要下载区域！')
+      message.info("请在页面选择要下载区域！")
     }
     if (req.name == "custom-downloadImg") {
       isSelect = true
       isDownloadType = "img"
-      message.info('请在页面选择要下载区域！')
+      message.info("请在页面选择要下载区域！")
+    }
+    if (req.name == "app-full-page-screenshot") {
+      const { scrollHeight, clientHeight } = document.documentElement
+      const devicePixelRatio = window.devicePixelRatio || 1
+
+      let capturedHeight = 0
+      let capturedImages = []
+
+      const captureAndScroll = async () => {
+        const scrollAmount = clientHeight * devicePixelRatio
+        const res = await sendToBackground({ name: "screenshot" })
+        const dataUrl = res.dataUrl
+
+        capturedHeight += scrollAmount
+        if (capturedHeight < scrollHeight * devicePixelRatio) {
+          capturedImages.push(dataUrl)
+          window.scrollTo(0, capturedHeight)
+          setTimeout(captureAndScroll, 2000) // Adjust the delay as needed
+        } else {
+          DrawImages(capturedImages, articleTitle)
+        }
+      }
+
+      captureAndScroll()
     }
   })
 
@@ -118,14 +144,16 @@ export default function Custom() {
       isSelect = false
       Modal.confirm({
         title: "提示",
-        content:(
-            <>
-              <div style={{fontSize: '18px'}}>是否保存？</div>
-              <div style={{fontSize: '14px',color : 'red'}}>此功能限时免费免登录，预计10月份以后需要注册，后续可能收费...</div>
-            </>
+        content: (
+          <>
+            <div style={{ fontSize: "18px" }}>是否保存？</div>
+            <div style={{ fontSize: "14px", color: "red" }}>
+              此功能限时免费免登录，预计10月份以后需要注册，后续可能收费...
+            </div>
+          </>
         ),
-        okText: '确认',
-        cancelText: '取消',
+        okText: "确认",
+        cancelText: "取消",
         onOk: () => {
           if (isDownloadType == "html") {
             downloadHtml(currentDom)

locales/en/messages.json

@@ -154,5 +154,8 @@
   },
   "weixinConfig": {
     "message": "Wechat Config"
+  },
+  "fullPageScreenshot": {
+    "message": "Full Page Screenshot"
   }
 }

locales/zh_CN/messages.json

@@ -154,5 +154,8 @@
   },
   "weixinConfig": {
     "message": "微信设置"
+  },
+  "fullPageScreenshot": {
+    "message": "全页面截图"
   }
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "code-box",
   "displayName": "__MSG_extensionName__",
-  "version": "0.6.10",
+  "version": "0.6.12",
   "description": "__MSG_extensionDescription__",
   "author": "027xiguapi. <458813868@qq.com>",
   "scripts": {
@@ -60,6 +60,9 @@
         "id": "$PLASMO_PUBLIC_FIREFOX_EXT_ID"
       }
     },
+    "permissions": [
+      "activeTab"
+    ],
     "host_permissions": [
       "https://*/*"
     ],

utils/drawImages.ts

@@ -0,0 +1,42 @@
+import dayjs from "dayjs"
+import { saveAs } from "file-saver"
+
+export default function DrawImages(images, filename) {
+  if (images.length === 0) {
+    console.error("No images captured.")
+    return
+  }
+
+  const canvas = document.createElement("canvas")
+  const context = canvas.getContext("2d")
+  const firstImage = new Image()
+  firstImage.onload = () => {
+    canvas.width = firstImage.width
+    canvas.height = images.length * firstImage.height
+
+    let imagesLoaded = 0
+
+    const drawImageOnCanvas = (image, index) => {
+      context.drawImage(image, 0, index * firstImage.height)
+      imagesLoaded++
+
+      if (imagesLoaded === images.length) {
+        filename = filename || "CodeBox-page"
+        canvas.toBlob(function (blob) {
+          saveAs(
+            blob,
+            `${filename}-${dayjs().format("YYYY-MM-DD HH:mm:ss")}.png`
+          )
+        })
+      }
+    }
+
+    images.forEach((dataUrl, index) => {
+      const image = new Image()
+      image.onload = () => drawImageOnCanvas(image, index)
+      image.src = dataUrl
+    })
+  }
+
+  firstImage.src = images[0]
+}