Chrome Extension Example

This nifty tool serves up files for quick access. The chrome extension shoots down a quick menu listing all the public files and links to them.

Install it from the Chrome Web Store - Finding Apogee Files

The how

This extension uses jQuery to parse an XML file that was generated by PHP.

Our web server is hosted locally here at Finding Apogee. Using a specific directory as our “Dropbox”, PHP to generates an xml file describing the contents of that directory. Looks a lot like this:

<?php header('Content-Type: text/xml'); ?>
<?xml version='1.0' encoding='ISO-8859-1' ?>
<xml>
  <?php
    $dir = 'PATH_TO_YOUR_DIR';
    if ($handle = opendir($dir)) {
      while (false !== ($entry = readdir($handle))) {
      if ($entry != "." && $entry != ".." && $entry != "Thumbs.db") {
        if (is_dir($dir."/".$entry)) {
          echo "<dir></dir>";
        } else {
          echo "<file>";
          echo " <filename>$entry</filename>";
          echo " <filepath>HTTP_PATH_TO_YOUR_DIR/$entry</filepath>";
          echo "</file>";
        }
      }
    }
    closedir($handle);
  }?>
</xml>

Once the PHP generates the necessary XML, we can grab it with javascript.

$(d).find(‘file’).each(function(){

var $file= $(this);
var filename = $file.find(“filename”).text();
var filepath = $file.find(‘filepath’).text();

var html = ‘<li class=”menu”><a href=”‘ + filepath + ‘” target=”_blank”>’ +filename + ‘</a> ‘;
html += ‘</li>’;

$(‘ul’).append($(html));