It overrides resources, JS, CSS, Image, and fonts, of a website with the copies from a local web server.

Latest Version

Version

2.4

Update

April 24, 2024

Size

48.97KiB

Developer

Web Mask Extension

It enables you to

- Debug a remote web site, for which source map is usually disabled, with your local web server
- Test your local changes with actual data from remote servers - integration test before pull request

The idea and its implementation are based on HTTP and HTML web standards, independent to the framework of your choice, with the following constraints:

- It doesn't work with `document.write()`
- \"Bypass for network\" for service workers. See screenshots for instruction.
- Web socket is not redirected, i.e. Hot module reload (hmr) or live reload doesn't work unless you can force their origin to localhost

It's similar to \"Resource Override\", but built for Manifest V3, and easy to integration into automated tests. See

- Resource Override, https://chrome.google.com/webstore/detail/resource-override/pkoacgokdfckfpndoffpifphamojphii
- Manifest V2 support timeline, https://developer.chrome.com/docs/extensions/develop/migrate/mv2-deprecation-timeline
- Test automation examples, https://github.com/renfeng/web-mask/tree/master/test/specs

Tests (in alphabetic order)

- An Angular website: https://material.angular.io/
- Source code: https://github.com/angular/material.angular.io
- Successful. Automated.
- A React website: https://reactjs.org/
- Source code: https://github.com/reactjs/reactjs.org
- Successful. Automated.
- A Vue.js website: https://vuejs.org/
- Source code: https://github.com/vuejs/docs
- Successful. Automated.

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "Web Mask", "description": "It overrides resources, JS, CSS, Image, and fonts, of a website with the copies from a local web server.", "version": "2.4", "icons": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png" }, "action": { "default_popup": "popup.html" }, "background": { "service_worker": "background.js" }, "content_scripts": [ { "matches": ["*://*/*"], "js": ["content.js"], "all_frames": true } ], "web_accessible_resources": [ { "matches": ["*://*/*"], "resources": ["page.js"] } ], "permissions": ["declarativeNetRequestWithHostAccess", "webRequest"], "host_permissions": ["*://*/*"]}

Download CRX(48.97KiB)