浏览器搜索折叠<details>标签内容能否自动展开？Firefox适配方案咨询

现象说明 #

• Chromium（128）、Edge：使用Ctrl-F（Mac为Cmd-F）搜索折叠<details>标签内的文本时，可正常匹配内容，自动展开对应标签并定位到目标位置
• Firefox（115、131）、Safari：无法搜索到折叠<details>内的内容，搜索框会显示未找到目标文本

Firefox相关配置说明 #

目前Firefox没有内置的配置选项可以直接开启搜索折叠<details>标签内容的功能，官方未提供此类设置项。

自行实现方案 #

可以通过自定义用户脚本捕获搜索触发事件，先展开所有<details>标签再执行搜索，具体实现如下：

脚本实现示例（适用于油猴类插件） #

// ==UserScript==
// @name         展开Details支持内置搜索
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 监听搜索快捷键触发事件
    document.addEventListener('keydown', function(e) {
        if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
            // 遍历并展开所有details标签
            document.querySelectorAll('details').forEach(detail => {
                detail.open = true;
            });
        }
    });
})();

补充说明 #

• 该脚本会在用户按下搜索快捷键时，自动展开页面所有折叠的<details>元素，确保浏览器内置搜索能检索到原本隐藏的内容
• 若需要更精细化控制（比如仅展开包含搜索结果的标签），需要结合搜索结果的检测逻辑，实现复杂度会相应提升

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