从0到1掌握DOM Distiller：Chrome阅读器模式核心技术完全指南

从0到1掌握DOM Distiller：Chrome阅读器模式核心技术完全指南

【免费下载链接】dom-distillerDistills the DOM项目地址: https://gitcode.com/gh_mirrors/do/dom-distiller

DOM Distiller是Chrome阅读器模式的核心技术，它通过提取网页核心文本并剥离非必要内容，为文章和类文章网页提供更优质的阅读体验。作为开源项目，它不仅驱动着Chrome Android和桌面版的阅读器模式，还支持Chrome iOS上的阅读列表功能，是提升网页阅读体验的终极解决方案。

📚 什么是DOM Distiller？

DOM Distiller本质上是一个网页内容提炼工具，它能够智能识别网页中的核心内容（如文章正文、图片），并过滤掉广告、导航栏、侧边栏等干扰元素。该项目松散基于"Boilerpipe"技术开发，专注于提供简洁、专注的阅读环境。

目前，DOM Distiller已被广泛应用于多个项目和功能中：

• Chrome Android和桌面版的阅读器模式
• Chrome iOS上的阅读列表功能

🚀 如何在Chrome中使用阅读器模式？

安卓设备使用方法

阅读器模式已在Android版Chrome中正式发布，任何更新到最新版本的Chrome都能使用：

1. 访问非移动友好的文章页面
2. 当屏幕底部出现"显示简化视图"信息栏时，点击它即可
3. 如需启用该功能，可能需要先在辅助功能设置中开启

桌面版Chrome使用步骤

桌面版Chrome的阅读器模式仍在开发中（截至M80版本），可通过以下步骤激活实验性预览：

1. 打开桌面版Chrome浏览器
2. 导航至chrome://flags，使用页面内搜索框搜索"enable-reader-mode" 或者直接访问chrome://flags#enable-reader-mode
3. 点击下拉框并选择"已启用"
4. 出现提示时点击页面底部的"立即重启"
5. 访问文章或类文章页面，地址栏会出现阅读器模式图标，点击即可进入

🔍 DOM Distiller的核心技术原理

DOM Distiller的工作流程主要包括以下几个关键步骤：

1. 内容提取

DOM Distiller通过分析网页DOM结构，识别并提取核心内容块。这一过程主要由java/org/chromium/distiller/extractors/ArticleExtractor.java实现，它使用多种启发式算法来区分内容和非内容元素。

2. 内容过滤

提取内容后，系统会应用一系列过滤器去除冗余信息。关键过滤器包括：

• BoilerplateBlockFilter.java：过滤样板内容
• MinWordsFilter.java：过滤字数过少的内容块
• KeepLargestBlockFilter.java：保留最大的内容块

3. 内容优化

最后，系统会对提取的内容进行优化，包括：

• 标题识别与提取
• 段落重组
• 图片优化
• 格式标准化

💻 如何搭建DOM Distiller开发环境？

前提条件

在开始之前，确保安装以下依赖：

• Google Chrome浏览器
• Git工具

获取代码

1. 切换到你想要存放代码的目录（不要放在Chromium主 checkout 目录内）
2. 克隆仓库：

   git clone https://gitcode.com/gh_mirrors/do/dom-distiller

3. 代码将位于新创建的dom-distiller文件夹中

安装git hooks

进入项目目录并运行：

./create-hook-symlinks

Ubuntu/Debian系统额外步骤

在dom-distiller文件夹中运行：

sudo ./install-build-deps.sh

Mac OS X系统额外步骤

1. 安装JDK 7
2. 安装Homebrew
3. 使用Homebrew安装必要工具：

   brew install ant python brew install protobuf --with-python

4. 安装Python依赖：

   sudo easy_install pip pip install --user selenium

🔨 构建与测试DOM Distiller

DOM Distiller使用ant作为构建工具，所有可用目标可以通过ant -p列出。

常用构建命令

• ant test：运行所有测试
• ant gwtc：将.class和.java文件编译为JavaScript，生成的独立JavaScript位于war/domdistiller/domdistiller.nocache.js
• ant extractjs：创建独立JavaScript文件，输出到out/domdistiller.js
• ant package：将主要构建产物复制到out/package文件夹

运行测试

可以使用以下命令运行特定测试：

ant test -Dtest.filter=*.FilterTest.*:*Foo*-*Bar*

🐞 调试DOM Distiller

交互式调试

使用Chrome开发者工具调试DOM Distiller：

1. 运行ant extractjs.jstests或ant test更新测试JavaScript
2. 在Chrome中打开war/test.html
3. 打开开发者工具的"Console"面板（Ctrl-Shift-J或Cmd-Option-I）
4. 运行所有测试：

   org.chromium.distiller.JsTestEntry.run()

5. 运行特定测试：

   org.chromium.distiller.JsTestEntry.runWithFilter('MyTestClass.testSomething')

开发者扩展

ant package会在out/extension下生成一个未打包的Chrome扩展，添加方法如下：

1. 访问chrome://extensions
2. 启用开发者模式
3. 选择加载已解压的扩展，并指向out/extension文件夹

该扩展支持分析提取代码，并在开发者工具中添加了一个面板，可用于在被检查的页面上触发提取。

🤝 贡献代码

DOM Distiller使用Chromium的协作工具，代码审查托管在Chromium Gerrit上。贡献代码前需要安装depot_tools。

代码格式化

提交代码前，请运行以下命令以遵循DOM Distiller的代码格式指南：

git cl format

提交变更

1. 创建新的本地分支并提交更改
2. 运行git cl upload将更改上传到Chromium Gerrit
3. 等待审核通过后，点击"Submit to CQ"合并更改

📝 常见问题解答

如何报告bug？

bug和功能请求在Chromium的issue跟踪器中进行跟踪，DOM Distiller的bug请提交到component:UI>Browser>ReaderMode。

应报告的bug类型包括：

• 崩溃、错误页面和其他类似技术问题
• 提取质量差，如非必要图片或缺失文本
• 阅读器模式在不应出现的页面上提供（如登录页面），或在应出现的页面上不提供（如新闻文章）

如何在Chrome中运行DOM Distiller？

1. 设置环境变量：

   export CHROME_SRC=/path/to/chromium/src export DOM_DISTILLER_DIR=/path/to/dom-distiller

2. 运行ant package并将生成的文件复制到Chrome中
3. 构建并运行Chrome：

   autoninja -C out/Debug chrome && out/Debug/chrome --enable-dom-distiller

通过以上指南，你现在已经掌握了DOM Distiller的核心概念、使用方法和开发流程。无论是作为普通用户享受更优质的阅读体验，还是作为开发者参与项目贡献，DOM Distiller都为你提供了简单而强大的工具和技术。开始探索这个令人惊叹的项目，体验网页内容提炼的强大能力吧！

【免费下载链接】dom-distillerDistills the DOM项目地址: https://gitcode.com/gh_mirrors/do/dom-distiller