chrome插件,修改对应URL的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
├── 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;
}

加载和测试扩展

  1. 打开 Chrome 浏览器。
  2. 进入 chrome://extensions/ 页面。
  3. 打开右上角的“开发者模式”。
  4. 点击“加载已解压的扩展程序”按钮。
  5. 选择你的扩展所在的目录 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 请求等。
  • 要确保匹配模式的准确性和有效性,请测试您的规则并进行必要的调整。

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

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

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

相关文章

巧用 MyBatis Plus 实现数据权限控制

列表实现方案有两种&#xff0c;一是在开发初期就做好判断赛选&#xff0c;但如果这个需求是中途加的&#xff0c;或不希望每个接口都加一遍&#xff0c;就可以方案二加拦截器的方式。 在mybatis执行sql前修改语句&#xff0c;限定where范围。 当然拦截器生效后是全局性的&…

JAVA【案例5-2】模拟默认密码自动生成

【模拟默认密码自动生成】 1、案例描述 本案例要求编写一个程序&#xff0c;模拟默认密码的自动生成策略&#xff0c;手动输入用户名&#xff0c;根据用户名自动生成默认密码。在生成密码时&#xff0c;将用户名反转即为默认的密码。 2、案例目的 &#xff08;1&#xff09…

JavaWeb系列六: 动态WEB开发核心(Servlet) 上

韩老师学生 官网文档为什么会出现Servlet什么是ServletServlet在JavaWeb项目位置Servlet基本使用Servlet开发方式说明快速入门- 手动开发 servlet浏览器请求Servlet UML分析Servlet生命周期GET和POST请求分发处理通过继承HttpServlet开发ServletIDEA配置ServletServlet注意事项…

【力扣C++】判断子序列

给定字符串 s 和 t &#xff0c;判断 s 是否为 t 的子序列。 字符串的一个子序列是原始字符串删除一些&#xff08;也可以不删除&#xff09;字符而不改变剩余字符相对位置形成的新字符串。&#xff08;例如&#xff0c;"ace"是"abcde"的一个子序列&#…

【Python/Pytorch - 网络模型】-- 高阶SVD算法

文章目录 文章目录 00 写在前面01 基于Python版本的高阶SVD算代码02 HOSVD 的步骤 00 写在前面 高阶奇异值分解&#xff08;Higher-Order SVD&#xff0c;HOSVD&#xff09;是一种将传统的奇异值分解&#xff08;SVD&#xff09;扩展到高阶张量的方法。它能够将一个高阶张量分…

【AI编译器】triton学习:矩阵乘优化

Matrix Multiplication 主要内容&#xff1a; 块级矩阵乘法 多维指针算术 重新编排程序以提升L2缓存命 自动性能调整 Motivations 矩阵乘法是当今高性能计算系统的一个关键组件&#xff0c;在大多数情况下被用于构建硬件。由于该操作特别复杂&#xff0c;因此通常由软件提…

mprpc框架的配置文件加载

目录 1.回顾测试 2.mprpc框架的配置文件加载 2.1 mprpcconfig.h 2.2 完善mprpcapplication.h 2.3 完善mprpcapplication.cc 2.4 mprpcconfig.cc 2.5 test.conf 2.6 测试运行 ​3.扩展问题 1.回顾测试 我们先把之前的项目代码工程编译好&#xff0c;然后进入bin里面&am…

GPOPS-II教程(2): 可复用火箭再入大气层最优轨迹规划问题

问题描述 考虑一类可复用火箭再入大气层最优轨迹规划问题&#xff0c;其动力学方程为 { r ˙ v sin ⁡ γ , θ ˙ v cos ⁡ γ sin ⁡ ψ r cos ⁡ ϕ , ϕ ˙ v cos ⁡ γ cos ⁡ ψ r , v ˙ − F d m − F g sin ⁡ γ , γ ˙ F l cos ⁡ σ m v − ( F g v − v r …

深入解析MSE在深度学习回归中的双重角色

深入解析MSE在深度学习回归中的双重角色 在深度学习特别是回归任务中&#xff0c;均方误差&#xff08;Mean Squared Error, MSE&#xff09;是一种广泛使用的方法&#xff0c;既可作为损失函数也可作为评价指标。这种使用方式可能会引起一些疑问&#xff1a;作为损失函数和评…

高考填报志愿(选专业),为什么要尊重孩子的选择 ?

没有哪一位父母不希望自己的孩子能够考到理想的大学&#xff0c;甚至光宗耀祖&#xff0c;然而一些比较专制的家长&#xff0c;往往在孩子填报志愿的时候表现出很强的控制欲&#xff0c;希望将自己的意愿强加于孩子身上&#xff0c;并没有考虑到他们的兴趣是什么。其实&#xf…

【IM 服务】新用户为什么刚注册就能收到通知?为什么能接收注册前的通知?

功能说明&#xff1a; 默认新注册的用户可以接收到注册前 7 天内的广播消息。您可以从控制台免费基础功能页面关闭该服务。 开通方式&#xff1a; 访问开发者后台 免费基础功能 1页面&#xff0c;确认应用名称与环境&#xff08;开发 /生产 &#xff09;正确无误后&#xff0c…

springboot+vue+mybatis门窗管理系统+PPT+论文+讲解+售后

如今社会上各行各业&#xff0c;都在用属于自己专用的软件来进行工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。互联网的发展&#xff0c;离不开一些新的技术&#xff0c;而新技术的产生往往是为了解决现有问题而产生的。针对于仓库信息管理方…

为什么要升级服务器?

随着业务的不断扩展和技术的持续进步&#xff0c;服务器升级成为确保企业IT基础设施与时俱进的重要手段。服务器升级不仅可以提升性能&#xff0c;还能增强系统的稳定性和扩展能力&#xff0c;满足日益增长的业务需求。本文将探讨服务器升级的原因、策略。 服务器升级的原因&a…

Java-day01--基础知识

1、计算机基础知识&#xff1a; 计算机主要是由硬件和软件组成&#xff0c;软件指的是特定顺序的计算机指令&#xff0c;硬件主要可以看成是系统软件和应用软件等。 目前java主流分成三种&#xff1a;javase&#xff08;标准版&#xff09;、javame&#xff08;小型版&#x…

优化了自制的浏览器主页的全屏功能

第一次修改 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>全屏功能</title><style>…

数据分析必备:一步步教你如何用matplotlib做数据可视化(12)

1、Matplotlib 3D线框图 线框图采用值网格并将其投影到指定的三维表面上&#xff0c;并且可以使得到的三维形式非常容易可视化。plot_wireframe()函数用于此目的 import matplotlib.pyplot as plt import numpy as np import math import seaborn as sns plt.rcParams[font.s…

数据结构-----【链表:基础】

链表基础 1、链表的理论基础 1&#xff09;基础&#xff1a; 链表&#xff1a;通过指针串联在一起的线性结构&#xff0c;每个节点由两部分组成&#xff0c;一个是数据域&#xff0c;一个是指针域&#xff08;存放指向下一个节点的指针&#xff09;&#xff0c;最后一个指针…

悬吊训练系统对于康复患者有什么好处

悬吊训练系统对于康复患者有多种好处&#xff0c;这些好处体现在身体功能的恢复、疼痛缓解以及生活质量提升等方面。以下是对这些好处的详细归纳&#xff1a; 提高感觉运动控制能力&#xff1a;悬吊训练通过让身体在不稳定的平面上进行运动&#xff0c;能够刺激感觉运动器官&am…

在flask中加载mnist模型,并预测图片

一、在tensorflow中新建及保存模型 启动Jupyter Notebook 新建Notebook 生成 mnist_model.h5 模型的代码 import tensorflow as tf from tensorflow.keras.datasets import mnist from tensorflow.keras.models import Sequential from tensorflow.keras.layers import…

dsp开发与arm开发有什么区别,应用差别

一、DSP开发与ARM开发的区别 DSP&#xff08;Digital Signal Processor&#xff09;和ARM&#xff08;Advanced RISC Machine&#xff09;是两种不同类型的处理器&#xff0c;它们在设计理念、应用领域、指令集架构、性能特点等方面有所区别。 设计理念和应用领域 DSP&#…