获取chrome.tabs.captureVisibleTab的图像文件

Get the image file of chrome.tabs.captureVisibleTab

本文关键字：图像 文件 captureVisibleTab chrome tabs 获取      更新时间：2023-09-26

我想在Chrome扩展中捕获当前页面的Chrome。然后我找到

chrome.tabs.captureVisibleTab(integer windowId, object options, function callback)

回调函数就像

function(string dataUrl) {...};

当我尝试使用这个API时，我得到的dataUrl就像

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwME…OdiCJJMxdVYyueT/tGodJ0nTdBsks9Ogt7G0RmZYIAFRcnJwOw9B0AwBgAUUV9AZFeiiigD//Z...

但是我想使用这个图像文件位置或将其保存到另一个位置。那么我如何才能做到这一点呢?
或者是否有其他方法来捕获网页截图，然后将此页面保存为chrome扩展中的文件?

您可以将base64编码的jpeg发送到运行php的服务器以保存文件。这个例子忽略了安全性来简化

<?php
$screenshot = $_POST['screenshot'];
$screenshot = str_replace('data:image/jpeg;base64,', '', $screenshot);
$screenshot = str_replace(' ', '+', $screenshot);
$data = base64_decode($screenshot);
$file = uniqid() . '.jpeg';
$success = file_put_contents($file, $data);

然后可以让服务器返回要下载的图像的引用。

在网上很难找到一个好的答案。下面的代码将截取一个屏幕截图，然后将图像下载到您的计算机:

In my manifest.json 

    "manifest_version": 3,
    "permissions": ["activeTab", "scripting"],
    "background": {
        "service_worker": "background.js"
    },
...

In background.js 

const download = (dataurl, filename) => {
    const link = document.createElement("a");
    link.href = dataurl;
    link.download = filename;
    link.click();
}
chrome.action.onClicked.addListener((tab) => {
    chrome.tabs.captureVisibleTab(async (dataUrl) => {
        await chrome.scripting.executeScript({
            func: download,
            target: { tabId: tab.id },
            args: [dataUrl, 'test.png'],
        });
    });
});
相关文章：