Simplify injecting an element

[sindresorhus]

From refined-github/refined-github#12 (comment).

I'm thinking maybe a method that accepts a CSS selector and an element/string and injects on load and when there's a mutation, but also checks that it doesn't already exist, which can happen when you click the back button in the browser because of caching.

[josephfrazier]

I just ran into this problem, and solved it by using the following wrapper, which just inserts a deterministically unique element representing the entire callback function, and doesn't run the callback if the element is already present (that is, when the back button is pressed):

import injection from 'github-injection';
import md5hex from 'md5-hex';
import domify from 'domify';

export default function (global, cb) {
  const singletonId = md5hex(cb.toString());
  injection(global, () => {
    if (global.document.getElementById(singletonId)) {
      return;
    }
    global.document.body.appendChild(domify(`<div id="${singletonId}" />`));
    cb();
  });
}

@stefanbuck, would you be interested in adding this functionality as an option? We should be able to adjust it to avoid the md5-hex and domify dependencies, if that's a concern.

[stefanbuck]

Smart workaround, but (I'm sorry) I like @sindresorhus suggestion more. Mainly, because his suggestion is more flexible than yours. Imagine you need to spy for changes on two different container on the same page. This won't work with your solution.

[stefanbuck]

@josephfrazier did you spot this issue while working on OctoLinker? I'm asking, because there we're only interested in dom changes related to #js-repo-pjax-container. OctoLinker doesn't need to append any element to the dom at this stage.

[josephfrazier]

@stefanbuck I was working on a different extension when I hit this issue. After thinking about it a bit more, I think I see what you mean about my solution not being as flexible. It looks like it wouldn't work when the page is updated but is not replaced entirely (like the "back button" does).

[Mottie]

I don't know if it'll help, but I wrote up a wiki page on how to detect all the different dynamically loaded content on GitHub. There are probably a few more that I'm missing.

• Main content (pjax) containers
• Progressive containers
  • Diff files
  • Discussion blocks
  • Previews

I ended up created a global mutation observer script to watch for specific changes. I would appreciate any feedback! Thanks!