How can I detect the current tab's mime type in a Google Chrome extension?

Question

I want to see if the current tab is a PDF file from a background page.

I can check the url for .pdf at the end but there are some PDF files that don't have that.

Answer 1

Issuing a new request just to get the MIME type is a bit heavy, and not reliable. For instance, if the currently displayed page is the result of a POST form submission, then issuing a GET request will usually not lead to the same page.

If you're developing an extension that frequently needs access to this information, use the chrome.webRequest API to track the responses. The following demo extension shows the content type upon click of the browser button:

// 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;
        }
    }
}

Notes:

• This extension only shows the result for tabs which are loaded after the extension is loaded.
• This only works on http/https pages. ftp:, file:, filesystem:, blob:, data: is not supported.
• When no MIME-type is specified by the server or when the MIME-type is text/plain, Chrome falls back to MIME sniffing unless the X-Content-Type-Options: nosniff is set. In the first case, the detected MIME-type could be anything. In the latter case, the default MIME-type is text/plain.

For completeness, here is a manifest.json file that can be used to test the previous code:

{
    "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

You can't get it using current Chrome API afaik. What you can do is load this page again through XHR and check returned content-type header. Something like this:

background 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();
        }
    }
});

manifest.json:

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

For PDF files returned content type should be application/pdf. Something to keep in mind though is that content-type header could contain encoding as well: text/html; charset=UTF-8.