[Chrome Extension] Show Instagram Mutual Followers on User Web Profile


When you use mobile Instagram app and visit user profile, there will be mutual followers like

Followed by userA, userB, userC + 2 more

This feature is missing on Instagram web interface, and this Chrome extension help you show mutual followers on the Instagram user web profile page.

manifest json:

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
{
  "manifest_version": 2,

  "name": "showigmf",
  "description" : "Show Instagram Mutual Followers on User Profile Page",
  "version": "0.1",

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

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

  "permissions": [
    "https://www.instagram.com/*",
    "tabs"
  ]
}

background.js:

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

showinfo.js:

showinfo.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
function showMutualFollowers(elm, jsonData) {
  if (jsonData["user"]["mutual_followers"] == null) {
    return;
  }
  var followers = jsonData["user"]["mutual_followers"]["usernames"];
  var count = jsonData["user"]["mutual_followers"]["additional_count"];
  if (followers.length == 0) {
    return;
  }

  var div = document.createElement("div");
  div.setAttribute("style", "display: inline;");
  div.appendChild(document.createTextNode("Followed by: "));
  while (followers.length > 0) {
    var follower = followers.pop();
    var flink = document.createElement("a");
    flink.setAttribute("href", "https://www.instagram.com/"+follower+"/");
    //flink.setAttribute("target", "_blank");
    flink.setAttribute("class", "_fd86t");
    flink.appendChild(document.createTextNode(follower));
    div.appendChild(flink);
    if (followers.length != 0) {
      //div.appendChild(document.createTextNode(", "));
      div.appendChild(document.createTextNode(", "));
    } else {
      if (count > 0) {
        div.appendChild(document.createTextNode(" + "+count+" more"));
      }
    }
  }
  elm.appendChild(div);
}

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

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

References:

[1]GitHub - siongui/igidcrx: Get Instagram Id via Chrome Extension