[Reader Mode] Add analysis and visualization tools to the Test Extension.

This CL adds to the Test Extension the following features for analysis
and debugging on the cloned page: Metadata extraction, DOM boxifying,
and a Readability analysis visualizer.

These features provide deeper insight into the distillation process:
* **Extract Metadata**: Displays the raw data parsed by Readability.js
  (e.g., title, byline, excerpt) in a tabular format, for quick
  inspection.
* **Boxify DOM**: Draws an outline around every single element on the
  page. This helps to understand DOM structure by identifying Elements
  large and small, and finding invisible elements that might influence
  layout.
* **Visualize Readability**: Highlights the results of the Readability
  algorithm on the page. Kept elements are green; discarded ones red.
  This provides immediate visual feedback on the algorithm's decisions.

To support an iterative developer workflow (e.g., modifying the DOM via
DevTools and re-running a tool), the visualization features are
idempotent: They clean up any artifacts from their own previous runs
before applying new effects.

Additional refactoring:
* Standardize the messaging protocol (using a `target` field). This was
  necessary to fix a bug where actions on the original page could
  incorrectly trigger listeners on the cloned page.
* Make function naming consistent with commands they handle (e.g.,
  `run[Command]`).
* On the cloned page: Adopt a synchronous, eager-loading script
  strategy. This simplifies the code and improves the debugging workflow
  by allowing developers to set breakpoints in symlinked files (e.g.,
  Readability.js) on page load.

Details:
* Add `metadata.html`, `metadata.js`, `metadata.css`: New pages and
  scripts to display extracted article metadata in a table.
* Add `metadata_processor.js`, `metadata_extractor.js`: Shared modules
  to invoke Readability.js and to extract only the metadata fields.
* Update `cloned.js` to implement client-side logic for the Visualize
  and Boxify features.
* Update `popup.js` to add the "Metadata", "Boxify", and "Visualize"
  buttons to the UI for the cloned page context.
* Update `background.js` to add handlers for the new commands.
* Update `manifest.json` to make all new metadata-related files web
  accessible.
* Update `README.md` to document all the new features and their usage.

Bug: 449799192
Change-Id: Iaed273db770d665782cbe5a3376ff06f50644922
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7042192
Commit-Queue: Samuel Huang <huangs@chromium.org>
Reviewed-by: Brandon Wylie <wylieb@google.com>
Cr-Commit-Position: refs/heads/main@{#1530382}
16 files changed
tree: 0917d755891206ecf00166d10829b654da59be4f
  1. .gemini/
  2. .github/
  3. agents/
  4. android_webview/
  5. apps/
  6. ash/
  7. base/
  8. build/
  9. build_overrides/
  10. buildtools/
  11. cc/
  12. chrome/
  13. chromecast/
  14. chromeos/
  15. codelabs/
  16. components/
  17. content/
  18. crypto/
  19. dbus/
  20. device/
  21. docs/
  22. extensions/
  23. fuchsia_web/
  24. gin/
  25. google_apis/
  26. gpu/
  27. headless/
  28. infra/
  29. ios/
  30. ipc/
  31. media/
  32. mojo/
  33. net/
  34. pdf/
  35. printing/
  36. remoting/
  37. rlz/
  38. sandbox/
  39. services/
  40. skia/
  41. sql/
  42. storage/
  43. styleguide/
  44. testing/
  45. third_party/
  46. tools/
  47. ui/
  48. url/
  49. webkit/
  50. .clang-format
  51. .clang-tidy
  52. .clangd
  53. .cursorignore
  54. .geminiignore
  55. .git-blame-ignore-revs
  56. .gitallowed
  57. .gitattributes
  58. .gitignore
  59. .gitmodules
  60. .gn
  61. .mailmap
  62. .rustfmt.toml
  63. .vpython3
  64. .yapfignore
  65. ATL_OWNERS
  66. AUTHORS
  67. BUILD.gn
  68. CODE_OF_CONDUCT.md
  69. codereview.settings
  70. CPPLINT.cfg
  71. CRYPTO_OWNERS
  72. DEPS
  73. DIR_METADATA
  74. LICENSE
  75. LICENSE.chromium_os
  76. OWNERS
  77. PRESUBMIT.py
  78. PRESUBMIT_test.py
  79. PRESUBMIT_test_mocks.py
  80. README.md
  81. SECURITY_OWNERS
  82. WATCHLISTS
README.md

Logo Chromium

Chromium is an open-source browser project that aims to build a safer, faster, and more stable way for all users to experience the web.

The project's web site is https://www.chromium.org.

To check out the source code locally, don't use git clone! Instead, follow the instructions on how to get the code.

Documentation in the source is rooted in docs/README.md.

Learn how to Get Around the Chromium Source Code Directory Structure.

For historical reasons, there are some small top level directories. Now the guidance is that new top level directories are for product (e.g. Chrome, Android WebView, Ash). Even if these products have multiple executables, the code should be in subdirectories of the product.

If you found a bug, please file it at https://crbug.com/new.