Web Accessible Resources are files within your chrome extension that web pages and other external extensions can have access it to. By default webpages and other external extensions do NOT have access to these file, so the developer needs to declare in the manifest.json the extension files should certain webpages have access to.

This feature is typical used for content scripts to use the extension’s images and assets on web pages e.g. displaying a logo on the website your want control.

How to declare in the manifest.json

{
  ...
  "web_accessible_resources": [
    {
      "matches": [ "https://web-accessible-resources-1.glitch.me/*" ],
      "resources": [ "test1.png", "test2.png" ]
    }, 
    {
      "matches": [ "https://web-accessible-resources-2.glitch.me/*" ],
      "resources": [ "test3.json", "test4.json" ]
    },
    {
      "matches": [ "<all_urls>" ],
      "resources": [ "./icons/*" ]
    },
    {
      "matches":["https://mywebsite.com"],
      "extension_ids": [ "bhopmjelohlamfdkgiemchgaonilopwe" ],
      "resources": [ "test1.png", "test4.json" ]
    }
  ],
  ...
}

web_accessible_resources field holds an array of object. You’ll notice that you specific, with a URL pattern, which files that particular webpage should have access to uses the matches field. Use the <all_urls> if you want the files to be accessible on any and every webpage.

You can specify all types of files not just images in resources . However if you do not want specify individual files but just want expose all the files in a folder/directory you can use ./folder path/* in the resources field. The paths have to be relative to the manifest.json location.

extension_ids is just an array of extension id that allow other extensions to have access to this extensions files specified. A use case for this is you have two extensions that supposed to work of each other and share information.

In your content script code to reference the file you have to use the chrome.runtimer.getURL function. The paths have to be relative to the manifest.json location. For instances

// within same extension
let imagepath = chrome.runtime.getURL('logo.png');
let videopath = chrome.runtime.getURL('vidoes/intro.mp4');
let audiopath = chrome.runtime.getURL('sounds/tracks/1.mp3')

// extension id
let extId = ''

//relative the other extensions manifest.json file.
let path = '/icons/logo.png'; 

let imgFromExtn = chrome.runtime.getURL(`chrome-extension://${extId}/${path}`)

Example Project

You can look at the example project provided by the Google Chrome Team here https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples/web-accessible-resources. However we also want to make a simple project base on the web_accessible_resources concept.

Our extension is going to insert a custom button on any webpage at the bottom right corner. When the button is clicked it will include our CSS file to the website, hopefully changing its style. For this project we’ll need five files; manifest.json , content.js , content.css , logo.png , web.css and manifest.json

manifest.json

{
    "name": "My Style",
    "version": "1.0.0.0",
    "description": "My Style",
    "manifest_version": 3,
    "action": {
        "default_title": "My Style",
        "default_icon": {
            "16": "logo.png",
            "24": "logo.png",
            "32": "logo.png"
        }
    },
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"],
            "css": ["content.css"]
        }
    ],
    "web_accessible_resources": [
    {
      "matches": [ "<all_urls>" ],
      "resources": [ "logo.png", "web.css" ]
    }
  ]
}

Content Script (content.js)

This is where the code for the main functionality of your chrome extension goes.

// create image element
const imagepath = chrome.runtime.getURL('logo.png');
const img = document.createElement('img');
img.src = imagepath;

// create button element
const button = document.createElement('button');
button.classList.add('mystyle-button'); //use content.css

// append image to button
button.appendChild(img);

// append to web page
document.body.appendChild(button);

// when button is clicked append css to webpage
button.onclick = () => {
    const cssfilepath = chrome.runtime.getURL('web.css');
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = cssfilepath;
    document.head.appendChild(link);
}

Content Style (content.css)

We are you using this to style the button.

.mystyle-button {
    display: flex;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 10px;
    position: fixed;
    bottom: 80px;
    right: 80px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.5s;
    background: #eee;
}

.mystyle-button:hover {
    width: 45px;
    height: 45px;
    border-radius: 40px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.mystyle-button img {
    text-align: center;
    margin: 0 auto;
    width: 30px;
    height: 30px;
}

Embedded CSS (web.css)

This is the file that will be embed in the webpage when the button is clicked.

body {
    background: linear-gradient(#cc4424, #749da3) !important;
}

You can find the final project’s source code here https://github.com/BuildChromeExtensions/mystyle

Bonus Tip

Although this has little to do with web_accessible_resources, you can load your extensions popup like a webpage in your browser since it is made of HTML, CSS and/or JS files. You just need to give it the correct URL.

Let’s say your popup UI HTML file is index.html and its in the same directory as your manifest.json entering the URL

chrome-extension://${chromeextensionId}/index.html

In your browser should open your chrome extension’s popup UI. If you wanted to do it programmatically, in your content scripts, background scripts or popup.

const popupPath = chrome.runtime.getURL('index.html');
window.open(popupPath);

Chrome Extension

Icons

Web Accessibility