如何在 Chrome 扩展清单版本 3 中获取请求的 API 响应正文

Question

我正在开发清单版本 3，并陷入了通过 chrome 扩展中请求的 API 获取响应正文的无尽漏洞。

目标是获得所有请求的 API 响应

这是代码。

清单.json

{
  "name": "Chapter 28 (MV3)",
  "version": "1.0",
  "manifest_version": 3,
  "description": "This is Chapter 28",
  "declarative_net_request" : {
    "rule_resources" : [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules_1.json"
    }]
  },
  "permissions": [
    "declarativeNetRequest",
    "declarativeNetRequestFeedback"
  ],
  "background": {
    "service_worker": "background.js"
  }
}

规则_1.json

  [
  {
    "id": 1,
    "priority": 1,
    "action": {
      "type": "block"
    },
    "condition": {
      "urlFilter": "yahoo.co.jp",
      "resourceTypes": ["main_frame"]
    }
  },
  {
    "id": 2,
    "priority": 1,
    "action": {
      "type": "allow"
    },
    "condition": {
      "resourceTypes": ["main_frame", "xmlhttprequest"]
    }
  }
]

背景.js

chrome.declarativeNetRequest.onRuleMatchedDebug.addListener((mrd) => {
  console.log(mrd)
});

Answer 1

所以这就是 API 无法完成的事情，所以我使用了注入方法来修复它，下面是固定代码，因此它也可以帮助其他人

清单.json

{
  "name": "officialbrajesh",
  "version": "1.0",
  "manifest_version": 3,
  "description": "This is Test Extension",
  "web_accessible_resources": [{
  "resources": ["inject.js"],
  "matches": ["<all_urls>"]
}],
"content_scripts": [
   {
     "matches": ["<all_urls>"],
     "js": ["contentscript.js"]
   }
 ],
  "permissions": [
  "tabs"
  ],
  "background": {
    "service_worker": "background.js"
  }
}

内容脚本.js

var s = document.createElement('script');
s.src = chrome.runtime.getURL('inject.js');
s.onload = function() {
    this.remove();
};
(document.head || document.documentElement).appendChild(s);


document.addEventListener('yourCustomEvent', function (e) {
  var data = e.detail;
  console.log('content script');
  console.log('received', e);
});

注入.js

(function(xhr) {
    var XHR = XMLHttpRequest.prototype;
    var open = XHR.open;
    var send = XHR.send;
    var setRequestHeader = XHR.setRequestHeader;
    XHR.open = function(method, url) {
        this._method = method;
        this._url = url;
        this._requestHeaders = {};
        this._startTime = (new Date()).toISOString();
        return open.apply(this, arguments);
    };
    XHR.setRequestHeader = function(header, value) {
        this._requestHeaders[header] = value;
        return setRequestHeader.apply(this, arguments);
    };
    XHR.send = function(postData) {
        this.addEventListener('load', function() {
            var endTime = (new Date()).toISOString();
            var myUrl = this._url ? this._url.toLowerCase() : this._url;
            if(myUrl) {
                if (myUrl.indexOf('https://i.instagram.com/api/v1') !== -1) {
                    console.log(myUrl);
                    var responseData = this.response;
                    console.log(responseData);
                    document.dispatchEvent(new CustomEvent('yourCustomEvent', { url : myUrl, detail: responseData }));                  
                }
            }
        });
        return send.apply(this, arguments);
    };

})(XMLHttpRequest);