Content scripts
Run code in the page
Use a content script to access the current page DOM while keeping extension JavaScript isolated from page variables.
8 minute lesson
A content script runs alongside a web page and can read and change its DOM. Its JavaScript world is isolated from scripts belonging to the page.
Isolation prevents ordinary variable collisions, but both sides can affect the same DOM. Treat page content as untrusted and avoid exposing extension secrets or privileged APIs through inserted elements.
The script has only a subset of extension APIs. When it needs privileged work, it should send a narrow request to the service worker or extension page rather than injecting credentials or a broad bridge into the page. Likewise, code executed in the page’s main world does not gain extension APIs.
The shared DOM is an attack and compatibility surface. The page can remove injected nodes, imitate your CSS classes, observe text you insert, and trigger ordinary DOM events. Use namespaced attributes and avoid placing private extension state in attributes or hidden elements.
Frames matter too. A script running in the top frame does not automatically describe every iframe, and broad frame injection increases authority. Page Notes only needs the top document, so keep that scope explicit.
Create content.js that marks the document with a namespaced data attribute without overwriting an existing value. Inspect the page console and Sources panel, then let page code remove the attribute and confirm the extension fails safely rather than treating DOM presence as trusted state.
Lesson completed