网盘搜索 网站开发,wordpress导航菜单图标设置,百度竞价排名价格查询,微信小程序生成平台系统Chrome 插件各模块使用 Fetch 进行接口请求
常规网页可以使用 fetch() 或 XMLHttpRequest API 从远程服务器发送和接收数据#xff0c;但受到同源政策的限制。
内容脚本会代表已注入内容脚本的网页源发起请求#xff0c;因此内容脚本也受同源政策的约束#xff0c;插件的来…Chrome 插件各模块使用 Fetch 进行接口请求
常规网页可以使用 fetch() 或 XMLHttpRequest API 从远程服务器发送和接收数据但受到同源政策的限制。
内容脚本会代表已注入内容脚本的网页源发起请求因此内容脚本也受同源政策的约束插件的来源不受限制。
在插件 Service Worker 或前台标签页中执行的脚本可以与其源之外的远程服务器通信前提是该插件请求跨源权限。
一、XMLHttpRequest 和 Fetch
fetch() 是专为 Service Worker 创建的遵循远离同步操作的更广泛的网络趋势。Service Worker 之外的扩展支持 XMLHttpRequest() API调用它会触发扩展 Service Worker 的提取处理程序
Service Worker 模块不支持 XMLHttpRequest因此在新的插件中进行接口网络请求需使用 Fetch
const response await fetch(https://www.example.com/greeting.json)
console.log(response.statusText);二、Fetch 请求
1. 请求插件内容模块 每个正在运行的插件都存在于各自独立的安全源中。该插件无需请求额外的权限即可调用 fetch() 来获取安装范围内的资源 如果某个插件在 config_resources/ 文件夹中包含一个名为 config.json 的 JSON 配置文件则该插件可以检索该文件的内容
const response await fetch(/config_resources/config.json);
const jsonData await response.json();2. 跨源请求
需在 manifest.json 中添加 host_permissions 字段
{name: My extension,host_permissions: [https://www.douban.com/],
}3. content_scripts 中进行网络请求
manifest.json 文件配置
{content_scripts: [{matches: [https://movie.douban.com/*],css: [content/index.css],js: [content/jquery.js, content/index.js]}],host_permissions: [https://movie.douban.com/*],
}content/index.js 进行数据请求
const response await fetch(https://movie.douban.com/j/tv/recommend_groups)
if (!response.ok) {throw new Error(Network response was not ok)
}
const allData await response.json()
console.log(content index allData, allData)日志输出 4. service_worker 中进行网络请求
manifest.json 文件配置
{host_permissions: [https://movie.douban.com/*],
}service_worker.js 进行数据请求
const response await fetch(https://movie.douban.com/j/tv/recommend_groups)
if (!response.ok) {throw new Error(Network response was not ok)
}
const allData await response.json()
console.log(service worker allData, allData)日志输出 5. Action 中进行网络请求
manifest.json 文件配置
{host_permissions: [https://movie.douban.com/*],
}index.js 进行数据请求
const response await fetch(https://movie.douban.com/j/tv/recommend_groups)
if (!response.ok) {throw new Error(Network response was not ok)
}
const allData await response.json()
console.log(Action allData, allData)日志输出 总结
Chrome 插件中的网络请求和普通 web 是一样的只不过从常用的 AJAX 换成了 Fetch进行跨域请求的时候一定要配置 manifest.json 文件一般请求都需要和 cookies 进行配合关于 cookies API 可以查看 【Chrome 浏览器插件 cookies API 解析 】
