开发Chrome扩展读取自定义.uif文件类型的技术求助

一、Windows系统关联.uif文件到Chrome #

无需额外编写exe，直接通过注册表将.uif文件默认打开程序指向Chrome，同时让Chrome调用你的扩展处理文件：

1. 打开注册表编辑器（运行regedit），定位到HKEY_CLASSES_ROOT\.uif
2. 将默认值设为UIFFile（自定义文件类型标识）
3. 新建路径HKEY_CLASSES_ROOT\UIFFile\shell\open\command，把默认值改为：

   "C:\Program Files\Google\Chrome\Application\chrome.exe" --profile-directory=Default --app-id=你的扩展ID "%1"
   

   替换你的扩展ID为你扩展打包后的实际ID，开发阶段可用临时ID测试。

二、Chrome扩展核心实现 #

1. Manifest配置（manifest.json） #

声明必要权限与文件处理规则：

{
  "manifest_version": 3,
  "name": "UIF文件处理器",
  "version": "1.0",
  "permissions": ["file://*/*", "storage"],
  "file_handlers": [
    {
      "action": "/compiler.html",
      "accept": {
        "application/x-uif": [".uif"]
      },
      "launch_type": "single_client"
    }
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["file://*/*"],
      "js": ["content.js"]
    }
  ]
}

2. 处理双击打开的文件（background.js） #

监听Chrome的文件启动事件，获取内容并传递给编译器页面：

chrome.fileHandlers.onLaunched.addListener(async (launchData) => {
  for (const file of launchData.files) {
    const fileBlob = await file.getFile();
    const content = await fileBlob.text();
    chrome.tabs.create({
      url: `/compiler.html?content=${encodeURIComponent(content)}`
    });
  }
});

3. 处理网页中的<a href="file.uif">链接（content.js） #

拦截本地HTML页面的uif链接，读取文件并跳转至编译器：

document.addEventListener('click', async (e) => {
  const link = e.target.closest('a');
  if (!link || !link.href.endsWith('.uif')) return;
  
  e.preventDefault();
  const filePath = link.href.replace('file:///', '');
  chrome.runtime.sendMessage({ type: 'readUifFile', path: filePath }, (response) => {
    if (response.content) {
      window.open(`chrome-extension://${chrome.runtime.id}/compiler.html?content=${encodeURIComponent(response.content)}`);
    }
  });
});

同时在background.js中添加消息监听：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'readUifFile') {
    fetch(`file:///${message.path}`)
      .then(res => res.text())
      .then(content => sendResponse({ content }))
      .catch(err => sendResponse({ error: err.message }));
    return true; // 标记异步响应
  }
});

4. 编译器页面（compiler.html） #

接收文件内容并调用你的JS编译器处理：

<!DOCTYPE html>
<html>
<body>
  <div id="output"></div>
  <script>
    const params = new URLSearchParams(window.location.search);
    const content = params.get('content');
    if (content) {
      // 替换为你的编译器处理函数
      const result = yourUIFCompiler(decodeURIComponent(content));
      document.getElementById('output').textContent = result;
    }
  </script>
</body>
</html>

注意事项 #

• 远程网页（非file://协议）中的本地文件链接会被Chrome安全策略拦截，这是浏览器固有安全限制，无法绕过。
• 开发阶段可通过Chrome开发者模式加载扩展，打包后可本地安装或发布到应用商店。
• 注册表修改需管理员权限，也可编写.reg文件批量配置，方便部署。

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