Chrome扩展页面内容操控问题求助：多元素处理与显示异常

问题1：Chrome扩展仅修改第一个<p>标签且部分页面不生效 #

1.1 解决仅修改第一个<p>标签的问题 #

原代码用document.querySelector('p')只能获取第一个<p>标签，需改用querySelectorAll遍历所有标签，同时修复模板字符串语法错误（原代码中<strong>${m}</strong>未用反引号包裹）。修改后的content.js：

document.querySelectorAll('p').forEach(container => {
  let newtext = container.innerHTML.split('').map(
    m => Math.random() > .49 ? `<strong>${m}</strong>` : m
  );
  container.innerHTML = newtext.join('');
});

1.2 解决部分页面不生效的问题 #

原manifest.json中run_at设为document_start，此时DOM未完全构建，无法获取到<p>标签。需调整为document_idle（DOM加载完成后执行）：

"content_scripts": [
  {
    "js": ["content.js"],
    "matches": ["<all_urls>"],
    "run_at": "document_idle"
  }
]

若页面是动态加载内容（如SPA），需额外监听DOM变化处理新增的<p>标签：

// 处理现有和新增的<p>标签
function processPTags() {
  document.querySelectorAll('p').forEach(container => {
    let newtext = container.innerHTML.split('').map(
      m => Math.random() > .49 ? `<strong>${m}</strong>` : m
    );
    container.innerHTML = newtext.join('');
  });
}

// 初始DOM加载完成后执行
document.addEventListener('DOMContentLoaded', processPTags);

// 监听DOM变化，处理动态生成的标签
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node.tagName === 'P') processPTags();
      else if (node.querySelectorAll) node.querySelectorAll('p').forEach(processPTags);
    });
  });
});
observer.observe(document.body, { childList: true, subtree: true });

问题2：页面刷新直接显示HTML标签 #

针对页面渲染出<strong>Question</strong>这类原始标签的问题，排查方向如下：

• 检查服务器响应：确认是否将<转义为<、>转义为>，若是则修复服务器输出逻辑，避免HTML标签被转义。
• 检查前端渲染逻辑：若页面是动态渲染，确认是否误用textContent/innerText插入内容，需改为innerHTML解析HTML标签。
• 排查扩展干扰：暂时禁用你的Chrome扩展，若问题消失，检查扩展脚本是否误修改了页面内容的转义逻辑。

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