title: How to use Service Workers in Google Chrome extensions to modify an HTTP response body?
body: <p>Now that Google Chrome extensions can <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=501569" rel="noreferrer">register Service Workers</a>, how can I use them in order to modify HTTP responses from all hosts, e.g. by replacing all occurrences of <code>cat</code> with <code>dog</code>?</p>
  
  <p>Below is a sample code from <a href="http://craig-russell.co.uk/2016/01/26/modifying-service-worker-responses.html" rel="noreferrer">Craig Russell</a>, but how to use it inside Chrome extensions and bind it to all hosts?</p>
  
  <pre><code>self.addEventListener('fetch', function(event) {
      event.respondWith(
          fetch(event.request).then(function(response) {
              var init = {
                  status:     response.status,
                  statusText: response.statusText,
                  headers:    {'X-Foo': 'My Custom Header'}
              };
              response.headers.forEach(function(v,k) {
                  init.headers[k] = v;
              });
              return response.text().then(function(body) {
                  return new Response(body.replace(/cat/g, 'dog'), init);
              });
          })
      );
  });
  </code></pre>