Chrome extension 如何做到 screenshot 功能 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

1

Chrome extension 如何做到 screenshot 功能

chrome extension screenshot html html2canvas javascript

Kurt 2024-07-31 09:38:28 ‧ 1835 瀏覽

分享至

近期在開發一個 Chrome extension，其中我需要實做一個可以截取整個網頁畫面的功能，我嘗試用一些 HTML 轉 Image 的 library(html2canvas, dom-to-image..)，但是都會遇到一些問題，例如圖片的部分會有 CORS 的問題，另外一個是在轉的過程中 library 會丟出 exception。

我參考了 Awesome screenshot，感覺他們不像是用 HTML 轉成 Image 的這種方式，有大大可以提供點線索關於這方面的技術 keyword 嗎？

看更多先前的討論...收起先前的討論...

DanSnow iT邦好手 1 級 ‧ 2024-07-31 09:45:27 檢舉

我猜他們是用螢幕分享的功能，再去截取分享出來的畫面，不過既然你在寫 extension ，那 CORS 只需要用 extension background 的 service worker 去幫忙載回來就沒有 CORS 的問題了吧

froce iT邦大師 1 級 ‧ 2024-07-31 10:21:56 檢舉

https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints/logicalSurface

現在應該沒什麼人會用整個轉CANVAS的方法去做了。

Kurt iT邦新手 4 級 ‧ 2024-07-31 11:19:55 檢舉

謝謝提供建議以及資訊！

Kurt iT邦新手 4 級 ‧ 2024-07-31 11:20:51 檢舉

轉 canvas 的方法在這種要擷取他人網站上好像會遇到很多問題

登入發表討論

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

3 個回答

0

YC

iT邦好手 1 級 ‧ 2024-07-31 10:45:18

笨方法，
用chrome.tabs.captureVisibleTab一張張黏起來

回應 2
分享
檢舉

Kurt iT邦新手 4 級 ‧ 2024-07-31 11:23:14 檢舉

目前是用這個 method 去截圖沒錯，但因為我要截圖的網站中，不少 scroll bar 都是在 table 裡面，感覺這部分要可以完全掌控好困難QQ
可能要一一去判斷是否有 scroll bar 之類的（？

YC iT邦好手 1 級 ‧ 2024-07-31 14:30:51 檢舉

這只能客製化頁面，
先看為什麼 table 會有 scroll bar ，
然後用 css 把他移除。

例如設 overflow 或改 width: fit-content; 等等。

登入發表回應

0

jo60913

iT邦新手 5 級 ‧ 2024-07-31 11:39:30

GoFullPage 這個擴充元件也是螢幕的長截圖
https://chromewebstore.google.com/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl
github
https://github.com/mrcoles/full-page-screen-capture-chrome-extension/tree/master

api.js中的capture這個方法應該是截圖的運作

不知道不可以參考看看

回應
分享
檢舉

登入發表回應

0

I.T. Wang

iT邦新手 1 級 ‧ 2024-08-01 07:59:58

舉手發問
請問為什麼想開發一個系統已內建的功能呢?
我想起我同學以前想用VB設計一個計算機，脫褲子放屁...

回應 2
分享
檢舉

YC iT邦好手 1 級 ‧ 2024-08-01 10:15:39 檢舉

話不能這麼說，就算計算機也能擦出新火花

Felix iT邦新手 5 級 ‧ 2024-08-05 10:42:16 檢舉

重造輪子不是壞事。

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22084 篇

完賽人數

594 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙