Files
Oliver Dunk b55612ae64 Handle SPA navigations in reading time example. (#1496)
In the move to new infrastructure for https://developer.chrome.com/, the
site became an SPA which can soft navigate outside of browser
navigations. Therefore, we need to update the sample to watch for
changes to content after the content script is injected.
2025-06-23 09:34:53 +02:00
..

Tutorial: Run scripts on every page

This sample demonstrates how to run scripts on any Chrome extension and Chrome Web Store documentation page using an extension called Reading Time.

Overview

This sample demonstrates how developers can use content scripts which employ Document Object Models to read and change the content of a page. In this instance, the extension checks to find an article element, counts all the words inside of it, and then creates a paragraph that estimates the total reading time for that article.

As https://developer.chrome.com/ is a SPA (Single Page Application) it also includes an example of how to use MutationObserver to watch for changes to article content. Using MutationObserver can have a performance cost, so use them sparingly and only observe the most relevant changes.

Running this extension

  1. Clone this repository.
  2. Load this directory in Chrome as an unpacked extension.
  3. Navigate to a Chrome extension or Chrome Webstore documentation page with an article element. Here is an example of a webpage with an article element.
  4. The extension will provide an estimated reading time for the text in that article element. Here is the link for the full instructions.