如何为自定义路由添加.html格式的URL后缀？

嘿，这个需求其实挺常见的，我来给你拆解几种不同场景下的实现方式，你可以根据自己的扩展类型来选：

这应该是最常见的Web扩展场景了，有两种简单的实现方式：

• 直接修改路由定义：把原来的/myroute/直接改成/myroute.html就行，代码示例：

app.get('/myroute.html', (req, res) => {
  // 这里写你的路由处理逻辑，比如返回页面或数据
  res.render('myroute-page');
});

• 兼容原路由同时支持.html后缀：如果你想让/myroute和/myroute.html都能访问，可以用正则匹配路由：

// 问号表示.html是可选的
app.get('/myroute(.html)?', (req, res) => {
  // 统一的处理逻辑
  res.render('myroute-page');
});

浏览器扩展的路由配置分两种情况：

• 静态页面路由：如果你的扩展里有对应的静态myroute.html文件，直接修改manifest.json里的配置，比如在web_accessible_resources中添加该文件，或者如果是覆盖浏览器默认页面（比如新标签页），修改chrome_url_overrides的路径为myroute.html即可。
• 动态路由逻辑：如果是用背景脚本处理路由请求，在消息监听里判断路径是否带.html，或者直接修改跳转逻辑：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.targetRoute === '/myroute.html') {
    // 比如打开扩展内的对应页面
    chrome.tabs.create({ url: chrome.runtime.getURL('myroute.html') });
    sendResponse({ status: 'success' });
  }
});

以WordPress为例，需要通过重写规则来实现：

• 在扩展的主文件里添加路由重写规则：

function register_my_html_route() {
    add_rewrite_rule(
        '^myroute.html/?$', // 匹配带.html后缀的路径
        'index.php?custom_route=myroute', // 替换成你的自定义查询参数或页面ID
        'top'
    );
}
add_action('init', 'register_my_html_route');

• 写完代码后，记得去WordPress后台的「设置→固定链接」页面，随便点一下保存按钮，刷新路由规则，不然新规则不会生效。

几个通用注意点 #

• 修改完路由后，一定要清除浏览器缓存，不然可能还是会跳转到旧的路由地址。
• 如果是部署在服务器上的扩展，还要检查服务器配置（比如Nginx/Apache），确保不会把带.html的路由当成静态文件解析，必要时要添加对应的重写规则。

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