[Chrome Extension] Download Instagram Profile Picture in Full Size

[Update]: Looks like Instagram banned access to the URL of full size profile picture. This post becomes useless.

This Chrome extension helps you download Instagram profile picture in full size. When you navigate to profile page of Instagram user, move your mouse to the upper-right of the profile picture, a small gray square will show and click it. The full size picture will be downloaded.

The trick to get full size profile picture comes from the comment of SO question [1]. If you do not want to install extension, you can copy the URL of the profile picture and paste the URL in the web page to get full size URL, the URL of full size picture will be returned.

manifest.json | repository | view raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
  "manifest_version": 2,

  "name": "igprofilepic",
  "description" : "Download Instagram profile picture in full size",
  "version": "0.1",

  "incognito": "split",

  "background": {
      "scripts": ["eventPage.js"]
  },

  "content_scripts": [
    {
      "matches": ["https://www.instagram.com/*"],
      "js": ["fullpic.js"]
    }
  ],

  "permissions": [
    "https://www.instagram.com/*",
    "tabs"
  ]
}
eventPage.js | repository | view raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var reUrlUser = /^https:\/\/www\.instagram\.com\/([a-z0-9_.]+)\/$/;

function sendMsg(jsonData, url) {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(
      tabs[0].id,
      {jsonData: jsonData, url: url}
    );
  });
}

function getUserJsonData(url) {
  var jsonUrl = url + "?__a=1";
  var xhr = new XMLHttpRequest();
  xhr.open("GET", jsonUrl, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      // JSON.parse does not evaluate the attacker's scripts.
      var resp = JSON.parse(xhr.responseText);
      sendMsg(resp, jsonUrl);
    }
  }
  xhr.send();
}

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
  if (changeInfo.hasOwnProperty('url')) {

    // check if URL is user page
    var result = changeInfo.url.match(reUrlUser);
    if (result) {
      getUserJsonData(changeInfo.url);
    }
  }
});
fullpic.js | repository | view raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
function getFullSizeProfilePicUrl(picurl) {
  var fullsizeurl = picurl.replace("/vp/", "/");
  fullsizeurl = fullsizeurl.replace("t51.2885-19", "t51.2885-15");
  fullsizeurl = fullsizeurl.replace(/\/s\d+x\d+\//, "/sh0.08/e35/");
  return fullsizeurl;
}

function addProfilePicDownloadLink(jsonData, url) {
  var div_b0acm = document.querySelector("div._b0acm");
  if (div_b0acm == null) {
    console.log("no profile pic?");
    return;
  }

  var div = document.createElement("div");
  div.setAttribute("style", "z-index: 55; height: 40px; width: 46px; position: absolute; right: 10px; top: 8px; display: inline-block;");

  var picurl = getFullSizeProfilePicUrl(jsonData["graphql"]["user"]["profile_pic_url_hd"]);
  var username = jsonData["graphql"]["user"]["username"];
  var link = document.createElement("a");
  link.setAttribute("href", picurl);
  link.setAttribute("target", "_blank");
  link.setAttribute("style", "height: 40px; width: 40px; display: inline-block;");

  // show on hover
  link.addEventListener("mouseenter", function(e) {
    e.target.style.background = "#999";
  });
  link.addEventListener("mouseleave", function(e) {
    e.target.style.background = "";
  });

  // filename will not change to username
  // because href is on the different domain
  // https://stackoverflow.com/a/10049353
  link.setAttribute("download", username);

  div.appendChild(link);
  div_b0acm.appendChild(div);
}

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {

    // wait page to be loaded
    var timerId = setInterval(function() {
      var n = document.querySelector("div._tb97a");
      if (n != null) {
        addProfilePicDownloadLink(request.jsonData, request.url);
        clearInterval(timerId);
      }
    }, 500);
  });

References:

[1]How to view instagram profile picture in full-size? - Stack Overflow
[2][Chrome Extension] Show Instagram Id on User Page
Powered by Github Pages, Pelican, pyScss.