react-scan icon indicating copy to clipboard operation
react-scan copied to clipboard

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

Open pivanov opened this issue 2 months 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