Question

If I’m making a Chrome Extension, how do I open an image in a new tab, if server forces the “Save as…” dialog? As I can see, it is something about the Content-Disposition header property.
There are dozens of server-side Q/A about how to force browser to open that dialog, but I can’t find nothing, how to fight with that as an end-user, who doesn’t want that dialog window.

Answer 1

In the extended BNF notation of [RFC 822], the Content-Disposition
header field is defined as follows:

    disposition := "Content-Disposition" ":"
                   disposition-type
                   *(";" disposition-parm)

    disposition-type := "inline"
                      / "attachment"
                      / extension-token
                      ; values are not case-sensitive

    disposition-parm := filename-parm / parameter

    filename-parm := "filename" "=" value;

If ignoring disposition parameters it simply does the following.

"content-disposition","attachment; filename=fname.jpeg"
downloads jpeg file when ever it is served.

"content-disposition","inline; filename=fname.jpeg"
displays jpeg file rather downloading jpeg file when ever it is served.

This behavior depends on the browser and the file you are trying to serve.

For example, if you have a JPEG file an inline disposition-type will open the Image within browser, whereas attachment will force it to download.

If you’re using a .ZIP file, browsers won’t be able to display it inline, so for inline and attachment disposition-type, the file will be downloaded.

You have to use WebRequest API, to modify your headers

Sample Code

chrome.webRequest.onBeforeSendHeaders.addListener(

function (details) {//Modify Headers
    details.requestHeaders.push({
        "name": "content-disposition",
        "value": "inline; filename=`_some_filename.some_extension`"
    });
    return {//Update Headers
        requestHeaders: details.requestHeaders
    };
}, {
    urls: ["<all_urls>"]
}, ["blocking", "requestHeaders"]);//Block the requests

Make sure you declare

"permissions": [
    "webRequest",
    "webRequestBlocking"
  ]
 

in your manifest file

References

• Web Request API

EDIT 1

Add your URL for this code and check if it still throws a save as dialog.

chrome.webRequest.onHeadersReceived.addListener(

function (details) {

    var _content_to_append = {
        "name": "content-disposition",
        "value": "inline"
    };
    details.responseHeaders.push(_content_to_append);
    return {
        responseHeaders: details.responseHeaders
    };
}, {
    urls: ["<all_urls>"]
}, ["blocking", "responseHeaders"]);