Chrome 扩展 mv3 - 在锚点点击时捕获 zip 文件

Question

我放了两段代码。 第一个包含 chrome 扩展清单版本 2 文件。 在这里，如果我单击带有指向 zip 文件的 href 的锚点，则扩展名会从扩展名重定向到页面。 这是一个有效的例子。

我正在尝试使用清单版本 3 实现 chrome 扩展。 这是第二段代码。

第一部分。 扩展清单版本 2

ma​​nifest.json

{
  "name": "Test app mv2",
  "version": "0.1",
  "manifest_version": 2,
  "description": "test mv2",
  "background": {
    "scripts": [
      "background.js"
    ]
  },
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
  "icons": {
    "128": "128.png"
  },
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "<all_urls>"
  ],  
  "web_accessible_resources": [
    "web/main.html"
  ]
}

background.js

function getHeaderFromHeaders(headers, headerName) {
  for (var i=0; i<headers.length; ++i) {
    var header = headers[i];
    if (header.name.toLowerCase() === headerName) {
      return header;
    }
  }
}

function isAllowed(details) {
  var header = getHeaderFromHeaders(details.responseHeaders, 'content-type');
  
  if (header) {
    var headerValue = header.value.toLowerCase().split(';',1)[0].trim();

    var mimeTypes = [
      'application/zip'
    ];
    
    return (mimeTypes.indexOf(headerValue) !== -1);
  }
}

chrome.webRequest.onHeadersReceived.addListener(
  function(details) {
    if (details.method !== 'GET') {
      // Don't intercept POST requests until http://crbug.com/104058 is fixed.
      return;
    }
    
    if (!isAllowed(details)) {
      return;
    }

    return { redirectUrl: chrome.runtime.getURL('web/main.html') };
  },
  {
    urls: [
      '<all_urls>'
    ],
    types: ['main_frame', 'sub_frame']
  },
  ['blocking','responseHeaders']
 );

Full source for mv2

第二部分。 扩展清单版本 3

ma​​nifest.json

{
  "name": "Test app mv3",
  "manifest_version": 3,
  "version": "0.1",
  "background": {
    "service_worker": "./background.js"
  },
  "action": {    
    "default_title": "SW3"
  },
  "host_permissions": [
    "<all_urls>"
  ],
  "permissions": [
    "webRequest",
    "declarativeNetRequest",
    "declarativeNetRequestFeedback",
    "declarativeNetRequestWithHostAccess"
  ],  
  "web_accessible_resources": [{
    "resources": ["web/main.html"],
    "matches": ["<all_urls>"]
  }],
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
  }
}

background.js

function getHeaderFromHeaders(headers, headerName) {
  for (var i=0; i<headers.length; ++i) {
    var header = headers[i];
    if (header.name.toLowerCase() === headerName) {
      return header;
    }
  }
}

function isAllowed(details) {
  var header = getHeaderFromHeaders(details.responseHeaders, 'content-type');
  
  if (header) {
    var headerValue = header.value.toLowerCase().split(';',1)[0].trim();

    var mimeTypes = [
      'application/zip'
    ];
    
    return (mimeTypes.indexOf(headerValue) !== -1);
  }
}

chrome.webRequest.onHeadersReceived.addListener(
  function(details) {
    if (details.method !== 'GET') {
      return;
    }
    
    if (!isAllowed(details)) {
      return;
    }

    chrome.declarativeNetRequest.updateSessionRules({
      addRules: [{
        'id': 2001,
        'priority': 1,
        'action': {
          'type': 'redirect',
          'redirect': {
            url: chrome.runtime.getURL('web/main.html')
         }
        },
        'condition': {
          'urlFilter': details.url,
          'resourceTypes': ['main_frame']
        }
      }],
    removeRuleIds: [2001]
    });
  
    return { redirectUrl: chrome.runtime.getURL('web/main.html') };
  },
  {
    urls: [
      '<all_urls>'
    ],
    types: ['main_frame', 'sub_frame']
  },
  ['responseHeaders']
 );

Full source for mv3

对于 mv3 的扩展，上述代码实现了与 mv2 代码类似的操作。 不同之处在于：当我单击指向 zip 文件的锚点时，第一次单击时会显示“另存为”对话框，如果我第二次单击相同的 zip 锚点，则会发生重定向。 对于其他 zip 文件，重复上述操作。

如何修改 mv3 代码以获得与 mv2 相同的结果？

Answer 1

这仍然是可能的，但需要放弃chrome.webRequest API 以支持chrome.debugger。这允许您的扩展与CDP 协议对话，您可以在其中挂钩到请求/响应生命周期。

第一步是将调试器附加到有问题的tabId，并为您正在使用的 API 发送启用命令（如果需要）。 Here 你可以找到很多如何做到这一点的例子。例如，假设我们要使用Fetch，所以我们需要发送Fetch.enable。

现在，如果您想在处理请求/响应之前对其进行修改，概括地说，您需要：

• 为Fetch.requestPaused 设置一个处理程序，配置您的目标URL 模式（或* 为所有）。
• 按照文档中的说明检查请求阶段。
• 如果请求：修改标头，并发送Fetch.continueRequest。
• 如果响应：通过发送Fetch.getResponseBody 获取响应正文。如果需要，修改正文/状态/标题。通过发送Fetch.fulfillRequest 来完成对客户的响应。

有帮助：

• https://grep.app/search?q=chrome.debugger.sendCommand
• https://grep.app/search?q=Fetch.fulfillRequest

我在 chrome 扩展项目中成功使用了这种方法。 MV3 杀死了本机扩展请求 API（或至少严重限制了它）所以现在这是我知道的唯一选择。缺点是，选项卡下会出现一个烦人的栏，表示此浏览器当前正在由 $EXT_NAME 调试。