Javascript 浏览器 WebExtension API - 获取活动选项卡的所有标头和其他参数

Question

我正在为浏览器开发一个简单的插件来进行练习，因为我是 javascript 的新手，并且我正在阅读与该主题相关的文档 https://developer.mozilla.org/en-US/docs/Web/API

我的目的是能够复制网络的“复制为 cURL”浏览器开发工具内的选项卡在我正在创建的上下文菜单中。

例如，如果我考虑 https://stackoverflow.com 的“复制为 cURL”命令（通过使用 Firefox 91.5.0esr（64 位） )：

curl 'https://stackoverflow.com/' -H 'User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:91.0) Gecko/20100101 Firefox/91.0' -H 'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8' -H 'Accept-Language: en-US,en;q=0.5' --compressed -H 'Referer: https://www.google.com/' -H 'Connection: keep-alive' -H 'Cookie: prov=d03ecfc2-207d-cda2-bb6b-38b282cd5b84; _ga=GA1.2.1551734572.1648346036; _gid=GA1.2.1710305938.1648346036; _gat=1' -H 'Upgrade-Insecure-Requests: 1' -H 'Sec-Fetch-Dest: document' -H 'Sec-Fetch-Mode: navigate' -H 'Sec-Fetch-Site: cross-site' -H 'Sec-Fetch-User: ?1' -H 'Cache-Control: max-age=0' -H 'TE: trailers'

我能够获取 Cookie 值，但无法获取其他标头或任何其他参数（即 POST 数据参数）。到目前为止，我的代码如下：

script.js

/*
Called when the item has been created, or when creation failed due to an error.
We'll just log success/failure here.
*/
function onCreated() {
  if (browser.runtime.lastError) {
    console.log(`Error: ${browser.runtime.lastError}`);
  } else {
    console.log("Item created successfully");
  }
}

/*
Called when the item has been removed.
We'll just log success here.
*/
function onRemoved() {
  console.log("Item removed successfully");
}

/*
Called when there was an error.
We'll just log the error here.
*/
function onError(error) {
  console.log(`Error: ${error}`);
}

/*
Create all the context menu items.
*/

browser.menus.create({
  id: "tools-copy",
  title: browser.i18n.getMessage("menuItemToolsCopy"),
  contexts: ["all"],
}, onCreated);

browser.menus.create({
  id: "tools-copy-as-cURL-example",
  parentId: "tools-copy",
  type: "radio",
  title: browser.i18n.getMessage("menuItemToolsCopyAsCURL"),
  contexts: ["all"],
  checked: false
}, onCreated);

/*
functions to impl
*/

function updateClipboard(newClip) {
  navigator.clipboard.writeText(newClip).then(function() {
    /* clipboard successfully set */
  }, function() {
    /* clipboard write failed */
  });
}

//get active tab to run an callback function.
//it sends to our callback an array of tab objects
function getActiveTab() {
  return browser.tabs.query({currentWindow: true, active: true});
}

function showCookiesForTab(tabs) {
  //get the first tab object in the array
  let tab = tabs.pop();

  //get all cookies in the domain
  var gettingAllCookies = browser.cookies.getAll({url: tab.url});
  var str_cookies = "";

  gettingAllCookies.then((cookies) => {
    if (cookies.length > 0) {
      str_cookies = "-H 'Cookie: ";
      for (let cookie of cookies) {
        str_cookies = str_cookies.concat(cookie.name + "="+ cookie.value+"; ");
      }
      str_cookies = str_cookies.replace(/.{0,2}$/,"'");
      console.log(str_cookies);
    }
  });
}

/*
The click event listener, where we perform the appropriate action given the
ID of the menu item that was clicked.
*/
browser.menus.onClicked.addListener((info, tab) => {
  switch (info.menuItemId) {    
    case "tools-copy-as-cURL-example":
      getActiveTab().then(showCookiesForTab);
      break;
  }
});

message.json

{  
  "extensionName": {
    "message": "Copy as cURL demo",
    "description": "Name of the extension."
  },

  "extensionDescription": {
    "message": "Demonstrates the menus API for copying cURL.",
    "description": "Description of the add-on."
  },

  "menuItemToolsCopy": {
    "message": "Copy",
    "description": "Title of tools copy item."
  },

  "menuItemToolsCopyAsCURL": {
    "message": "Copy as cURL",
    "description": "Title of cURL copy item."
  }
}

ma​​nifest.json

{
  "manifest_version": 2,
  "name": "__MSG_extensionName__",
  "description": "__MSG_extensionDescription__",
  "version": "1.0",
  "default_locale": "en",
  "browser_specific_settings": {
    "gecko": {
      "strict_min_version": "56.0a1"
    }
  },

  "background": {
    "scripts": ["script.js"]
  },
  
  "permissions": [
    "menus",
    "activeTab",
    "cookies",
    "webRequest",
    "<all_urls>",
    "tabs",
    "clipboardWrite"
  ]
}

根据文档，我尝试使用此对象数组https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest/HttpHeaders 以及 browser.webRequest.onHeadersReceived.addListener( ) 但没有运气。

我的目的只是读取浏览器当前活动选项卡的标题。我不需要编辑它们。

如何获取所有标头和任何数据参数（如果是 POST 请求）？ 很抱歉提出这些简单的请求，我是这个主题的新手。

先感谢您。

Answer 1

无法追溯获取选项卡的此信息，因此您必须不断观察网络，并将数据存储在每个选项卡 id 和框架 id 的全局对象中以支持框架。

const tabData = {};
const getProp = (obj, key) => (obj[key] || (obj[key] = {}));
const encodeBody = body => 'implement it yourself';

const FILTER = {
  types: ['main_frame', 'sub_frame'],
  urls: ['<all_urls>'],
};

browser.webRequest.onBeforeRequest.addListener(e => {
  getProp(getProp(tabData, e.tabId), e.frameId).body = e.requestBody;
}, FILTER, ['requestBody']);

browser.webRequest.onSendHeaders.addListener(e => {
  getProp(getProp(tabData, e.tabId), e.frameId).headers = e.requestHeaders;
}, FILTER, ['requestHeaders']);

browser.tabs.onRemoved.addListener(tabId => delete tabData[tabId]);

browser.tabs.onReplaced.addListener((addId, delId) => delete tabData[delId]);

browser.menus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === 'tools-copy-as-cURL-example') {
    const data = tabData[tab.id]?.[info.frameId || 0] || {};
    navigator.clipboard.writeText(`curl '${info.frameUrl || tab.url}'` +
      (data.headers?.map(h => ` -H '${h.name}: ${h.value}'`).join('') || '') +
      (data.body ? ' ' + encodeBody(data.body) : ''));
  }
});