如何在Google Chrome扩展程序中使用服务人员修改HTTP响应正文？ [英] How to use Service Workers in Google Chrome extensions to modify an HTTP response body?

问题描述

既然Google Chrome扩展程序可以注册服务人员 ，我如何使用它们来修改来自所有主机的HTTP响应，例如通过用 dog ？

替换所有 cat 以下是来自 Craig Russell < a>，但是如何在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）; 
}）; 
}）
）; 
}）; 
  

解决方案

解决方案

< manifest.json>：

  {manifest_version 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）/ *由于某些奇怪的原因，这是空的* /// [
 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> （*）替换（/ cat / g，'狗'）* /）
 //] 
} 
 return r.text（）。then（_ => new Response ，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 * /} }）））
  

---

Btw

Serviceworker还有其他一些可以深入研究的事件：

  addEventListener 'message'，e => {
 console.log（'onmessage'，e）
}）
 addEventListener（'activate'，e => {
 console。 log（'onactivate'，e）
}）
 addEventListener（'install'，e => {
 console.log（'oninstall'，e）
}）
  

---

替代品 $ b

请注意，目前serviceworker [– cf webNavigation，webRequest]是这样做的唯一方式，因为Google开发团队中的一些人认为它对响应修改webNavigation和webRequest的不安全。

---

注意

Chrome bug：

• 扩展程序<重新加载>将不会重新加载服务工作者。您需要删除扩展并重新加载。


• 即使使用chrome devtools禁用缓存，页面刷新也不会刷新重新加载。使用普通页面访问。

Now that Google Chrome extensions can register Service Workers, how can I use them in order to modify HTTP responses from all hosts, e.g. by replacing all occurrences of cat with dog?

Below is a sample code from Craig Russell, but how to use it inside Chrome extensions and bind it to all hosts?

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

解决方案

Solution

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

Go to ≪page url≫ (≪chrome-extension://≪ext id≫/≪page path≫≫) and see the replacements.

---

Standalone response

≪manifest.json≫ and ≪asd≫ same as above.

≪sdf.js≫:

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

---

Btw

Serviceworker has other events that can be delved into eg:

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

---

Alternatives

Note that currently serviceworker [–cf webNavigation, webRequest] is the only way to do this because some lamer in Google development team has decided that its "insecure" for response-modifying webNavigation and webRequest.

---

Note

Chrome bugs:

• Extension ≪Reload≫ will not reload serviceworkers. You need to remove the extension and load it back in.
• Page refresh does not refresh, even with chrome devtools disable cache hard reload. Use normal page visit.

这篇关于如何在Google Chrome扩展程序中使用服务人员修改HTTP响应正文？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！