修改JS浏览器扩展HTML解析器以排除图片的技术咨询

helpers["readability"]的作用 #

这个方法是封装了Mozilla Readability库的调用，核心功能是从网页中提取最有价值的核心内容（比如文章正文、标题、作者等），自动过滤导航栏、广告、侧边栏这类冗余元素，生成干净的结构化内容，是你用扩展生成EPUB时的核心内容提取逻辑。

排除标签的可行方案 #

方案1：通过Readability配置直接过滤（优先尝试） #

如果扩展允许在调用helpers["readability"]时传入配置参数，你可以利用Readability原生配置项屏蔽图片：

// 调用时添加blockedTags配置
const parsedContent = helpers["readability"](document, {
  blockedTags: ["img"] // 指定要排除的标签
});

或者用transform回调在解析前预处理DOM：

const parsedContent = helpers["readability"](document, {
  transform: (doc) => {
    // 移除所有img标签
    doc.querySelectorAll("img").forEach(img => img.remove());
    return doc;
  }
});

方案2：预处理DOM后再调用readability #

如果找不到readability的配置入口，就在调用它之前手动清理页面中的图片：

// 克隆原文档，避免修改实际网页
const cleanDoc = document.cloneNode(true);
// 移除克隆文档里的所有img标签
cleanDoc.querySelectorAll("img").forEach(img => img.remove());
// 用清理后的文档调用readability
const parsedContent = helpers["readability"](cleanDoc);

方案3：后处理解析结果 #

如果扩展逻辑是先调用readability再让你修改，那就拿到解析后的内容再移除图片：

const parsedContent = helpers["readability"](document);
// 把解析后的HTML放到临时容器里处理
const tempContainer = document.createElement("div");
tempContainer.innerHTML = parsedContent.content;
// 移除所有img标签
tempContainer.querySelectorAll("img").forEach(img => img.remove());
// 更新解析结果的内容
parsedContent.content = tempContainer.innerHTML;

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