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

2024-06-22 03:44
文章标签 请求 插件 chrome http header ajax 修改 统一 所有 包括

本文主要是介绍写一个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 并将其赋值给 customHeaders。chrome.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 请求头，适用于各种不同的需求，且这些设置可以在不同设备之间同步。

这篇关于写一个chrome插件，统一修改所有http请求的header头，包括ajax请求的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1083193。

相关文章

通过高德api查询所有店铺地址信息

通过高德api查询所有店铺地址信息

通过高德api查询所有店铺地址电话信息 需求：通过高德api查询所有店铺地址信息需求分析具体实现1、申请高德appkey2、下载types city 字典值3、具体代码调用 需求：通过高德api查询所有店铺地址信息 需求分析 查询现有高德api发现现有接口关键字搜索API服务地址： https://developer.amap.com/api/webservice/gui
阅读更多...
vue3项目将所有访问后端springboot的接口统一管理带跨域

vue3项目将所有访问后端springboot的接口统一管理带跨域

vue3项目将所有访问后端springboot的接口统一管理带跨域 一、前言1.安装Axios2.创建Axios实例3.创建API服务文件4.在组件中使用API服务 二、跨域三、总结 一、前言 在Vue 3项目中，统一管理所有访问后端Spring Boot接口的最佳实践是创建一个专门的API服务层。这可以让你的代码更加模块化、可维护和集中管理。你可以使用Axios库作为HTT
阅读更多...
axios全局封装AbortController取消重复请求

axios全局封装AbortController取消重复请求

为什么？ 问题：为什么axios要配置AbortController？防抖节流不行吗？ 分析： 防抖节流本质上是用延时器来操作请求的。防抖是判断延时器是否存在，如果存在，清除延时器，重新开启一个延时器，只执行最后一次请求。节流呢，是判断延时器是否存在，如果存在，直接return掉，直到执行完这个延时器。事实上，这些体验感都不算友好，因为对于用户来说，得等一些时间，尤其是首次请求，不是那么流畅
阅读更多...
WordPress网创自动采集并发布插件

WordPress网创自动采集并发布插件

网创教程：WordPress插件网创自动采集并发布 阅读更新：随机添加文章的阅读数量，购买数量，喜欢数量。 使用插件注意事项 如果遇到404错误，请先检查并调整网站的伪静态设置，这是最常见的问题。需要定制化服务，请随时联系我。 本次更新内容 我们进行了多项更新和优化，主要包括： 界面设置：用户现在可以更便捷地设置文章分类和发布金额。代码优化：改进了采集和发布代码，提高了插件的稳定
阅读更多...
开启青龙 Ninja 扫码功能失效后修改成手动填写CK功能【修正Ninja拉库地址】

开启青龙 Ninja 扫码功能失效后修改成手动填写CK功能【修正Ninja拉库地址】

国内：进入容器docker exec -it qinglong bash #获取ninjagit clone -b main https://ghproxy.com/https://github.com/wjx0428/ninja.git /ql/ninja#安装cd /ql/ninja/backend && pnpm install cp .env.example .env
阅读更多...
vscode-创建vue3项目-修改暗黑主题-常见错误-element插件标签-用法涉及问题

vscode-创建vue3项目-修改暗黑主题-常见错误-element插件标签-用法涉及问题

文章目录 1.vscode创建运行编译vue3项目2.添加项目资源3.添加element-plus元素4.修改为暗黑主题4.1.在main.js主文件中引入暗黑样式4.2.添加自定义样式文件4.3.html页面html标签添加样式 5.常见错误5.1.未使用变量5.2.关闭typescript检查5.3.调试器支持5.4.允许未到达代码和未定义代码 6.element常用标签6.1.下拉列表
阅读更多...
Linux中拷贝 cp命令中拷贝所有的写法详解

Linux中拷贝 cp命令中拷贝所有的写法详解

This text from: http://www.jb51.net/article/101641.htm 一、预备  cp就是拷贝，最简单的使用方式就是： cp oldfile newfile 但这样只能拷贝文件，不能拷贝目录，所以通常用： cp -r old/ new/ 那就会把old目录整个拷贝到new目录下。注意，不是把old目录里面的文件拷贝到new目录，
阅读更多...
微服务中RPC的强类型检查与HTTP的弱类型对比

微服务中RPC的强类型检查与HTTP的弱类型对比

在微服务架构中，服务间的通信是一个至关重要的环节。其中，远程过程调用（RPC）和HTTP是两种最常见的通信方式。虽然它们都能实现服务间的数据交换，但在类型检查方面，RPC的强类型检查和HTTP的弱类型之间有着显著的差异。本文将深入探讨这两种通信方式在类型检查方面的优缺点，以及它们对微服务架构的影响。 一、RPC的强类型检查 RPC的强类型检查是其核心优势之一。在RPC通信中，客户端和服务端都使
阅读更多...
ROS2从入门到精通4-4：局部控制插件开发案例(以PID算法为例)

ROS2从入门到精通4-4：局部控制插件开发案例(以PID算法为例)

目录 0 专栏介绍1 控制插件编写模板1.1 构造控制插件类1.2 注册并导出插件1.3 编译与使用插件 2 基于PID的路径跟踪原理3 控制插件开发案例(PID算法)常见问题 0 专栏介绍 本专栏旨在通过对ROS2的系统学习，掌握ROS2底层基本分布式原理，并具有机器人建模和应用ROS2进行实际项目的开发和调试的工程能力。 🚀详情：《ROS2从入门到精通》 1 控制插
阅读更多...
图形编辑器基于Paper.js教程03：认识Paper.js中的所有类

图形编辑器基于Paper.js教程03：认识Paper.js中的所有类

先来认一下Paper的资源对象，小弟有哪些，有个整体的认识。认个脸。 在Paper.js的 官方文档中类大致有如下这些： 基类： ProjectViewItemPointToolSizeSegmentRectangleCurveCurveLocationMatrixColorStyleTweenToolEventGradientGradientStopEvent 二级或三级类 继承Ite
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2