react-scan
react-scan copied to clipboard
feat: load scan-dist or any other script unpkg or from specific domains
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 theContent-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