Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome Extension: How to List The Contents of Local Directory

What I want to do:

I want to create a Chrome extension for test purposes. And that extension should be able to access the directories and files on the local hard drive.

How I did It:

I requested permissions for file:///* in my manifest.json file. Then I made sure that the checkbox Allow access to file URLs was checked. Then I made a XHR for a file:

  var xhr = new XMLHttpRequest();  
  xhr.open("GET", 'file://c:/dir/file.name', true);     
  xhr.onload = function(e) {  
      console.log('response: ', xhr.response);
  }  
  xhr.send();

... and a XHR for a whole directory:

  var xhr = new XMLHttpRequest();  
  xhr.open("GET", 'file://c:/dir/', true);     
  xhr.onload = function(e) {  
      console.log('response: ', xhr.response);
  }  
  xhr.send();

... and for the total file system:

  var xhr = new XMLHttpRequest();  
  xhr.open("GET", 'file:///', true);     
  xhr.onload = function(e) {  
      console.log('response: ', xhr.response);
  }  
  xhr.send();

What happened:

  • I was able to get the right response for my file request.
  • When I requested a directory I received the source code of Chrome's default human-readable directory overview:

.

  <html>
  <head>
  <script>

[...]

  </script>
  <style>

[...]

  </style>
  <title id="title"></title>
  </head>
  <body>
  <div id="listingParsingErrorBox" i18n-values=".innerHTML:listingParsingErrorBoxText"></div>
  <span id="parentDirText" style="display:none" i18n-content="parentDirText"></span>
  <h1 id="header" i18n-content="header"></h1>
  <table id="table">
    <tr class="header">
      <td i18n-content="headerName"></td>
      <td class="detailsColumn" i18n-content="headerSize"></td>
      <td class="detailsColumn" i18n-content="headerDateModified"></td>
    </tr>
  </table>
  </body>
  </html>

[...]

  <script>start("C:\\dir\\");</script>
  <script>addRow("..","..",1,"0 B","11/11/11 11:11:11 AM");</script>
  <script>addRow("file.name","file.name",0,"4.9 kB","11/11/11 11:11:11 PM");</script>
  • And when I requested the whole filesystem, I got an error.

My Question:

I'm able to read simple files. But how can my extension get a nice machine-readable overview of a directory or of the total filesystem? Thanks.

EDIT: I know that the FileSystem API is intended to access the sandboxed filesystem://, but maybe Chrome allows extensions to also access file://. I couldn't find any documentation concerning file:// access from Chrome extensions, so I'm just able to guess.

like image 707
fridojet Avatar asked Jul 12 '12 13:07

fridojet


People also ask

Can Chrome extensions access local files?

For security reasons, by default the Chrome browser does not allow extensions to access local files. If you want the accelerator to access local files (locations of "file:///...", instead of "http://" or "https://"), you must configure Chrome to allow the access.

Where do Chrome extensions store their data?

When extensions are installed into Chrome they are extracted into the C:\Users\[login_name]\AppData\Local\Google\Chrome\User Data\Default\Extensions folder. Each extension will be stored in its own folder named after the ID of the extension.

How can I save information locally in my Chrome extension?

Save the image object locally One way to share data between a background script and the other scripts that make up the extension is to save the data to a location which is accessible to all the scripts in the extension. We can use the browser localStorage API or chrome. storage which is specific to Chrome extensions.


1 Answers

There's no built-in feature in stand-alone Chrome.

Alternatives to parsing the directory listing page:

  1. NPAPI extensions (C++, recommended)
  2. a local server with filesystem access. NodeJS is a good pick.
like image 152
Silviu-Marian Avatar answered Sep 21 '22 09:09

Silviu-Marian