Web Mask
It overrides resources, JS, CSS, Image, and fonts, of a website with the copies from a local web server.
What is Web Mask?
Web Mask is a Chrome extension developed by Frank Ren, and its main feature is "It overrides resources, JS, CSS, Image, and fonts, of a website with the copies from a local web server.".
Extension Screenshots
Download Web Mask Extension CRX File
Download Web Mask extension files in crx format, manually install Chrome extensions in the browser, or share the crx files with friends to easily install Chrome extensions.
Extension Usage Instructions
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()`
* The local web server must include HTTP response header, Access-Control-Allow-Origin:*
* "Bypass for network" for service workers. See screenshots for instruction.
It's similar to "Resource Override", but it requires a minimum configuration, it is built for Manifest V3, and it is test automation friendly. See
* https://chrome.google.com/webstore/detail/resource-override/pkoacgokdfckfpndoffpifphamojphii
* https://developer.chrome.com/docs/extensions/mv3/mv2-sunset/
Tests (in alphabetic order)
* Successful. Manual.
* Target website: https://angular.io/
* Source code: https://github.com/angular/angular
* Successful. Automated.
* Target website: https://material.angular.io/
* Source code: https://github.com/angular/material.angular.io
* Not supported. The local web server doesn't include the HTTP response header, Access-Control-Allow-Origin:*
* Target website: https://reactjs.org/
* Source code: https://github.com/reactjs/reactjs.org
* Successful. Automated.
* Target website: https://vuejs.org/
* Source code: https://github.com/vuejs/docs Extension Basic Information
| Name |  Web Mask |
| ID | cnglippokopaohjfeejlkblfjnekojia |
| Official URL | https://chromewebstore.google.com/detail/web-mask/cnglippokopaohjfeejlkblfjnekojia |
| Description | It overrides resources, JS, CSS, Image, and fonts, of a website with the copies from a local web server. |
| File Size | 28.1 KB |
| Installation Count | 45 |
| Current Version | 2.1 |
| Last Updated | 2023-05-25 |
| Publish Date | 2022-09-07 |
| Rating | 5.00/5 Total 1 Ratings |
| Developer | Frank Ren |
| [email protected] | |
| Payment Type | free |
| Extension Website | https://github.com/renfeng/web-mask |
| Help Page URL | https://github.com/renfeng/web-mask |
| Supported Languages | en-GB |
| 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.1",
"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": [
"*:\/\/*\/*"
]
} | |
