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.
1.4 KiB
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
- Clone this repository.
- Load this directory in Chrome as an unpacked extension.
- 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.
- The extension will provide an estimated reading time for the text in that article element. Here is the link for the full instructions.