react-scan icon indicating copy to clipboard operation
react-scan copied to clipboard
Published 4 months ago • verified publisher icon aidenybai

feat: load scan-dist or any other script unpkg or from specific domains

Open pivanov opened this issue 1 year ago • 3 comments

This PR introduces the ability to dynamically inject external scripts required for the "React Scan" extension to function while adhering to the target website's CSP (Content Security Policy) restrictions. It achieves this using declarativeNetRequest rules to modify headers and a caching mechanism for efficient script injection.

Proposed Solution

1. CSP Header Removal

  • Added declarative rules in rules.json to remove the Content-Security-Policy header for trusted domains:
    • files-sashido.cloud //for testing purpose only
    • unpkg.com/react-scan
  • Utilized the declarativeNetRequest API to dynamically apply these rules without modifying the web pages themselves.

2. Dynamic Script Injection with Caching

  • Implemented a caching mechanism using the Cache Storage API to fetch and store required scripts locally, improving performance and minimizing network requests.
  • Dynamically injected the scripts into the target page as inline <script> tags, bypassing CSP restrictions.
  • Added logic to reload the page when scripts are fetched for the first time to ensure immediate execution of the injected scripts.

Note: We should use better way to sync the state between background worker, content script, injected script, popup and eventually sideBar ... I have some ideas but let's first see if this one is OK :)

https://github.com/user-attachments/assets/dfb2d971-841c-418a-9d6b-32c2cd152829

pivanov avatar Dec 02 '24 01:12 pivanov

@pivanov is attempting to deploy a commit to the Million Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] avatar Dec 02 '24 01:12 vercel[bot]

you're awesome, thank you. 1 request if you have time, can you make it more react-scan themed? (black + purple) @pivanov

aidenybai avatar Dec 02 '24 01:12 aidenybai

you're awesome, thank you. 1 request if you have time, can you make it more react-scan themed? (black + purple) @pivanov

Sure ... what do you mean with (black + purple)? The UI of the popup screan or something else?

pivanov avatar Dec 02 '24 01:12 pivanov

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-scan ✅ Ready (Inspect) Visit Preview 💬 Add feedback Dec 5, 2024 0:57am

vercel[bot] avatar Dec 04 '24 21:12 vercel[bot]

Video for 770d7d7dd102c37ee79685cee70226c9cea12238

https://u.pcloud.link/publink/show?code=XZohC05ZX6MohonhPtXDvEYK3i8UauHIOWxk

pivanov avatar Dec 04 '24 23:12 pivanov

lgtm!

aidenybai avatar Dec 05 '24 10:12 aidenybai