title: Capturing HTTP requests done by a loading page
body: <p>Please be patient, because it will take me a relatively long explanation in order to tell you what I need.</p>
  
  <p>I'm building a web development framework and one of the entities I need to deal with are <code>components</code>. A <code>component</code> is a part of a web page. May be a graph or a table or any other thing. A component is loaded in a page by a call to a javascript method like</p>
  
  <pre><code>EMERALD.component.show('some.namespace.component_name','dom_area');
  </code></pre>
  
  <p>This would tell the framework to get the contents of this component <code>some.namespace.component_name</code> and load them into <code>dom_area</code>, a HTML element with id <code>dom_area</code>.</p>
  
  <p>The simplest of all components is a static piece of HTML code. And this piece of HTML may contain elements who create new HTTP requests, like references to CSS files, images... whatever.</p>
  
  <p>A component is stored in a directory structure. Using the component <code>some.namespace.component_name</code> mentioned above as an example, it would be stored like this</p>
  
  <pre><code>assets/
    |
    -- components/
         |
         --some/
            |
            -- namespace/
                 |
                 -- component_name/
                      |
                      -- config.json
                      |
                      -- css/
                      |   |
                      |   -- layout.css
                      |
                      -- images/
                      |    |
                      |    -- some_image.jpg
                      -- page.html
  </code></pre>
  
  <p>Things are very simple, indeed. The KISS principle is one of my paradigms. The <code>EMERALD.component.show('some.namespace.component_name','dom_area');</code>, after a few things, loads the HTML fragment <code>page.html</code>.</p>
  
  <p>My problem is: <strong>When <code>page.html</code> is loaded, if it loads <code>layout.css</code> and <code>some_image.jpg</code>, the HTTP requests are not going to be loaded, unless they are referenced absolutely, and this is not convenient to me.</strong></p>
  
  <p>What I would like to do is have a <code>page.html</code> like</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="layout.css"&gt;
  &lt;div class="container-fluid"&gt;
      &lt;div class="thering"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and a <code>layout.css</code> like</p>
  
  <pre><code>.thering {
      height: 385px;
      background: #000 url('thering.png');
      border-color: #222 !important;
  }
  </code></pre>
  
  <p>And then capture the HTTP requests of <code>layout.css</code> (in <code>page.html</code>) and <code>thering.png</code> (in <code>layout.css</code>) and append the right path so that they may be loaded correctly.</p>
  
  <p>I've tried a few things, but none worked. Any suggestions?</p>