Creating and updating link to instagram image or video

Question

I've been using the InstagramPhotoLink extension for Opera for some time but instagram broke it recently. I thought I could try to fix it... and I did.

The original extension is rather limited and it supports only a link to the first image and no videos so while fixing it I completely rewrote it in order to extend it.

It works by looking for an image or video element with a specific class and extracts the src attribute from it and puts it in a new a-element inside the media-container.

Switching images/videos is supported by the MutationObserver that updates the links when either a div or an attribute changes.

I came across a problem where the MutatorObserver reacts too quickly and before the src attribute of the new image is set. I solved it by adding a small delay by adding a call to setTimeout to wait until everything is updated.

function createMediaLink() {

    let mo = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            if (mutation.type == "attributes") {
                //console.log(mutation.attributeName);
                addOrUpdateVideoLink();
            }
            if (mutation.type == "childList") {
                //console.log(mutation.childList);
                addOrUpdateImageLink();
            }
        });
    });

    return (
        addOrUpdateImageLink(mo) ||
        addOrUpdateVideoLink(mo)
    );
}

function addOrUpdateImageLink(mo) {

    let image = document.getElementsByClassName('FFVAD');

    if (image.length == 0) {
        return false;
    }

    image = image[0];

    if (mo) {
        // the nearest div to the image that stays there when switching images
        var div = document.getElementsByClassName("rQDP3");
        mo.observe(div[0], {
            childList: true
        });
    }

    setTimeout(() => {
        addOrUpdateMediaLink(image.src);
    }, 50);

    return true;
}

function addOrUpdateVideoLink(mo) {

    let video = document.getElementsByClassName('tWeCl');

    if (video.length == 0) {
        return false;
    }

    video = video[0];

    if (mo) {
        mo.observe(video, {
            attributes: true
        });
    }

    setTimeout(() => {
        addOrUpdateMediaLink(video.src);
    }, 50);

    return true;
}

function addOrUpdateMediaLink(src) {
    console.log(`src: ${src}`);
    let a = document.getElementsByClassName('_open_');
    if (a.length == 0) {
        a = document.createElement("a");
        a.className = "_open_";
        a.innerHTML = 'Open in new tab';
        a.target = "_blank";
        // media container
        document.getElementsByClassName("_97aPb")[0].appendChild(a);
    } else {
        a = a[0];
    }
    a.href = src;
}

createMediaLink();

I don't write javascript too often so this is the best I can do but I'm pretty sure this can still be improved. What do you think?

Answer 1

• addOrUpdateImageLink() and addOrUpdateVideoLink() are essentially the same, therefore it would be better to create just one function that would accept different parameters dependent on whether our media is an image or video;
• In createMediaLink() you invoke addOrUpdate………Link() functions before you declare them. It is not wrong, but it worsens readability and code flow;
• Setting 50 ms delay is not the best way to achieve what you are trying to do. Since I don't know how the DOM workings look like, I left it unchanged though;
• Use strict equality operator (===) wherever possible — it performs no type conversion;
• Once you pick which quotes you use ('' or ""), stick to it. Generally, single quotes option is more popular and standard.

Rewrite

const addOrUpdateMediaLink = src => {
  if (!src) { return; }
  console.log(`src: ${src}`);

  let a = document.querySelector('._open_');

  if (!a) {
    a = document.createElement('a');
    [a.className, a.textContent, a.target] = ['_open_', 'Open in new tab', '_blank'];

    // media container
    document.querySelector('._97aPb').appendChild(a);
  }

  a.href = src;
};

const addOrUpdate = (selector, observeSelector, attr, mo) => {
  let media = document.querySelector(selector);

  if (!media) { return false; }

  if (mo) {
    const obj = {};
    obj[attr] = true;
    mo.observe(document.querySelector(observeSelector), obj);
  }

  setTimeout(() => addOrUpdateMediaLink(media.src), 50);

  return true;
};

const createMediaLink = () => {
  const selectors = {
    attributes: ['.tWeCl', '.tWeCl'],
    childList:  ['.FFVAD', '.rQDP3']
  };

  const mo = new MutationObserver(mutations => mutations.forEach(mutation => addOrUpdate(selectors[mutation.type][0])));

  return addOrUpdate(...selectors.childList, 'childList', mo) || addOrUpdate(...selectors.attributes, 'attributes', mo);
};

createMediaLink();

Answer 2

As is evidenced by the original version of the extension being broken by the HTML update, one drawback of this type of code is that it is brittle. Instagram could update the HTML of their site at anytime, leaving the extension broken. A different approach might be wise. For example, the code could look for video elements - while it is possible to have more than one on a page, the Instagram pages that I looked at appear to either only have one or no video elements. If there are none, then look at the images. Obviously there will likely be more than one image on the page (since the logo and other icons will be present). I'm not sure what the best approach to find the image in focus (maybe see if it has a parent element that is the <article> element, though that also would be coupled to the structure) but I guess one could look for the image with the largest dimensions.

But if you want to stick with the current approach, the rewritten code in Przemek's answer looks more succint and uniform with ecmascript-6. There are a few other suggestions below that might improve things.

---

You could use an IIFE to wrap all the code up. While the extension cannot use variables or functions defined by web pages or by other content scripts¹, it would be a good practice not to add functions that could have the same name as one in the original source code. While it would be unlikely that the Instagram scripts would have a function called createMediaLink, it is possible. And it could also be used to inject certain global variables- e.g. document, window.

;(doc => {
    //addOrUpdateMediaLink, etc.

    //contents from crateMediaLink, 

})(document);

---

The function passed to setTimeout could be a partial-function, which would eliminate the extra function call. For example, the following block from addOrUpdateImageLink:

setTimeout(() => {
    addOrUpdateMediaLink(image.src);
}, 50);

Could be simplified like this:

setTimeout(addOrUpdateMediaLink.bind(null, image.src), 50); 

Cool magic, right? (∩｀-´)⊃━☆ﾟ.*･｡ﾟ

---

Inside addOrUpdateImageLink there is a new variable created:

var div = document.getElementsByClassName("rQDP3");

Some JS purists might argue that const should be used instead of var, since that is never re-assigned. And also, the naming might be a little misleading, since that function returns an HTMLCollection, so divs would be more appropraite. The same is true for let image = document.getElementsByClassName('FFVAD'); in addOrUpdateImageLink() - since multiple elements are returned images would be more appropriate.

---

¹_{https://dev.opera.com/extensions/content-scripts/}