loading...

Reading files in a Chrome Extension

aussieguy profile image Anthony Bruno Updated on ・2 min read

Often, it is desirable for a Chrome extension to be bundled with files that need to be read. These files may contain data or configuration information to help the extension function. This short guide will show you how you can set up your Chrome extension to read files.

Add file path(s) to manifest.json

Firstly, you must add the file paths to the web_accessible_resources property in the manifest.json file. The file paths are relative to the extension's root (where the manifest.json is located). For instance, if I wanted to include a file called info.json that is located in a folder data, it would look like:

"web_accessible_resources": [
    "data/info.json"
]

A cool feature is that these paths support wildcards. For example:

"web_accessible_resources": [
    "data/*.json"
]

will allow access to any json file in the data folder.

Read from the file

The next step is to read the data from the file. To do this, we need to get the
URL of the file and make a request to it.

To get the URL of the file we can use chrome.runtime.getURL('path/to/file').

Then, we make a GET request to the URL. In this example, we will use the ES6 feature Fetch but methods such as XmlHttpRequest will also work.

const url = chrome.runtime.getURL('path/to/file');

fetch(url)
    .then((response) => response.json()) //assuming file contains json
    .then((json) => doSomething(json));

And there we have it!

To reiterate the steps simply:

  1. Add file path to the web_accessible_resources property in the manifest.json file
  2. Get the URL of the file using chrome.runtime.getURL('path/to/file')
  3. Make a GET request to the URL

Posted on by:

aussieguy profile

Anthony Bruno

@aussieguy

Australian software engineer. Probably drinking coffee right now.

Discussion

markdown guide
 

I am new to Chrome Extensions and this is just the info I was looking for. However, I'm having trouble using the chrome.runtime.getUrl function. Whenever I try to use it in a content_script I get:


Uncaught TypeError: chrome.runtime.getUrl is not a function

Do you have an example that shows your complete manifest and script file where this is working?

 

Hey there!

It looks like you picked up a typo from me. The method is called chrome.runtime.getURL (url is capitalized!). Sorry about that!

If you want to look at an example have a look at my repo: github.com/AussieGuy0/fill-it-in. A instance where I getURL is: github.com/AussieGuy0/fill-it-in/b...

 
 

This is a neat article, thanks. I've been working with a small Chrome extension recently and it's nice to see other available features.

 

Hi Anthony, It was a really good and concise article. But I'm left with a small question: If the extension doesn't knows the exact filename (maybe because the files are created by another program with filenames corresponding to timestamps or something like that), it can clearly make it available with the wildcard, but how does it makes the GET? Is there a way for the extension to receive the list of files available in the directory and then make the extension choose a file to send the GET?

 

Hey Sebastian!

I haven't needed to do this yet, so I did a bit of research. Turns out that this is a rather hard problem! It seems impossible to get it from a content script directly (source). You can potentially chrome.runtime.getManifest() to get the list of web_accessible_resources, but you run into problems if there's wildcard entries.

It may be possible to get the list of possible files with chrome.runtime.getPackageDirectoryEntry(function callback), which is only callable from a background script. I haven't tried it though.

 

Hi Bruno, I have a question.
I can read file but Can i write this file in Chrome extension?
Thank you and sorry for my English.

 

Hey DiVoung!

Apologies for my very, very late reply. I only saw this now.

Unfortunately, you cannot write to this file. An alternative may be triggering a file download via this tutorial