DEV Community

Reading files in a Chrome Extension

Anthony Bruno on March 04, 2018

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 informat...
Collapse
 
kathychurch profile image
Kathy Church

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?

Collapse
 
aussieguy profile image
Anthony Bruno

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...

Collapse
 
kathychurch profile image
Kathy Church

Thanks!

Collapse
 
philnash profile image
Phil Nash

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.

Collapse
 
praveenprk profile image
Praveen Kumar

To create a chrome extension, I am using React Boilerplate, there, webpack and all is being used. I created a file with data.json in src folder, and tried to use CopyWebPackPlugin, but after all this, I can get the getURL giving the right path. But while using fetch on it, it says, net::ERR_FILE_NOT_FOUND

What could be the solution?

Collapse
 
sebastianmcarreira profile image
Sebastián Matías Carreira • Edited

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?

Collapse
 
aussieguy profile image
Anthony Bruno • Edited

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.

Collapse
 
awalakaushik profile image
Kaushik Awala • Edited

Hello Anthony, thanks for sharing this article. I was going through this and wanted to understand if there is a way for us to read an external file in a chrome extension.

Let's say for example, we want to read some secret information and we don't want to include this file when we pack the extension.

I have tried to do some research to see if this is possible without using local storage and the sync API chrome provides but there is nothing that points to a resource that talks about this. Hence, I wanted to reach out for help. Thanks!

Can you share your thoughts on this?

Collapse
 
vdifoung profile image
vDiFoung

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.

Collapse
 
aussieguy profile image
Anthony Bruno

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