javascript - 如何在 Google Chrome 扩展中使用 Service Worker 来修改 HTTP 响应体？

Question

现在 Google Chrome 扩展程序可以 register Service Workers ，我如何使用它们来修改来自所有主机的 HTTP 响应，例如通过将所有出现的 cat 替换为 dog?

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

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

转到≪页面网址>>(≪chrome-extension://≪ext id>>/≪页面路径>>>>)并查看替换。

---

独立响应

≪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≫ 不会重新加载 serviceworker。您需要删除扩展程序并将其重新加载。
• 即使使用 chrome devtools 禁用缓存，页面刷新也不会刷新 hard reload .使用正常的页面访问。