如何在Chrome/Firefox扩展中实现类Electron的请求响应式自定义协议？

首先明确：完全可以通过浏览器扩展实现，不需要修改浏览器源码。navigator.registerProtocolHandler确实不符合你的需求——它只是把协议请求转发给外部应用或指定网页，而你需要的是在浏览器内部拦截请求、动态生成响应并直接渲染的请求-响应机制，这可以通过Chrome和Firefox的扩展API来实现。

Chrome 实现方案 #

Chrome扩展可以通过webRequest API拦截自定义协议的请求，然后重定向到动态生成的Blob URL来返回内容。以下是具体步骤：

1. 配置Manifest文件（Manifest V3） #

{
  "manifest_version": 3,
  "name": "Custom Protocol Handler",
  "version": "1.0",
  "permissions": ["webRequest", "webRequestBlocking"],
  "host_permissions": ["myprotocol://*"],
  "background": {
    "service_worker": "background.js"
  }
}

这里需要声明webRequest和webRequestBlocking权限，以及对自定义协议的主机权限。

2. 后台Service Worker处理请求 #

在background.js中监听自定义协议的请求，生成响应内容并通过Blob URL重定向：

// 拦截myprotocol://开头的所有请求
chrome.webRequest.onBeforeRequest.addListener(
  (details) => {
    const requestedUrl = details.url;
    // 根据请求URL生成对应内容，对应你想要的registerHandler回调逻辑
    const content = generateResponseContent(requestedUrl);
    // 根据URL后缀判断MIME类型
    const contentType = getContentType(requestedUrl);
    
    // 创建Blob并生成可访问的URL
    const blob = new Blob([content], { type: contentType });
    const blobUrl = URL.createObjectURL(blob);
    
    // 重定向到Blob URL，浏览器会直接渲染该内容
    return { redirectUrl: blobUrl };
  },
  { urls: ["myprotocol://*"] },
  ["blocking"]
);

function generateResponseContent(url) {
  if (url.includes('.html')) {
    return `<html><body><h1>Custom Protocol Response</h1><p>You requested: ${url}</p></body></html>`;
  } else if (url.includes('.js')) {
    return `console.log('Loaded from custom protocol: ${url}');`;
  } else if (url.includes('.css')) {
    return `body { background: #f0f0f0; color: #333; font-family: Arial; }`;
  }
  return `Default response for: ${url}`;
}

// 匹配对应的MIME类型，确保浏览器能正确解析内容
function getContentType(url) {
  if (url.includes('.html')) return 'text/html';
  if (url.includes('.js')) return 'application/javascript';
  if (url.includes('.css')) return 'text/css';
  return 'text/plain';
}

Firefox 实现方案 #

Firefox的实现逻辑和Chrome高度兼容，使用browser.webRequest API即可，注意以下细节：

• Manifest文件同样支持V3，后台脚本的声明方式与Chrome一致。
• 拦截规则、Blob URL重定向的逻辑完全复用Chrome的代码即可。

示例后台脚本（Firefox兼容）：

browser.webRequest.onBeforeRequest.addListener(
  (details) => {
    const requestedUrl = details.url;
    const content = generateResponseContent(requestedUrl);
    const contentType = getContentType(requestedUrl);
    
    const blob = new Blob([content], { type: contentType });
    const blobUrl = URL.createObjectURL(blob);
    
    return { redirectUrl: blobUrl };
  },
  { urls: ["myprotocol://*"] },
  ["blocking"]
);

// 复用前面的generateResponseContent和getContentType函数

关键注意事项 #

• 协议命名规范：自定义协议不能与已有的标准协议（如http、https、file）冲突，建议使用独特的名称（比如myprotocol）。
• MIME类型正确性：必须为返回的内容指定正确的MIME类型，否则浏览器无法正确解析渲染（比如HTML要指定text/html，JS要指定application/javascript）。
• Manifest版本：优先使用Manifest V3，它是现代浏览器扩展的标准，安全性和性能更好。
• 权限限制：必须在Manifest中声明足够的权限，否则无法拦截请求。

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