Chrome扩展开发：点击扩展按钮如何获取指定HTML标签内部代码？

code参数核心内容 #

填入的脚本需要完成「标红元素识别、内部HTML收集、结果返回」三个核心步骤，完整代码如下：

const collectedTargets = [];
/**
 * 识别标红元素的通用逻辑
 * 兼容内联样式、CSS类定义的文本标红/背景标红场景
 */
const checkRedMark = (element) => {
  const computedStyle = getComputedStyle(element);
  // 解析RGB颜色值的工具方法
  const extractRGB = (colorVal) => {
    const regRes = colorVal.match(/rgb\((\d+),\s*(\d+),\s*(\d+)/);
    return regRes ? { r: +regRes[1], g: +regRes[2], b: +regRes[3] } : null;
  };
  const textColor = extractRGB(computedStyle.color);
  const bgColor = extractRGB(computedStyle.backgroundColor);
  // 判定红色系：R值大于200，G、B值小于80，覆盖绝大多数页面标红的色彩范围
  const isRedText = textColor?.r > 200 && textColor.g < 80 && textColor.b < 80;
  const isRedBg = bgColor?.r > 200 && bgColor.g < 80 && bgColor.b < 80;
  // 可选优化：跳过嵌套在标红元素内部的子元素，避免重复收集
  // if (element.parentElement && checkRedMark(element.parentElement)) return false;
  return isRedText || isRedBg;
};
// 遍历当前文档下所有DOM元素
document.querySelectorAll('*').forEach((el) => {
  if (checkRedMark(el)) {
    collectedTargets.push({
      tag: el.tagName.toLowerCase(),
      innerHTML: el.innerHTML,
      frameUrl: window.location.href // 记录元素所在的嵌套文档地址
    });
  }
});
// 返回收集结果，会作为executeScript的执行结果传入downloadFiles回调
return collectedTargets;

关键补充配置 #

注意：仅编写code逻辑无法抓取iframe内的元素，必须补充allFrames: true配置，否则脚本只会在主文档作用域执行，完全访问不到嵌套HTML文档的DOM。
需要在chrome.tabs.executeScript的配置对象中补充两个参数，适配嵌套文档的抓取需求：

• allFrames: true：允许脚本在主文档、所有嵌套iframe文档内同步执行
• matchAboutBlank: true：可选配置，若嵌套iframe为about:blank类型且内部有动态渲染的内容，需要开启该权限

调整后的完整调用片段：

chrome.tabs.executeScript(
  tabs[0].id,
  {
    code: `// 把上面写的收集脚本放在这里`,
    allFrames: true,
    matchAboutBlank: true
  },
  downloadFiles
);

定制化调整提示 #

• 如果页面的标红元素是通过统一CSS类标记的（比如类名highlight-red），可以将checkRedMark的判断逻辑替换为return element.classList.contains('highlight-red')，匹配精度和运行效率会更高
• 若需要获取元素连同自身标签的完整HTML片段，可将收集项中的el.innerHTML替换为el.outerHTML
• 若不需要区分元素来源的文档地址，可删除frameUrl字段减少返回数据量

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