The extension allows the user to manage request headers/query params that will be injected into requests made when viewing a website in chrome, where each override contains the following properties:
- Header/Query Param: Header key.
- Header/Query Param Value: Value associated with the header key.
- AJAX Request URL sub-string: The header name: value will only be applied to XHR/Fetch requests where the external request URL contains the provided substring.
The headers/query param overrides are managed in the chrome extension popup (a simple react app), and saved to chrome local storage and are applied to upstream page requests using the chrome declarativeNetRequest request dynamic rules updateDynamicRules function.
- Run
npm install
to install the dependencies. - Run
npm start
- Load your extension on Chrome following:
- Access
chrome://extensions/
- Check
Developer mode
- Click on
Load unpacked extension
- Select the
build
folder.
- Access
After the development of your extension run the command
$ NODE_ENV=production npm run build
Now, the content of build
folder will be the extension ready to be submitted to the Chrome Web Store. Just take a look at the official guide to more infos about publishing.
Source | Description |
---|---|
chrome-extension-boilerplate-react | A React Chrome Extension Boilerplate template used for the http request header override extension project |
Chrome Extension documentation | Main Google Docs for developing Chrome Extensions |
Mozilla Todo React App Example | Used as a basis for the request header react app |
Paul Beauchamp | Website