Chrome截图录屏扩展如何实现历史文件唤起本地文件资源管理器功能？

核心实现思路 #

要实现类似Chrome自带的"打开文件所在位置"功能，可根据文件的保存方式选择两种方案：

方案一：针对Chrome下载的文件（推荐） #

如果你的截图/录屏文件是通过chrome.downloads.download() API保存的，直接用Chrome提供的chrome.downloads.show()即可唤起系统资源管理器并定位文件。

1. 配置权限
   在manifest.json中添加downloads权限：

{
  "permissions": ["downloads"]
}

2. 调用API打开文件
   点击"打开文件"按钮时，传入文件的downloadId或路径：

// 已知downloadId的情况
chrome.downloads.show(yourDownloadId, (err) => {
  if (err) console.error('打开失败:', err);
});

// 仅知道文件路径的情况
chrome.downloads.search({path: yourFilePath}, (results) => {
  if (results.length > 0) {
    chrome.downloads.show(results[0].id);
  }
});

方案二：针对任意本地文件路径 #

如果文件不是通过Chrome下载的，需通过**原生消息（Native Messaging）**调用系统命令实现：

1. 配置原生消息主机
   创建JSON配置文件（如com.your.extension.fileopener.json），放置到系统指定目录：

{
  "name": "com.your.extension.fileopener",
  "description": "Open file explorer to target path",
  "path": "path/to/your/script", // 指向你的原生脚本
  "type": "stdio",
  "allowed_origins": ["chrome-extension://YOUR_EXTENSION_ID/"]
}

替换YOUR_EXTENSION_ID为你的扩展ID，path为对应系统的脚本路径。

2. 编写原生脚本
   根据操作系统编写对应脚本：

• Windows（批处理文件）：

@echo off
explorer.exe /select,"%~1"

• macOS（Shell脚本）：

#!/bin/bash
open -R "$1"

• Linux（Shell脚本）：

#!/bin/bash
xdg-open "$(dirname "$1")"
# 或用nautilus直接定位：nautilus --select "$1"

3. 扩展中调用原生消息
   在扩展脚本中发送消息给原生主机：

document.querySelector('.open-btn').addEventListener('click', () => {
  const targetPath = "/path/to/your/file.png"; // 替换为实际路径
  chrome.runtime.sendNativeMessage(
    'com.your.extension.fileopener',
    {path: targetPath},
    (response) => {
      if (chrome.runtime.lastError) {
        console.error('调用失败:', chrome.runtime.lastError);
      }
    }
  );
});

同时在manifest.json中添加nativeMessaging权限：

{
  "permissions": ["nativeMessaging"]
}

历史记录功能补充 #

1. 存储历史记录
   用chrome.storage.local保存每条记录的关键信息：

// 新增一条记录
chrome.storage.local.get('history', (data) => {
  const historyList = data.history || [];
  historyList.unshift({
    id: Date.now(),
    filename: "screenshot_20240520.png",
    path: "/Users/xxx/Downloads/screenshot_20240520.png",
    timestamp: Date.now(),
    downloadId: 123 // 可选，仅当通过下载API保存时使用
  });
  chrome.storage.local.set({history: historyList});
});

2. 渲染历史列表
   从存储中读取数据，生成DOM条目，为每个条目绑定"打开文件"按钮的点击事件即可。

内容的提问来源于stack exchange，提问作者LNNY DONY