Chrome 插件各模块使用 Fetch 进行接口请求
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 解析
】
相关文章:
Chrome 插件各模块使用 Fetch 进行接口请求
Chrome 插件各模块使用 Fetch 进行接口请求 常规网页可以使用 fetch() 或 XMLHttpRequest API 从远程服务器发送和接收数据,但受到同源政策的限制。 内容脚本会代表已注入内容脚本的网页源发起请求,因此内容脚本也受同源政策的约束,插件的来…...
内存可见性
内存可见性 一:内存可见性1.2: 二:解决内存可见性问题2.1 volatile关键字2.2:synchronized关键字解决内存可见性问题 一:内存可见性 public class Demo1 {public static int count 0;public static void main(String[] args) throws InterruptedException {Thread t1new Thre…...
Android room 在dao中不能使用挂起suspend 否则会报错
错误: Type of the parameter must be a class annotated with Entity or a collection/array of it. kotlin.coroutines.Continuation<? super kotlin.Unit> $completion); 首先大家检查一下几个点 一、kotlin-kapt 二、 是否引入了 room-ktx 我是2024年…...
【stable diffusion扩散模型】一篇文章讲透
目录 一、引言 二、Stable Diffusion的基本原理 1 扩散模型 2 Stable Diffusion模型架构 3 训练过程与算法细节 三、Stable Diffusion的应用领域 1 图像生成与艺术创作 2 图像补全与修复 3 其他领域 四、Stable Diffusion的优势与挑战 👉优势 …...
数据链路层之信道:数字通信的桥梁与守护者
✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢,在这里我会分享我的知识和经验。&am…...
SQL109 纠错4(组合查询,order by..)
SELECT cust_name, cust_contact, cust_email FROM Customers WHERE cust_state MI UNION SELECT cust_name, cust_contact, cust_email FROM Customers WHERE cust_state IL ORDER BY cust_name;order by子句,必须位于最后一条select语句之后...
Spring Boot + Vue 实现文件导入导出功能
文章目录 1、概述2、后端实现(Spring Boot)3、前端实现(Vue)4、总结 1、概述 在现代Web应用开发中,文件的导入导出是一个常见的需求。Spring Boot作为后端开发的强大框架,搭配前端框架Vue,可…...
vue watch 深度监听
vue2文档:API — Vue.js vue3文档:侦听器 | Vue.js watch 可以用来监听页面中的数据,但如果监听的源是对象或数组,则使用深度监听,强制深度遍历源,以便在深度变更时触发回调。 一,监听 <t…...
Qt源码调试步骤记录
1.源码: 两种方式,要么安装qt时选择source,要么从官网下载源码,然后在qt creator中设置路径。二选一即可。我选的第二种。 1.1.第一种,安装时选择source: 1.2.第二种,下载源码设置路径&#x…...
大数据面试英文自我介绍参考(万字长文)
发现有一个怪圈,如果码农年龄35+,除非非常匹配,不然在国内企业筛选可能就筛选不过。国外码农可以干到40+、50+。一些外企,对年龄35+的码农依然青睐。这些外企对英文是有要求,通常是要英文自我介绍,下面提供一些英文自我介绍参考。 参考1: Good morning/afternoon, I a…...
外包干了5天,技术退步明显.......
先说一下自己的情况,大专生,18年通过校招进入杭州某软件公司,干了接近4年的功能测试,今年年初,感觉自己不能够在这样下去了,长时间呆在一个舒适的环境会让一个人堕落! 而我已经在一个企业干了四年的功能测…...
Docket常见的软件部署1
1 安装MySQL # 查看MySQL镜像 docker search mysql # 拉起镜像 docker pull mysql:5.7 # 创建MySQL数据映射卷,防止数据不丢失 mkdir -p /hmoe/tem/docker/mysql/data/ # 启动镜像 docker run -d --name mysql -e MYSQL_ROOT_PASSWORD123456 -p 3306:3306 -v /home…...
Qt源程序编译及错误问题解决
Error 5 while parsing C:/qt-everywhere-src-6.6.2/qt-build/qtdeclarative/src/qmlmodels/meta_types/qt6qmlmodels_release_metatypes.json: illegal value .json 文件为空文件0字节,加 “[]”,不要引号。可以解决这类错误。 Qt编译 Qt for Windows…...
作业练习(python)
第一题: cel eval(input()) fah 9 / 5 * cel 32 print("%.1f" % fah) 第二题: radius, length eval(input()) area radius * radius * 3.14159267 volume area * length print("%.2f" % area) print("%.2f" …...
Wireshark使用相关
1.wireshark如何查看RST包 tcp.flags.reset1 RST表示复位,用来异常的关闭连接,在TCP的设计中它是不可或缺的。发送RST包关闭连接时,不必等缓冲区的包都发出去(不像上面的FIN包),直接就丢弃缓存区的包发送R…...
相机标定学习记录
相机标定是计算机视觉和机器视觉领域中的一项基本技术,它的主要目的是通过获取相机的内部参数(内参)和外部参数(外参),以及镜头畸变参数,建立起现实世界中的点与相机成像平面上对应像素点之间准…...
CSS 滚动条样式修改
1、滚动条整体部分 使用 ::-webkit-scrollbar 注意:这个必须要加,不然修改的样式不生效 ::-webkit-scrollbar {width: 10px;//修改滚动条宽度 }2、滚动条中的滑块 使用 ::-webkit-scrollbar-thumb ::-webkit-scrollbar-thumb {border-radius: 8px;b…...
谈谈配置中心?
配置中心可以做集中式的服务配置管理,比如配置一些数据库连接的URL,一些共用的配置且可动态调整的参数。如果不采用集中式的管理,会导致修改起来特别麻烦,一个个的修改特别繁琐。 Nacos Config配置中心中采用的是客户端拉取数据&a…...
人工智能(pytorch)搭建模型25-基于pytorch搭建FPN特征金字塔网络的应用场景,模型结构介绍
大家好,我是微学AI,今天给大家介绍一下人工智能(pytorch)搭建模型25-基于pytorch搭建FPN特征金字塔网络的应用场景,模型结构介绍。特征金字塔网络(FPN)是一种深度学习模型结构,主要应用于目标检测任务中&am…...
JRT业务开发起步
这是一段充满挑战与奋斗的旅程,自第一行Java代码的写下起,便历经重重险阻。从细微的代码行,逐步汇聚成实用的工具类方法;从工具类方法的积累,逐渐构建起功能强大的工具包;再从工具包的整合,最终…...
网络编程(Modbus进阶)
思维导图 Modbus RTU(先学一点理论) 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议,由 Modicon 公司(现施耐德电气)于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法:netstat [选项] 功能:查看网络状态 常用选项: n 拒绝显示别名&#…...
Android15默认授权浮窗权限
我们经常有那种需求,客户需要定制的apk集成在ROM中,并且默认授予其【显示在其他应用的上层】权限,也就是我们常说的浮窗权限,那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值,用于设置元素的宽度根据其内容自动调整,确保宽度刚好容纳内容而不会超出。 效果对比 默认情况(width: auto): 块级元素(如 <div>)会占满父容器…...
Linux 内存管理实战精讲:核心原理与面试常考点全解析
Linux 内存管理实战精讲:核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用,还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...
Vue ③-生命周期 || 脚手架
生命周期 思考:什么时候可以发送初始化渲染请求?(越早越好) 什么时候可以开始操作dom?(至少dom得渲染出来) Vue生命周期: 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...
用递归算法解锁「子集」问题 —— LeetCode 78题解析
文章目录 一、题目介绍二、递归思路详解:从决策树开始理解三、解法一:二叉决策树 DFS四、解法二:组合式回溯写法(推荐)五、解法对比 递归算法是编程中一种非常强大且常见的思想,它能够优雅地解决很多复杂的…...
生成对抗网络(GAN)损失函数解读
GAN损失函数的形式: 以下是对每个部分的解读: 1. , :这个部分表示生成器(Generator)G的目标是最小化损失函数。 :判别器(Discriminator)D的目标是最大化损失函数。 GAN的训…...
数据库管理与高可用-MySQL故障排查与生产环境优化
目录 #1.1MySQL单案例故障排查 1.1.1MySQL常见的故障排查 1.1.2MySQL主从故障排查 #2.1MySQL优化 2.1.1硬件方面的优化 2.1.2进程方面的优化 #3.1MySQL存储引擎 3.1.1 MyISAM存储引擎 3.1.2 InnoDB存储引擎 1.1MySQL单案例故障排查 1.1.1MySQL常见的故障排查 (1&…...
NoSQL——Redis配置与优化
目录 关系型&非关系型数据库 一、核心原理对比 二、核心特性对比 三、关键区别剖析 四、典型产品示例 总结 Redis Redis核心原理 核心特性 技术意义 配置文件解析 1. 基础配置 2. 持久化配置 3. 内存管理 4. 高可用配置 5. 性能调优 6.…...
