如何在Google Chrome扩展程序中检测当前标签的mime类型？

Question

我想查看当前标签是否是背景页面中的PDF文件.

我可以在最后查看.pdf的网址,但有一些PDF文件没有.

Answer 1

发出一个新的请求只是为了获取MIME类型有点沉重,而且不可靠.例如,如果当前显示的页面是POST表单提交的结果,则发出GET请求通常不会导致同一页面.

如果您正在开发经常需要访问此信息的扩展程序,请使用chrome.webRequestAPI跟踪响应.以下演示扩展程序在单击浏览器按钮时显示内容类型:

// background.js
var tabToMimeType = {};
chrome.webRequest.onHeadersReceived.addListener(function(details) {
    if (details.tabId !== -1) {
        var header = getHeaderFromHeaders(details.responseHeaders, 'content-type');
        // If the header is set, use its value. Otherwise, use undefined.
        tabToMimeType[details.tabId] = header && header.value.split(';', 1)[0];
    }
}, {
    urls: ['*://*/*'],
    types: ['main_frame']
}, ['responseHeaders']);

chrome.browserAction.onClicked.addListener(function(tab) {
    alert('Tab with URL ' + tab.url + ' has MIME-type ' + tabToMimeType[tab.id]);
});

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

笔记:

• 此扩展仅显示加载扩展后加载的选项卡的结果.
• 这仅适用于http/https页面.ftp:,file:,filesystem:,blob:,data:不受支持.
• 如果服务器未指定MIME类型或MIME类型text/plain,则Chrome将回退到MIME嗅探,除非X-Content-Type-Options: nosniff已设置.在第一种情况下,检测到的MIME类型可以是任何内容.在后一种情况下,默认的MIME类型是text/plain.

为了完整性,这里有一个manifest.json文件可用于测试以前的代码:

{
    "name": "Click button to see MIME",
    "version": "1",
    "manifest_version": 2,
    "background": {
        "scripts": ["background.js"],
        "persistent": true
    },
    "browser_action": {
        "default_title": "Show MIME"
    },
    "permissions": [
        "webRequest",
        "activeTab",
        "*://*/*"
    ]
}

Answer 2

据我所知，您无法使用当前的 Chrome API 获取它。您可以做的是通过XHR再次加载此页面并检查返回的内容类型标头。像这样的东西：

背景html：

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if(changeInfo.status == "loading") {
        if(checkIfUrlHasPdfExtension(tab.url)) {
            //.pdf
            pdfDetected(tab);
        } else {
             var xhr = new XMLHttpRequest();
             xhr.open("GET", tab.url, true);
             xhr.onreadystatechange = function() {
               if (xhr.readyState == 4) {
                 var contentType = xhr.getResponseHeader("Content-Type");
                 if(checkIfContentTypeIsPdf(contentType)) {
                    pdfDetected(tab);
                 }
               }
             }
             xhr.send();
        }
    }
});

清单.json：

"permissions": [
    "tabs", "http://*/*", "https://*/*"
]

对于 PDF 文件，返回的内容类型应为application/pdf. 但要记住的是，内容类型标头也可以包含编码：text/html; charset=UTF-8。