如何在 Google Chrome 扩展中使用 Service Workers 来修改 HTTP 响应正文？

Question

既然 Google Chrome 扩展程序可以注册 Service Workers，我该如何使用它们来修改来自所有主机的 HTTP 响应，例如通过替换所有出现的catwith dog？

下面是Craig Russell的示例代码，但如何在 Chrome 扩展程序中使用它并将其绑定到所有主机？

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);
            });
        })
    );
});

Answer 1

解决方案

<manifest.json>:

{"manifest_version":2,"name":"","version":"0","background":{"scripts":["asd"]}}

≪asd≫：

navigator.serviceWorker.register('sdf.js').then(x=>console.log('done', x))

≪sdf.js≫：

addEventListener('fetch', e=> e.respondWith(fetch/*btw xhr is undefined*/(e.request).then(r=>{
  if(r.headers === undefined /*request not end with <.htm>, <.html>*/){}else{
    console.assert(r.headers.get('content-type')===null)/*for some odd reason this is empty*///[
      let h = new Headers()
      r.headers.forEach((v,k)=>h.append(k,v))
      Object.defineProperty(r,'headers',{'writable':true})
      r.headers = h
      r.headers.append('content-type','text/html'/*btw <htm> doesnt work*/)
    //]
  }
  return r.text().then(_=>new Response(_.replace(/cat/g,'dog'),r))
})))

转到 <page url> (<chrome-extension://<ext id>/<page path>>) 并查看替换内容。

独立响应

<manifest.json> 和 <asd> 与上面相同。

≪sdf.js≫：

addEventListener('fetch', e=> e.respondWith(new Response('url: '+e.request.url,{headers:{'content-type':'text/html'/*, etc*/}})))

顺便提一句

Serviceworker 还有其他可以深入研究的事件，例如：

addEventListener('message', e=>{
  console.log('onmessage', e)
})
addEventListener('activate', e=>{
  console.log('onactivate', e)
})
addEventListener('install', e=>{
  console.log('oninstall', e)
})

备择方案

请注意，目前 serviceworker [-cf webNavigation, webRequest] 是执行此操作的唯一方法，因为 Google 开发团队中的一些 Lamer 认为它对于修改响应的 webNavigation 和 webRequest 是“不安全的”。

笔记

Chrome 错误：

• 扩展<Reload>不会重新加载serviceworkers。您需要删除扩展并将其重新加载。
• 即使使用 chrome devtools 禁用缓存硬重新加载，页面刷新也不会刷新。使用正常的页面访问。