22

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

 2 years ago
source link: http://siongui.github.io/2018/02/26/crx-show-ig-mutual-follower-on-user-profile/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

February 26, 2018

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

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

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

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


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK