This demo shows off the core features of web accessible resources.
In this demo we have 4 images (test1.png, etc.) that we want to expose on
2 different websites. Each website should only be able to load two
specific images, but both websites will attempt to access all 4 images. To
do this, we define a set of
"web_accessable_resources"
in our manifest.json. This object specifies
what assets should be accessible to which external resources.
The first image on each site is statically referenced by the site using a
URL in the following format:
chrome-extension://<extension-id>/<image-path>. The
second image on each site will only be injected into the page when you
click the "Load images" button for that page. This injection is performed
by using
chrome.runtime.getURL()
to build the image's URL at runtime.
| File | Target domain | Injection method |
|---|---|---|
test1.png
|
web-accessible-resources-1.glitch.me | Statically referenced |
test2.png
|
web-accessible-resources-1.glitch.me | Dynamically injected |
test3.png
|
web-accessible-resources-2.glitch.me | Statically referenced |
test4.png
|
web-accessible-resources-2.glitch.me | Dynamically injected |
test1.png and
test2.png
test3.png and
test4.png