Chrome 拓展开发 Service Worker 无法使用 XMLHttpRequest 发送 HTTP 请求

Posted SlimeNull

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Chrome 拓展开发 Service Worker 无法使用 XMLHttpRequest 发送 HTTP 请求相关的知识,希望对你有一定的参考价值。

相关的报错信息:
XMLHttpRequest is not defined at chrome-extension:

原因

显然, Service Worker 不支持 XMLHttpRequest

解决方案

用 fetch

相关资料


通过 fetch 上传 JSON 数据

const data =  username: 'example' ;    // 定义数据

fetch('https://example.com/profile', 
  method: 'POST', // or 'PUT'            // 指定请求方法
  headers: 
    'Content-Type': 'application/json',  // 指定内容类型
  ,
  body: JSON.stringify(data),            // 传入内容
)
  .then((response) => response.json())   // 取响应 json
  .then((data) =>                       // 对解析完成的 json 进行操作
    console.log('Success:', data);
  )
  .catch((error) =>                     // 捕捉错误
    console.error('Error:', error);
  );

或者最简单的, 仅仅上传, 不考虑响应与异常情况

const data =  username: 'example' ;    // 定义数据

fetch('https://example.com/profile', 
  method: 'POST', // or 'PUT'            // 指定请求方法
  headers: 
    'Content-Type': 'application/json',  // 指定内容类型
  ,
  body: JSON.stringify(data),            // 传入内容
);

以上是关于Chrome 拓展开发 Service Worker 无法使用 XMLHttpRequest 发送 HTTP 请求的主要内容,如果未能解决你的问题,请参考以下文章

优秀程序员都在用哪些Chrome拓展工具?

chrome扩展

Service Fabric - 等待复制超时

使用自签名证书在 chrome android 上远程调试 service worker

Chrome拓展程序hello world

提高工作效率的神器:基于前端表格实现Chrome Excel扩展插件