Content Script Lab

Tune match patterns and run_at, watch the script inject (or not) into a fake page, and see why the isolated world keeps your variables separate from the page's.

1 · Configure the content script

https://shop.example.com/cart
—

example.com — Cart

2 items · $48.00. This is the page's own DOM. A matching content script can read and rewrite it.



    

      document_start
DOM empty
      →
      document_end
DOM parsed
      →
      document_idle
page settled
    

  


  

    
2 · The isolated world

    

      Content script and page share the DOM but have separate JS scopes. A variable set in one
      is invisible to the other — that's the isolated world. Click run.
    

    

      

        
Content script scope

        window.__secret = "from-extension";
const el = document.querySelector("h3");
el.textContent += " ✓ touched";
        
— not run —

      

      

        
Page script scope

        console.log(window.__secret);
// can the page see the extension var?
        
— not run —