功能按钮进行截图并下载为图像文件

Question

我正在尝试开发一个按钮，只需截取当前选项卡的屏幕截图并下载它（这可能看起来没什么用，因为我们可以手动截取屏幕截图，但我计划扩展按钮的功能以制作更多东西）。我使用的是 Firefox 116.0.1（64 位）。

与按钮关联的代码如下：

function takeScreenshotAndSave() 
{
  browser.tabs.captureVisibleTab({ format: "png" })
    .then(screenshotUrl => {
      console.log("Screenshot URL:", screenshotUrl);
      const filename = `Capture-snapshot${Date.now()}-visible-1.png`;

      browser.downloads.download({
        url: screenshotUrl,
        filename: filename,
        conflictAction: "uniquify",
      });
    })
    .catch(error => {
      console.error("Error taking screenshot:", error);
    });
}

这一切都很好，直到我们到达“browser.downloads.download”部分，我在其中收到错误：

Error taking screenshot: Error: Type error for parameter options (Error processing url: Error: Access denied for URL data:,) for downloads.download.

在我的manifest.json 文件中，我具有以下权限：

  "permissions": [
    "notifications",
    "activeTab",
    "downloads",
    "<all_urls>"
  ],

所以我拥有“”权限，但这似乎还不够。我尝试遵循使用 downloads.download() API 将数据 URI 作为文件保存中有关创建 blob 的建议，但如果这样做，我最终会得到一个包含“data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAABy0AAANzCAY ...”字符串，不是真正的 .png 文件。

我被困在这里了。欢迎任何建议。

Answer 1

我让你的代码工作如下：

错误：权限“”未知或 URL 模式格式错误。

解决方案：ManifestV3 中的站点/URL 权限使用单独的密钥：host_permissions

• manifest.json

    "host_permissions": ["http://*/*", "https://*/*"],    
    "permissions": [  
        "notifications",
        "activeTab",
         "downloads"
     ],
  

事件处理程序中的错误：ReferenceError：浏览器未在 takeScreenshotAndSave 处定义

解决方案：在您的函数 takeScreenshotAndSave() 中将浏览器替换为 chrome：

• 背景.js

    function takeScreenshotAndSave(){
      chrome.tabs.captureVisibleTab({ format: "png" })
        .then(screenshotUrl => {
           console.log("Screenshot URL:", screenshotUrl);
           const filename = `Capture-snapshot${Date.now()}-visible-1.png`;
           chrome.downloads.download({
              url: screenshotUrl,
              filename: filename,
              conflictAction: "uniquify",
            });
    })
    .catch(error => {
      console.error("Error taking screenshot:", error);
    });
  

  }