javascript - 在 Chrome 扩展中执行 jQuery.ajax 请求时更改 cookie

Question

我为 facebook 编写了一个插件，用于将数据发送到 testing-fb.local。如果用户登录，请求就会通过。

这是工作流程:

1. 用户从 testing-fb.local 登录
2. 存储 Cookie
3. 当 Chrome 扩展程序触发 $.ajax() 时
   • Chrome 扩展程序通过 chrome.webRequest.onBeforeSendHeaders 监听
   • Chrome 扩展程序检查来自 chrome.cookies.get 的 Cookie
   • Chrome 更改要发送的 Set-Cookies header

请求成功。

我写的这部分代码应该是这样的:

function getCookies (callback) {
  chrome.cookies.get({url:"https://testing-fb.local", name: "connect.sid"}, function(a){
    return callback(a)
  })
}

chrome.webRequest.onBeforeSendHeaders.addListener(
  function(details) {
    getCookies(function(a){

// Here something happens

    })
  },
  {urls: ["https://testing-fb.local/*"]},
  ['blocking']);

这是我的 manifest.json:

{
  "name": "test-fb",
  "version": "1.0",
  "manifest_version": 1,
  "description": "testing",
  "permissions": [
    "cookies",
    "webRequest",
    "tabs",
    "http://*/*",
    "https://*/*"
  ],    
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
        {
          "matches": ["http://*.facebook.com/*", "https://*.facebook.com/*"],
          "exclude_matches" : [
            "*://*.facebook.com/ajax/*",
            "*://*.channel.facebook.tld/*",
            "*://*.facebook.tld/pagelet/generic.php/pagelet/home/morestories.php*",
            "*://*.facebook.tld/ai.php*"
          ],
          "js": ["jquery-1.8.3.min.js", "allthefunctions.js"]
        }
      ]
}

在 allthefunction.js 中，我有 $.ajax 调用，在 background.js 中，我将代码放在上面，但看起来无法运行..

综上所述，我还不清楚:

• 我应该写什么这里发生了一些事情
• 如果这个策略有效
• 我应该将此代码放在哪里？

Answer 1

Chrome 更改了要发送的 Set-Cookies header ，我相信您想为 HTTP 请求发送自定义 Cookie header ，因为 Set-Cookie header由服务器发送以响应 HTTP 请求，用于在用户系统上创建 cookie。

请记下全部Cookie API() methods是asynchronous ，确保您的回调驱动您的功能；

我尝试通过此示例演示复制您的工作流程

演示

后台页面查找对 http://www.w3schools.com/html/default.asp 的所有请求并修改cookie详细信息

background.js

// Adding Event Listener for Changing Cookie Details in Header
chrome.webRequest.onBeforeSendHeaders.addListener(function (details) {

    // Look for header details here
    detail = "requestHeaders";
    headers = details[detail];

    // Iterate through all headers information
    for (header in headers) {

        // Stop at Cookie Information
        if (headers[header].name == "Cookie") {

            // Do your desired functionality either modifying/delet cookies etc

            //chrome.cookies.get({url:"<your url>", name: "<your parameter>"}, function(Cookies){
            //console.log("Cookies  "+Cookies);
            return {
                requestHeaders: details.requestHeaders
            };
            //});


        }
    }

},
//Sample URL used
{
    urls: ["http://www.w3schools.com/html/default.asp"]
},

// Block Web Request and request for header information

['blocking', "requestHeaders"]);

allfunctions.js

对 asp page 的简单 AJAX 调用

 //Do an AJAX Call
 function ajaxCall() {
     $.post("http://www.w3schools.com/html/default.asp", function (data) {
         console.log("POST Completed " + data);
     });
 }
 ajaxCall();

ma​​nifest.json

确保 list 具有所有权限

{
  "name": "test-fb",
  "version": "1.0",
  "manifest_version": 2,
  "description": "testing",
  "permissions": [
    "cookies",
    "webRequest",
    "tabs",
    "<all_urls>",
    "webRequestBlocking" 
  ],    
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
        {
          "matches": ["<all_urls>"],
          "js": ["jquery.js", "allthefunctions.js"]
        }
      ]
}

这样我就能够跟踪 AJAX 调用的请求 header 并修改 cookie 信息，如果您需要更多信息，请告诉我。