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

于 2024-06-21 17:32:27 发布
阅读量895 收藏 31
点赞数 17
分类专栏： 日常琐问 文章标签： chrome http ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuanyuanjiaqi/article/details/139866607
版权

要创建一个可以灵活修改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 updated
  chrome.storage.sync.get(['headers'], function(result) {
    if (result.headers) {
      customHeaders = result.headers;
    }
  });
});

chrome.webRequest.onBeforeSendHeaders.addListener(
  function(details) {
    
    // Modify request headers
    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;
  }
});

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 load
    chrome.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 请求头，适用于各种不同的需求，且这些设置可以在不同设备之间同步。

serve the people
关注
  • 17
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Chrome浏览器设置header请求 响应头 使用 Chrome ModHeader插件，添加/修改/删除HTTP请求标头和响应标头
xianyinsuifeng的博客
10-28 1万+
ModHeader插件支持添加/修改/删除请求标头和响应标头，并可以启用基于URL /资源类型的标题修改。在浏览器右上角的扩展程序中，确认ModHeader是否已经适用。在窗口的+号上，可以添加其他属性。进行修改，删除，置空。修改headers里的项目属性。点击modHeader，开启。添加扩展程序，并且开启使用。
chrome插件，修改对应URL的http请求的header头，包括ajax请求
最新发布
06-25
chrome插件 1. 根据正则表达式指定URL 2. 对自定义header头的修改对url正则表达式有效 3. 自定义header对页面中的ajax代码依然有效 4. 自定义header对页面中的css、js文件依然有效 5. 自定义header可对浏览器中所有...
谷歌 ModHeader 自定义HTTP请求头利器
CSDN_liwaerduo的博客
05-20 254
谷歌 ModHeader 自定义HTTP请求头利器
修改/增加chrom浏览器请求头
12-22
修改chrom请求头,修改chrom请求头,
Chrome设置header请求响应头 Chrome ModHeader插件，添加/修改/删除HTTP请求标头和响应标头
qq_33816292的博客
02-01 934
设置谷歌浏览器head属性
使用浏览器插件修改request请求header头
charlie_y的博客
06-08 2835
最近遇到了一个疑似header头引发的bug，需要修改header头来验证，于是写了个插件来实现目前每修改一次参数就需要重新加载一次插件，后续的话准备做成可配置。
chrome扩展插件拦截修改请求头
BinByte的博客
09-24 8979
由于部分需求需要调用从三方抓包的来的接口取得一些数据,需要用谷歌扩展插件跨域请求三方接口,并携带部分头部信息,找了几个小时,终于找到了这个方法。某些浏览器添加以上代码后加载报 extraHeaders 错误,解决方法!(如果不报错就不必修改不然拦截会失效)
Allow-CORS_-Access-Control-Allow-Origin_v0.1.2.crx
02-27
此插件为跨域插件，打开后可跨域访问接口，旧版浏览器可直接拖到扩展程序中安装，新版浏览器需要将扩展名修改成rar并解压，然后点击“加载已解压的扩展程序”安装。 ======================插件概述谷歌译文=====...
Allow-Control-Allow-Origin
11-20
"Allow-Control-Allow-Origin" 是一个重要的HTTP响应头字段，它涉及到Web开发中的跨域资源共享（CORS）策略。在浏览器的同源策略下，不同源的网页无法直接交互，但通过CORS，服务器可以允许特定的跨域请求。"Allow-...
pretty-妈咪商城前端界面含详细前端代码
03-05
这个项目为新手提供了实践前端编程技能的机会，同时也展示了如何构建一个功能完善的电商前端界面。 在前端开发中，通常会涉及到以下关键技术点： 1. HTML5：作为网页的基础结构语言，HTML5提供了丰富的标签和元素...
chrome 自定义header插件
10-12
chrome浏览器扩展程序，直接拖拽可用的自定义header插件。可自定义Request headers，便于web调试。
chrome http请求插件(可离线安装)
11-21
DHC是一款可以帮助用户使用chrome插件模拟HTTP客户端发送测试数据到服务器的谷歌浏览器插件，在chrome中安装了DHC插件以后，就可在服务器端代码初步完成的时候，使用DHC进行数据测试，支持get、post、put、delete请求，可离线安装
Header Editor-crx插件
04-02
语言:English,polski,português (Brasil),中文 (简体),中文 (繁體) 管理浏览器请求，包括修改请求头和响应头、重定向请求、取消请求 修改请求头、响应头、重定向请求、取消请求如果此扩展名没有包含您想要的语言，您可以在Transifex上帮助我们将其翻译成其他语言：https://www.transifex.com/sytec/header-editor/您可以从Redirector导入规则：http://redirector.team.firefoxcn.net/
chrome插件修改请求头
02-12
修改chrome的请求头。 Header Editor是一款管理浏览器请求的Chrome扩展，包括修改请求头、修改响应头、重定向请求、取消请求。 　　您可以从Redirector导入规则 　　规则说明： 　　1、匹配类型 　　规则会应用到满足相应匹配条件的URL上 　　全部：对应所有URL，包括Header Editor自身 　　正则表达式：支持标准的JS正则表达式。例如你输入的正则表达式是str，那么，实际上，程序内部就会使用new RegExp(str)初始化正则表达式。如果匹配规则是正则表达式，则修改结果（目前包括重定向至）支持使用形似$1的占位符 网址前缀：包括http://在内的网址前缀 　　域名：包含子域名在内的完整的域名 　　网址：包括“?”及之后的所有内容的完整地址 　　2、排除规则 　　不论是否满足匹配规则，只要满足了排除规则，那么此条均不会对当前URL生效 　　3、自定义函数 　　通过自定义函数实现更灵活的功能。 　　其他特殊功能 　　使用功能“修改请求头”或“修改响应头”时，将头内容设置为_header_editor_remove_
TamperChrome一个Chrome扩展程序允许您即时修改HTTP请求并帮助Web安全测试
08-07
Tamper Chrome一个Chrome扩展程序，允许您即时修改HTTP请求，并帮助Web安全测试，Tamper Chrome可以在所有操作系统（包括Chrome操作系统）上运行。
使用js+nodejs服务器状态共享脚本
05-11
而Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它允许我们在服务器端运行JavaScript代码，实现了服务器和客户端的全栈JavaScript开发。 1. **设置Node.js服务器**： 在Node.js中，我们使用内置的`http`...
探索 Modify HTTP Headers：一款强大的网络请求头修改工具
gitblog_00068的博客
04-20 959
探索 Modify HTTP Headers：一款强大的网络请求头修改工具 项目地址:https://gitcode.com/youfulife/modify-http-headers 在今天的数字世界中，我们每天都在与无数的HTTP请求打交道，它们构成了网页浏览、数据交换的基础。而Modify HTTP Headers是一个开源项目，旨在帮助开发者和高级用户自定义和操控这些请求的头部信息，以满...
Chrome设置header请求响应头 Chrome ModHeader插件，添加/修改/删除HTTP请求标头和响应标头...
牛奔的博客
07-27 6481
ModHeader，是一款可以添加/修改/删除请求标头和响应标头的浏览器插件。 ModHeader插件功能 首先，ModHeader插件支持添加/修改/删除请求标头和响应标头，并可以启用基于URL /资源类型的标题修改。 其次，可以在标题中添加评论，支持多个不同的配置文件，可以按名称、值或注释对标题进行排序，并且能将值附加到现有请求或响应标头。 另外，ModHeader插件支持导出和导入标题，云...
写个chrome插件 要求：拦截ajax请求并修改返回结果
06-11
好的，下面是大致的步骤： 1. 创建一个新的Chrome插件项目，可以在manifest.json文件中指定需要的权限，例如拦截网络请求和访问DOM。 2. 在background.js文件中编写拦截请求的代码。可以使用chrome.webRequest.onBeforeRequest监听XMLHttpRequest和fetch请求，并在回调函数中修改响应结果。 ```javascript chrome.webRequest.onBeforeRequest.addListener( function(details) { // 拦截请求并修改响应结果 return {redirectUrl: "data:text/plain;charset=UTF-8," + encodeURIComponent("Hello, World!")}; }, {urls: ["<all_urls>"]}, ["blocking"] ); ``` 3. 在manifest.json文件中指定需要注入的内容脚本，例如可以在所有页面注入一个JS文件，以便在页面上修改响应结果。 ```json "content_scripts": [ { "matches": ["<all_urls>"], "js": ["content.js"] } ] ``` 4. 在content.js文件中编写修改响应结果的代码。可以使用MutationObserver监听DOM的变化，并在回调函数中修改响应结果。 ```javascript var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { // 修改响应结果 mutation.target.textContent = "Hello, World!"; }); }); observer.observe(document, {subtree: true, characterData: true, childList: true}); ``` 5. 打包并安装插件。在Chrome浏览器中打开扩展程序页面，点击“加载已解压的扩展程序”按钮，选择插件的根目录，即可安装插件并测试拦截和修改请求的功能。 以上是一个简单的拦截和修改请求的Chrome插件的步骤，具体实现还需要根据自己的需求进行调整。希望这些信息能对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值