当前位置：首页 > news >正文

chrome插件，修改对应URL的http请求的header头，包括ajax请求

news 2026/1/10 11:50:38

要创建一个可以灵活修改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
├── options.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 = {};
let urlPattern = '';chrome.runtime.onInstalled.addListener(() => {chrome.storage.sync.get(['urlPattern', 'headers', 'values'], function(result) {if (result.urlPattern) {urlPattern = result.urlPattern;}if (result.headers && result.values) {for (let i = 0; i < result.headers.length; i++) {customHeaders[result.headers[i]] = result.values[i];}}});
});chrome.webRequest.onBeforeSendHeaders.addListener(function(details) {if (details.url.match(new RegExp(urlPattern))) {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') {if (changes.urlPattern) {urlPattern = changes.urlPattern.newValue;}if (changes.headers && changes.values) {customHeaders = {};for (let i = 0; i < changes.headers.newValue.length; i++) {customHeaders[changes.headers.newValue[i]] = changes.values.newValue[i];}}}
});

`options.html`

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Extension Options</title><link rel="stylesheet" href="options.css">
</head>
<body><div class="container"><h1>Modify HTTP Headers</h1><div class="url-pattern"><label for="url-pattern-input">URL Pattern:</label><input type="text" id="url-pattern-input" placeholder="URL Pattern"></div><table id="headers-table"><thead><tr><th>Header Name</th><th>Header Value</th><th>Actions</th></tr></thead><tbody id="headers-container"><!-- Header entries will be dynamically added here --></tbody></table><div class="buttons"><button id="add-header">Add Header</button><button id="save-headers">Save Headers</button></div></div><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('tr');headerEntry.className = 'header-entry';headerEntry.innerHTML = `<td><input type="text" placeholder="Header Name" class="header-name"></td><td><input type="text" placeholder="Header Value" class="header-value"></td><td><button class="remove-header">Remove</button></td>`;headerEntry.querySelector('.remove-header').addEventListener('click', function() {headerEntry.remove();});headersContainer.appendChild(headerEntry);});saveHeadersButton.addEventListener('click', function() {const headers = [];const values = [];document.querySelectorAll('.header-entry').forEach(entry => {const name = entry.querySelector('.header-name').value;const value = entry.querySelector('.header-value').value;if (name && value) {headers.push(name);values.push(value);}});const urlPattern = document.getElementById('url-pattern-input').value;chrome.storage.sync.set({urlPattern: urlPattern, headers: headers, values: values}, function() {alert('Headers saved');});});chrome.storage.sync.get(['urlPattern', 'headers', 'values'], function(result) {if (result.urlPattern) {document.getElementById('url-pattern-input').value = result.urlPattern;}if (result.headers && result.values) {for (let i = 0; i < result.headers.length; i++) {const headerEntry = document.createElement('tr');headerEntry.className = 'header-entry';headerEntry.innerHTML = `<td><input type="text" value="${result.headers[i]}" class="header-name"></td><td><input type="text" value="${result.values[i]}" class="header-value"></td><td><button class="remove-header">Remove</button></td>`;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;
}#open-options {background-color: #4CAF50; /* Green */border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;
}

`options.css`

.container {width: 800px;margin: 20px auto;padding: 20px;border: 1px solid #ccc;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}h1 {font-size: 20px;margin-bottom: 20px;text-align: center;
}.url-pattern {margin-bottom: 20px;
}.url-pattern label {margin-right: 10px;
}input[type="text"] {width: 96%;padding: 10px;margin-bottom: 10px;border: 1px solid #ccc;border-radius: 5px;
}#headers-table {width: 100%;border-collapse: collapse;border: none; /* 移除表格的边框 */
}#headers-table th, #headers-table td {border: 1px solid #ccc;padding: 10px;text-align: center;
}#headers-table th {background-color: #f2f2f2; /* 添加表头背景色 */
}#headers-table td input[type="text"] {width: calc(100% - 20px); /* 考虑到内边距，调整输入框的宽度 */padding: 8px;margin: 0;border: none; /* 移除输入框的边框 */border-radius: 5px;box-sizing: border-box;
}.buttons {margin-top: 20px;text-align: center;
}.buttons button {margin: 0 10px;padding: 10px 20px;font-size: 16px;cursor: pointer;border: none;border-radius: 5px;background-color: #4CAF50;color: white;
}.buttons button:hover {background-color: #45a049;
}

加载和测试扩展

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

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

你可以写一段简单的说明，介绍用户如何使用 url-pattern，并提供一些示例。以下是一个可能的写作方式：

URL 匹配模式说明

URL 匹配模式允许您指定哪些 URL 将受到您自定义的 HTTP 标头的影响。这些模式采用简单的通配符形式，允许您根据需要指定匹配的 URL。

基本语法：

*：匹配任意字符序列（包括空字符）
?：匹配单个字符

示例：

example.com：匹配 http://example.com/ 和 https://example.com/ 等
*.example.com：匹配 http://sub.example.com/、https://www.example.com/ 等
https://example.com/*：仅匹配以 https://example.com/ 开头的 URL，包括其所有子路径

注意事项：

匹配模式将应用于所有 HTTP 请求，包括页面加载、AJAX 请求等。
要确保匹配模式的准确性和有效性，请测试您的规则并进行必要的调整。

你可以根据实际需要调整和扩展这个说明。

chrome插件，修改对应URL的http请求的header头，包括ajax请求

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

编程日记 2024/6/26 8:01:59

C语言 | Leetcode C语言题解之第191题位1的个数

题目： 题解： int hammingWeight(uint32_t n) {int ret 0;while (n) {n & n - 1;ret;}return ret; }...

编程日记 2024/6/26 8:00:57

【C++11(二)】lambda表达式和可变参数模板

一、可变参数模板 C11的新特性可变参数模板能够让您创建可以接受可变参数的函数模板和类模板 // Args是一个模板参数包，args是一个函数形参参数包 // 声明一个参数包Args...args，这个参数包中可以包含0到任意个模板参数。 template <class ...Arg…...

编程日记 2024/6/26 7:58:55

昇思25天学习打卡营第2天|张量Tensor

张量Tensor 创建张量张量的属性张量索引张量运算稀疏张量总结简单讲讲张量，数学和物理学界以一种方式定义张量，机器学习上则是以另一种方式定义张量，这里的张量也与神经网络联系紧密，神经网络需要进行大量的数学计算&#xff0…...

编程日记 2024/6/26 7:57:54

[leetcode]valid-triangle-number. 有效三角形的个数

. - 力扣（LeetCode） class Solution { public:int triangleNumber(vector<int>& nums) {int n nums.size();sort(nums.begin(), nums.end());int ans 0;for (int i 0; i < n; i) {for (int j i 1; j < n; j) {int left j 1, righ…...

编程日记 2024/6/26 7:56:52

java SQL server 多实例的情况

而对于java，对付多个数据库实例就有些要注意的了： 首先，同样连接字符串上加上“\实例名”： jdbc:sqlserver://127.0.0.1\\mssqlserver2008;DatabaseNameLPT; 此处应去掉端口1433。因为连接数据库自命名实例的url中没有端口号1433…...

编程日记 2024/6/26 7:54:51

html--404页面

<!DOCTYPE html> <html> <head> <meta http-equiv"Content-Type" content"text/html; charsetUTF-8"> <meta http-equiv"X-UA-Compatible" content"IEedge,chrome1"> <title>404 错误页面不存在&…...

编程日记 2024/6/26 7:52:48

[word] Word如何删除所有的空行？ #职场发展#学习方法

Word如何删除所有的空行？ 很多网友从网页复制文字粘贴到word文档后发现段落之间有空行，如果文字不多，手动删除这些空行也没有多少工作量，但是如果文字的字数达到成千上万，一个个手动删除这些空行还是很繁琐的。那么&a…...

编程日记 2024/6/26 7:50:46

【CSS】深入探讨 CSS 的 `calc()` 函数

深入探讨 CSS 的 calc() 函数 calc() 是一个 CSS 函数，用于在样式表中进行数学计算，从而动态地设置 CSS 属性值。它允许开发者在指定长度、百分比、数值等时，进行加减乘除运算。通过 calc() 函数，我们可以实现更灵活和响应式的设…...

编程日记 2024/6/26 7:49:45

MongoDB异地备份数据文件脚本（带日志打印，便于排查）

此脚本是以文件夹的形式备份，非压缩包形式如需备份成加密压缩包，可用此脚本：MongoDB定时异地备份所有数据库为加密压缩包-CSDN博客 1.可以直接下载本文件使用，将其放到mongo安装目录的bin目录下（可手动执行&#xf…...

编程日记 2024/6/26 7:48:43

论文导读 | Manufacturing Service Operations Management近期文章精选

编者按在本系列文章中，我们梳理了顶刊Manufacturing & Service Operations Management5月份发布有关OR/OM以及相关应用的文章之基本信息，旨在帮助读者快速洞察行业/学界最新动态。推荐文章1 ● 题目：Robust Drone Delivery with Weath…...

编程日记 2024/6/26 7:46:40

【Linux命令】top linux下的任务管理器

一、概述 top命令是Linux下常用的性能分析工具，能够实时显示系统中各个进程的资源占用状况，类似于Windows的任务管理器。top是一个动态显示过程，即可以通过用户按键来不断刷新当前状态。如果在前台执行该命令，它将独占前台&#…...

编程日记 2024/6/26 7:45:39

2024年在分数限制下，选好专业还是选好学校？

分数限制下，选好专业还是选好学校？ 24年高考帷幕落下，一场新的思考与选择悄然来临。对于每一位高考考生，学校和专业都是开启大学新生活的两个前置必选项。但有时候“鱼与熊掌不可兼得”，在分数受限的条件下&#xff0…...

编程日记 2024/6/26 7:44:37

cropperjs 裁剪/框选图片

1.效果 2.使用组件 <Cropper ref"cropperRef" :imgUrl"url" searchImg"searchImg"></Cropper>3.封装组件 <template><el-dialog :title"title" :visible.sync"dialogVisible" wi…...

编程日记 2024/6/26 7:43:36

ArkTS开发系列之事件（2.8.2手势事件）

上篇回顾：ArkTS开发系列之事件（2.8.1触屏、键鼠、焦点事件） 本篇内容：ArkTS开发系列之事件（2.8.2手势事件） 一、绑定手势方法 1. 常规手势绑定方法 Text(手势).fontSize(44).gesture(TapGesture().onAct…...

编程日记 2024/6/26 7:42:35

【MATLAB源码-第135期】基于matlab的变色龙群优化算法CSA)机器人栅格路径规划，输出做短路径图和适应度曲线。

操作环境： MATLAB 2022a 1、算法描述变色龙群优化算法（Chameleon Swarm Algorithm，CSA）是一种新颖的群体智能优化算法，受到自然界中变色龙捕食和社交行为的启发。变色龙以其独特的适应能力而著称，能够根…...

编程日记 2024/6/26 7:41:34

使用Python实现深度学习模型：语言模型与文本生成

语言模型是自然语言处理中的核心任务之一，它们用于预测文本中的下一个单词或生成与输入文本相关的新文本。本文将详细介绍如何使用Python实现一个语言模型，并通过这个模型进行文本生成。我们将使用TensorFlow和Hugging Face的Transformers库来实现这一任务。 1. 语言模型简…...

编程日记 2024/6/26 7:40:33

大数据面试题之Hive(3)

目录 Hive的函数:UDF、UDAF、UDTF的区别? UDF是怎么在Hive里执行的 row_number，rank，dense_rank的区别 Hive count(distinct)有几个reduce，海量数据会有什么问题 HQL：行转列、列转行一条HQL从代码到执行的过程了解Hive S…...

编程日记 2024/6/26 7:39:32

华为OD机考题HJ17 坐标移动

前言应广大同学要求，开始以OD机考题作为练习题，看看算法和数据结构掌握情况。有需要练习的可以关注下。描述开发一个坐标计算工具， A表示向左移动，D表示向右移动，W表示向上移动，S表示向下移动。从&am…...

编程日记 2024/6/26 7:38:30

redis修改密码

在Redis中，修改密码通常涉及编辑Redis配置文件或者在运行时通过Redis命令动态修改。温馨提示：（运行时直接参考第2条） 1.编辑配置文件： 找到Redis配置文件redis.conf，通常位于/etc/redis/或/usr/local/e…...

编程日记 2024/6/26 7:37:28

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧一、链表基础概念与内核链表优势1.1 为什么使用链表？1.2 Linux 内核链表与用户态链表的区别二、内核链表结构与宏解析常用宏/函数三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/12/3 20:14:32

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

6月5日，2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席，并作《智能体在安全领域的应用实践》主题演讲，分享了在智能体在安全领域的突破性实践。他指出，百度通过将安全能力…...

编程新知 2026/1/6 19:45:31

Axios请求超时重发机制

Axios 超时重新请求实现方案在 Axios 中实现超时重新请求可以通过以下几种方式： 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/10/13 2:26:14

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码我们将以 fmt 这个流行的格式化库为例，演示如何：使用 FetchContent 从 GitH…...

编程新知 2026/1/3 20:28:18

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2026/1/9 0:47:11

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础协议全称 ：HyperText Transfer Protocol（超文本传输协议） 默认端口 ：HTTP 使用 80 端口，HTTPS 使用 443 端口。请求方法 ： GET ：用于获取资源，…...

编程新知 2025/10/3 0:42:17

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看一个默认的页面，gobuster扫一下目录可以看到扫出的目录中得到了一个有价值的目录/wordpress，说明目标所使用的cms是wordpress，访问http://192.168.43.213/wordpress/然后查看源码能看到这…...

编程新知 2026/1/3 8:17:56