如何使用Google Chrome扩展程序中的服务人员修改HTTP响应正文？

既然Google Chrome扩展程序可以register Service Workers，我如何使用它们来修改所有主机的HTTP响应，例如，用dog替换所有出现的cat？如何使用Google Chrome扩展程序中的服务人员修改HTTP响应正文？

下面是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); 
      }); 
     }) 
    ); 
});

来源

2016-12-27 niutech

似乎无法正常工作，出现错误Add/AddAll不支持缓存中的“http”或“https”''cache.addAll（urlsToCache）'' – Pacerier

这里有很多结果： https://www.google.com/search?q=cache.addAll但没有一个教程似乎适用于Chrome扩展程序... – Pacerier

[service'serviceworker中的chrome'对象]（https：//i.stack。 imgur.com/jbFjI.png）都很奇怪。 'chrome.tabs'不可能。 – Pacerier

解

≪的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)) 
})))

转到页<URL>（≪铬扩展：// ≪分机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的]是做到这一点的唯一方法，因为在谷歌开发团队的一些莱默已经决定，其“不安全”的效应调节webNavigation和WebRequest的。

注意

Chrome的漏洞：

扩展≪刷新≫不会重装serviceworkers。您需要删除扩展名并重新加载。
页面刷新不会刷新，即使使用chrome devtools禁用高速缓存hard reload。使用普通页面访问。

来源

2017-10-13 10:23:39 Pacerier

您能否让您的代码易读？ – niutech

如何使用Google Chrome扩展程序中的服务人员修改HTTP响应正文？

回答

相关问题