自定义文件类型(.custom)无法触发Chrome Content script加载的解决方法

要实现.custom文件在Chrome中自动打开而非下载，并加载指定的Content Script，需要借助Chrome扩展Manifest V3的file_handlers特性，以下是具体步骤：

1. 配置扩展Manifest文件 #

在manifest.json中添加file_handlers字段，声明扩展可处理的.custom文件类型，同时配置Content Script的注入规则：

{
  "manifest_version": 3,
  "name": "Custom File Handler",
  "version": "1.0",
  "file_handlers": [
    {
      "action": "/handle-custom-file.html",
      "accept": {
        "application/x-custom": [".custom"]
      },
      "icons": {
        "16": "icons/icon16.png",
        "48": "icons/icon48.png",
        "128": "icons/icon128.png"
      },
      "name": "Custom File Viewer"
    }
  ],
  "content_scripts": [
    {
      "matches": ["chrome-extension://<你的扩展ID>/handle-custom-file.html"],
      "js": ["content-script.js"],
      "run_at": "document_start"
    }
  ],
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

• file_handlers.accept：指定MIME类型和对应的文件后缀，这里application/x-custom是自定义的MIME类型，对应.custom后缀。
• content_scripts.matches：替换<你的扩展ID>为实际的扩展ID，确保Content Script能注入到处理文件的页面。

2. 创建文件处理页面 #

新建handle-custom-file.html，作为Chrome打开.custom文件时加载的页面：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Custom File Viewer</title>
</head>
<body>
  <div id="file-container"></div>
  <script src="file-processor.js"></script>
</body>
</html>

3. 编写文件读取脚本 #

新建file-processor.js，通过Launch Handler API获取并读取打开的.custom文件：

// 处理文件启动事件
window.launchQueue.setConsumer(async (launchParams) => {
  // 遍历打开的文件（支持批量打开）
  for (const fileHandle of launchParams.files) {
    const file = await fileHandle.getFile();
    // 根据文件类型选择读取方式，这里以文本为例
    const content = await file.text();
    document.getElementById('file-container').textContent = content;
  }
});

4. 编写Content Script #

新建content-script.js，编写你需要在文件打开时自动执行的逻辑：

console.log('Content Script已加载，开始处理.custom文件');
// 这里添加你的业务逻辑，比如修改页面样式、解析文件内容等
document.body.style.backgroundColor = '#f0f0f0';

5. 配置Chrome默认打开方式 #

• 安装扩展后，找到一个.custom文件，双击打开。
• Chrome会弹出“打开方式”对话框，选择你创建的Custom File Viewer扩展。
• 勾选“始终使用此应用打开.custom文件”，点击“确定”。

之后所有.custom文件都会自动在Chrome中通过你的扩展打开，同时Content Script会自动加载执行。

注意事项 #

• 必须使用Manifest V3，file_handlers是V3专属特性，V2不支持。
• 扩展需以开发者模式安装（已解压的扩展）或发布到Chrome商店，未打包的临时扩展可能存在权限限制。
• 如果需要处理二进制格式的.custom文件，可将file.text()替换为file.arrayBuffer()进行读取。

内容的提问来源于stack exchange，提问作者Sanjay Sudheer