写一个chrome插件,统一修改所有http请求的header头,包括ajax请求

要创建一个可以灵活修改HTTP请求头的Chrome扩展,包括一个用户界面来动态设置头部名称和值,可以按照以下步骤进行。我们会用到 chrome.storage API 来保存用户的设置,并在后台脚本中使用这些设置来修改请求头。

文件结构

my_chrome_extension/
│
├── icons/
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
│
├── background.js
├── manifest.json
├── options.html
├── options.js
├── popup.html
├── popup.js
├── popup.css

manifest.json

{"manifest_version": 2,"name": "Flexible HTTP Headers Modifier","version": "1.0","description": "A Chrome extension to modify HTTP headers with user-defined values","permissions": ["storage","webRequest","webRequestBlocking","<all_urls>"],"background": {"scripts": ["background.js"]},"options_page": "options.html","browser_action": {"default_popup": "popup.html","default_icon": {"16": "icons/icon16.png","48": "icons/icon48.png","128": "icons/icon128.png"}},"icons": {"16": "icons/icon16.png","48": "icons/icon48.png","128": "icons/icon128.png"}
}

background.js

let customHeaders = {};chrome.runtime.onInstalled.addListener(() => {// Load headers from storage when the extension is installed or updatedchrome.storage.sync.get(['headers'], function(result) {if (result.headers) {customHeaders = result.headers;}});
});chrome.webRequest.onBeforeSendHeaders.addListener(function(details) {// Modify request headersfor (const [name, value] of Object.entries(customHeaders)) {let headerExists = false;for (let header of details.requestHeaders) {if (header.name.toLowerCase() === name.toLowerCase()) {header.value = value;headerExists = true;break;}}if (!headerExists) {details.requestHeaders.push({ name: name, value: value });}}return { requestHeaders: details.requestHeaders };},{ urls: ["<all_urls>"] },["blocking", "requestHeaders"]
);chrome.storage.onChanged.addListener(function(changes, namespace) {if (namespace === 'sync' && changes.headers) {customHeaders = changes.headers.newValue;}
});

options.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Extension Options</title><link rel="stylesheet" href="popup.css">
</head>
<body><h1>Modify HTTP Headers</h1><div id="headers-container"><div class="header-entry"><input type="text" placeholder="Header Name" class="header-name"><input type="text" placeholder="Header Value" class="header-value"><button class="remove-header">Remove</button></div></div><button id="add-header">Add Header</button><button id="save-headers">Save Headers</button><script src="options.js"></script>
</body>
</html>

options.js

document.addEventListener('DOMContentLoaded', function() {const headersContainer = document.getElementById('headers-container');const addHeaderButton = document.getElementById('add-header');const saveHeadersButton = document.getElementById('save-headers');addHeaderButton.addEventListener('click', function() {const headerEntry = document.createElement('div');headerEntry.className = 'header-entry';headerEntry.innerHTML = `<input type="text" placeholder="Header Name" class="header-name"><input type="text" placeholder="Header Value" class="header-value"><button class="remove-header">Remove</button>`;headerEntry.querySelector('.remove-header').addEventListener('click', function() {headerEntry.remove();});headersContainer.appendChild(headerEntry);});saveHeadersButton.addEventListener('click', function() {const headers = {};document.querySelectorAll('.header-entry').forEach(entry => {const name = entry.querySelector('.header-name').value;const value = entry.querySelector('.header-value').value;if (name && value) {headers[name] = value;}});chrome.storage.sync.set({headers: headers}, function() {alert('Headers saved');});});// Load saved headers on options page loadchrome.storage.sync.get(['headers'], function(result) {if (result.headers) {for (const [name, value] of Object.entries(result.headers)) {const headerEntry = document.createElement('div');headerEntry.className = 'header-entry';headerEntry.innerHTML = `<input type="text" value="${name}" class="header-name"><input type="text" value="${value}" class="header-value"><button class="remove-header">Remove</button>`;headerEntry.querySelector('.remove-header').addEventListener('click', function() {headerEntry.remove();});headersContainer.appendChild(headerEntry);}}});
});

popup.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Popup</title><link rel="stylesheet" href="popup.css">
</head>
<body><h1>Modify HTTP Headers</h1><button id="open-options">Open Options</button><script src="popup.js"></script>
</body>
</html>

popup.js

document.addEventListener('DOMContentLoaded', function() {document.getElementById('open-options').addEventListener('click', function() {chrome.runtime.openOptionsPage();});
});

popup.css

body {width: 200px;font-family: Arial, sans-serif;margin: 0;padding: 20px;box-sizing: border-box;
}h1 {font-size: 16px;margin: 0 0 20px;text-align: center;
}button {display: block;width: 100%;margin: 10px 0;padding: 10px;font-size: 14px;cursor: pointer;
}

加载和测试扩展

  1. 打开 Chrome 浏览器。
  2. 进入 chrome://extensions/ 页面。
  3. 打开右上角的“开发者模式”。
  4. 点击“加载已解压的扩展程序”按钮。
  5. 选择你的扩展所在的目录 my_chrome_extension

现在,你可以通过扩展的图标打开选项页面,添加或移除请求头。保存后,这些头会在所有的HTTP请求(包括AJAX请求)中被修改。

让我们详细解释一下这段 background.js 代码及其功能。

好的,让我们详细解释一下这段 background.js 代码及其功能。

代码解释

let customHeaders = {};// 当扩展程序安装或更新时加载存储的headers
chrome.runtime.onInstalled.addListener(() => {chrome.storage.sync.get(['headers'], function(result) {if (result.headers) {customHeaders = result.headers;}});
});// 拦截并修改请求头
chrome.webRequest.onBeforeSendHeaders.addListener(function(details) {// 修改请求头for (const [name, value] of Object.entries(customHeaders)) {let headerExists = false;for (let header of details.requestHeaders) {if (header.name.toLowerCase() === name.toLowerCase()) {header.value = value;headerExists = true;break;}}if (!headerExists) {details.requestHeaders.push({ name: name, value: value });}}return { requestHeaders: details.requestHeaders };},{ urls: ["<all_urls>"] },["blocking", "requestHeaders"]
);// 监听存储的变化
chrome.storage.onChanged.addListener(function(changes, namespace) {if (namespace === 'sync' && changes.headers) {customHeaders = changes.headers.newValue;}
});

详细解释

  1. 定义自定义请求头变量

    let customHeaders = {};
    

    定义一个空对象 customHeaders 来存储用户定义的自定义请求头。

  2. 扩展程序安装或更新时加载存储的请求头

    chrome.runtime.onInstalled.addListener(() => {chrome.storage.sync.get(['headers'], function(result) {if (result.headers) {customHeaders = result.headers;}});
    });
    

    当 Chrome 扩展程序安装或更新时,会触发 chrome.runtime.onInstalled 事件。此时,从 chrome.storage.sync 中获取存储的 headers 并将其赋值给 customHeaderschrome.storage.sync 是一个同步存储,可以在不同设备之间同步数据。

  3. 拦截并修改请求头

    chrome.webRequest.onBeforeSendHeaders.addListener(function(details) {
    

    使用 chrome.webRequest.onBeforeSendHeaders.addListener 方法拦截每个 HTTP 请求。

  4. 修改请求头

    for (const [name, value] of Object.entries(customHeaders)) {let headerExists = false;for (let header of details.requestHeaders) {if (header.name.toLowerCase() === name.toLowerCase()) {header.value = value;headerExists = true;break;}}if (!headerExists) {details.requestHeaders.push({ name: name, value: value });}
    }
    

    遍历 customHeaders 中的每个自定义请求头:

    • 如果在 details.requestHeaders 中找到相同名称的请求头,则修改其值。
    • 如果未找到相同名称的请求头,则添加新的请求头。
  5. 返回修改后的请求头

    return { requestHeaders: details.requestHeaders };
    

    返回修改后的请求头,确保新的请求头会被应用到实际的 HTTP 请求中。

  6. 监听存储变化

    chrome.storage.onChanged.addListener(function(changes, namespace) {if (namespace === 'sync' && changes.headers) {customHeaders = changes.headers.newValue;}
    });
    

    监听 chrome.storage 的变化,当 headers 发生变化时,更新 customHeaders。这使得用户可以通过扩展程序界面动态地修改自定义请求头,而不需要重新加载插件。

为什么要这么写

  • 自定义请求头存储与同步

    • 通过 chrome.storage.sync 存储自定义请求头,使其可以在不同设备之间同步。
    • 在扩展程序安装或更新时加载存储的请求头,确保扩展程序启动时使用最新的自定义请求头。
  • 拦截和修改请求头

    • 使用 chrome.webRequest.onBeforeSendHeaders 拦截每个 HTTP 请求,并在请求发送之前修改请求头,实现灵活的请求头修改。
  • 动态更新自定义请求头

    • 监听 chrome.storage.onChanged 事件,实时更新 customHeaders,使得用户可以动态地修改请求头,而不需要重新加载插件。

通过这种方式,用户可以在扩展程序界面灵活地设置和修改 HTTP 请求头,适用于各种不同的需求,且这些设置可以在不同设备之间同步。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/31659.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java学习笔记(二)变量原理、常用编码、类型转换

Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍Java变量原理、常用编码、类型转换详细使用以及部分理论知识 🍉欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁 🍉博主收将持续更新学习记录获,友友们有任何问题可以在评论区留言 1、变量原理 1.1、变量的介绍 变量是程…

生成式AI时代,数据存储管理与成本如何不失控?

无数据&#xff0c;不AI。 由生成式AI掀起的这一次人工智能浪潮&#xff0c;对企业的产品、服务乃至商业模式都有着颠覆性的影响。因此&#xff0c;在多云、大数据、生成式AI等多元技术的驱动下&#xff0c;数据要素变得愈发重要的同时&#xff0c;企业对于数据存储的需求也在…

【Android14 ShellTransitions】(六)SyncGroup完成

这一节的内容在WMCore中&#xff0c;回想我们的场景&#xff0c;是在Launcher启动某一个App&#xff0c;那么参与动画的就是该App对应Task&#xff08;OPEN&#xff09;&#xff0c;以及Launcher App对应的Task&#xff08;TO_BACK&#xff09;。在确定了动画的参与者后&#x…

JVS开源底座与核心引擎的全方位探索,助力IT智能、高效、便捷的进化

引言 JVS产品的诞生背景 JVS是软开企服构建的一站式数字化的解决方案&#xff0c;产生的背景主要来源于如下几个方面&#xff1a; 企业数字化需求的增长&#xff1a;企业对IT建设的依赖程度越来越高&#xff0c;数字化、指标化的经营已经是很多企业的生存的基础和前提&#…

postman 工具下载安装使用教程_postman安装

本文讲解的是postman工具下载、Postman安装步骤、postman下载、postman安装教程。Postman是一款流行的API测试工具&#xff0c;它提供了一个用户友好的界面&#xff0c;用于发送和测试API请求&#xff0c;并且可以轻松地按需管理和组织请求。 这使得开发人员和测试人员能够更高…

CARIS HIPS and SIPSv12 是专业的多波束水深数据和声呐图像处理软件

CARIS HIPS and SIPS是专业的多波束水深数据和声呐图像处理软件。CARIS HIPS and SIPS适用于海洋应用需求。其可靠性和可用性对多波束水深数据处理和声呐图像都是很重要的。CARIS HIPS用于处理多波束水深数据&#xff0c;CARIS SIPS用于处理侧扫声呐图像和多波束背向散射回波数…

Result类忘记添加@Data注解导致406错误

在 Java 开发中&#xff0c;Data 注解本身与 HTTP 406 状态码的关系并不直接。HTTP 406 状态码表示 “Not Acceptable”&#xff0c;意味着服务器无法生成客户端可接受的响应。一般来说&#xff0c;这是由于客户端请求的格式&#xff08;例如 JSON 或 XML&#xff09;与服务器返…

css文字镂空加描边

css文字镂空加描边 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>文字镂空</title><style>/* 公用样式 */html,body{width: 100%;height: 100%;position: relative;}/* html{overflow-y: scroll;} */*{margi…

美国vps上面怎么部署网站或者应用程序?

美国的VPS提供了强大的计算资源和灵活的配置选项&#xff0c;是许多网站和应用程序的理想托管平台。通过正确的部署流程&#xff0c;用户可以充分利用这些资源&#xff0c;并确保其网站或应用程序的高性能和稳定性。 选择合适的VPS配置&#xff1a; 在部署网站或应用程序之前&a…

【扫雷游戏】C语言实现

机器学习&#xff1a;Transformer框架理论详解和代码实现>Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f4a5;&#x1f4a5;个人主页&#xff1a;奋斗的小羊 &#x1f4a5;&#x1f4a5;所属…

Ubuntu系统下修改网卡IP地址

Ubuntu系统下修改网卡IP地址 一、Ubuntu系统介绍1.1 Ubuntu简介1.2 Ubuntu网络配置方式 二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍 三、检查本地环境3.1 检查本地操作系统版本3.2 检查系统内核版本 四、配置网卡IP地址4.1 备份网卡配置文件4.2 查看当前IP地址4.3 修改…

yolov8训练指标解读

Epoch 70/100&#xff1a;表示当前是第70个epoch&#xff0c;总共要训练100个epoch。 GPU_mem 0.879G&#xff1a;表示当前训练过程中使用的GPU内存为0.879 GB。 box_loss 1.057&#xff1a;表示当前epoch的边界框损失&#xff08;bounding box loss&#xff09;为1.057。 c…

Redis 持久化策略

Redis 提供了多种持久化机制&#xff0c;用于将数据保存到磁盘中&#xff0c;以防止因服务器重启或故障而导致的数据丢失。主要的持久化策略有两种&#xff1a;RDB (Redis Database) 和 AOF (Append Only File)&#xff0c;即当 Redis 服务器重新启动时&#xff0c;会读取相应的…

torch/lib/libgomp-d22c30c5.so.1: cannot allocate memory in static TLS block的正解

torch/lib/libgomp-4dbbc2f2.so.1.0.0: cannot allocate memory in static TLS block的正解 只需要一行命令即可解决 export LD_PRELOAD/home/ma-user/anaconda3/envs/MindSpore/lib/python3.9/site-packages/torch/lib/../../torch.libs/libgomp-4dbbc2f2.so.1.0.0

张量 Tensor学习总结

张量 Tensor 张量是一种多线性函数&#xff0c;用于表示矢量、标量和其他张量之间的线性关系&#xff0c;其在n维空间内有n^r个分量&#xff0c;每个分量都是坐标的函数。张量在坐标变换时也会按照某些规则作线性变换&#xff0c;是一种特殊的数据结构&#xff0c;在MindSpore…

工厂方法模式(大话设计模式)C/C++版本

工厂方法模式 C 参考&#xff1a;https://www.cnblogs.com/Galesaur-wcy/p/15926711.html #include <iostream> #include <memory> using namespace std;// 运算类 class Operation { private:double _NumA;double _NumB;public:void SetNumA(){cout << &q…

Java面试----MySQL面试题

1.索引有哪些优缺点&#xff1f; MySQL索引作为一种提升数据库查询效率的重要机制&#xff0c;具有以下主要优点和缺点&#xff1a; 优点&#xff1a; 提高查询速度&#xff1a; 索引能够显著加速数据的检索过程&#xff0c;类似于书籍的目录&#xff0c;让数据库引擎能够快速…

自己怎么开发一个商城app

开发一个商城APP是一个复杂但可行的过程&#xff0c;需要明确需求、设计UI/UX&#xff0c;选择技术栈&#xff0c;进行编程和测试&#xff0c;最后部署上线。 在开发一个商城APP时&#xff0c;以下是关键步骤和考虑因素&#xff1a; 需求分析与规划: 确定你的商城APP将销售哪…

在Worpress增加网站的二级目录,并转向到站外网站

在WordPress中&#xff0c;你可以通过添加自定义重定向来实现将某个二级目录&#xff08;例如 www.example.com/subdir&#xff09;重定向到站外网站。可以通过以下几种方法来实现&#xff1a; 方法一&#xff1a;使用 .htaccess 文件 如果你的服务器使用Apache&#xff0c;你…

日期工具类:获取 当前周 | 上一周 | 下一周 的每一天(周一到周日)的日期

问题背景 获取 当前周 | 上一周 | 下一周 的每一天(周一到周日)的日期。 例如: 输入:2024-6-21, current 输出: [{"dayOfTheWeek": "周一","date": "2024-06-17"},{"dayOfTheWeek": "周二","date&qu…