[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}
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.