Chrome扩展能否实现现代风格干净路由及通配路由？

Chrome扩展本身没有原生的通配路由机制，但可以通过以下两种方法实现你要的extension://<扩展ID>/items/(数字)这类美观URL的路由：

方案一：WebRequest拦截重定向（需后台权限） #

适合需要在后台处理路由逻辑的场景：

1. 配置Manifest权限
   在manifest.json中添加所需权限：

   {
     "permissions": ["webRequest", "webRequestBlocking", "extension://lijpcppdcclkfneghlldocanomgeabja/*"],
     "background": {
       "service_worker": "background.js"
     }
   }
   

2. 后台脚本拦截并重定向
   在background.js中监听请求，匹配通配路由后重定向到实际页面，同时传递参数：

   chrome.webRequest.onBeforeRequest.addListener(
     (details) => {
       const match = details.url.match(/extension:\/\/lijpcppdcclkfneghlldocanomgeabja\/items\/(\d+)/);
       if (match) {
         const itemId = match[1];
         return {
           redirectUrl: `extension://lijpcppdcclkfneghlldocanomgeabja/items.html?id=${itemId}`
         };
       }
     },
     { urls: ["extension://lijpcppdcclkfneghlldocanomgeabja/items/*"] },
     ["blocking"]
   );
   

3. 目标页面获取参数
   在items.html中通过查询参数拿到ID，再加载对应内容：

   const params = new URLSearchParams(window.location.search);
   const itemId = params.get('id');
   // 根据ID渲染内容
   

方案二：前端单页路由（无额外权限，推荐） #

纯前端处理，更轻量，适合展示类内容：

1. 设置路由入口页
   创建router.html作为自定义路由的统一入口，在manifest.json中配置可访问权限：

   {
     "web_accessible_resources": [
       {
         "resources": ["router.html", "items.html", "index.html"],
         "matches": ["<all_urls>"]
       }
     ]
   }
   

2. 用History API实现美观URL
   • 打开路由时，先加载router.html再修改URL：

     // 示例：在扩展popup中打开指定路由
     chrome.tabs.create({ url: 'extension://lijpcppdcclkfneghlldocanomgeabja/router.html' }, (tab) => {
       chrome.tabs.executeScript(tab.id, {
         code: `history.pushState({}, '', 'extension://lijpcppdcclkfneghlldocanomgeabja/items/123');`
       });
     });
     

   • 在router.html中监听路由变化，解析路径并加载对应内容：

     function handleRoute() {
       const path = window.location.pathname;
       const itemMatch = path.match(/\/items\/(\d+)/);
       if (itemMatch) {
         const itemId = itemMatch[1];
         // 动态加载items.html内容并渲染
         fetch('items.html')
           .then(res => res.text())
           .then(html => {
             document.body.innerHTML = html;
             window.itemId = itemId; // 传递ID给页面脚本
           });
       } else if (path === '/') {
         // 加载首页内容
         fetch('index.html').then(res => res.text()).then(html => document.body.innerHTML = html);
       }
     }
     
     // 初始加载和路由切换时触发处理逻辑
     window.addEventListener('load', handleRoute);
     window.addEventListener('popstate', handleRoute);
     

   • 若使用Vue、React等框架，可直接用对应路由库（如Vue Router的history模式），只需将路由base路径设为扩展URL即可。

注意事项 #

• 直接在地址栏输入自定义路由URL时，Chrome会默认查找对应文件，这种场景需要配合方案一的WebRequest拦截，将请求重定向到router.html后再由前端路由处理。
• MV3的背景脚本是服务工作者，需注意其生命周期，可通过chrome.runtime.onStartup重新注册监听避免拦截失效。

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