Greasy Fork

How to make scripts work on newly created elements

Many scripts are created to work on the page on loading only. Is there a simple way to make them work dynamically.

Here are examples of scripts in here..

Twitter Emoji for all sites

highlight-external-links

Use setMutationHandler

I'll go and mess with these scripts. Thanks again!

@wOxxOm No luck.. Could you please show me how would it work with @ahuanguchi highlight-external-links

// ==UserScript==
// @name         highlight-external-links
// @namespace    https://github.com/ahuanguchi
// @version      1.0.2
// @description  Highlight all external links in lime green.
// @author       ahuanguchi
// @match        *://*/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

window.addEventListener("load", function () {
  function splitHref(givenHref) {
    return givenHref.replace(/^https?:\/\//, "").split("/");
  }
  var i, currentA, currentHref, anchorParts, locationParts;
  var anchors = document.getElementsByTagName("a");
  var numAnchors = anchors.length;
  for (i = 0; i < numAnchors; i += 1) {
    currentA = anchors[i];
    currentHref = currentA.href;
    anchorParts = splitHref(currentHref);
    locationParts = splitHref(window.location.href);
    if (currentHref.slice(0, 4) === "http" && anchorParts[0] !== locationParts[0]) {
      currentA.style.backgroundColor = "#bfff00";
    }
  }
});

Well, luck has nothing to do with it.

The script: Limegreen external links

It sure doesn't. Thank you :D

@wOxxOm on some websites like Tumblr dashboard, it would cover elements that are not needed. See the following screenshots..

http://i.imgur.com/nXirmta.png http://i.imgur.com/3VOvSyB.png

What do you think is the proper way to select and exclude these elements? or perhaps have them selected with a proper style?

Well, technically speaking those are external links.

To exclude by CSS selector edit the setMutationHandler's parameter: a[href*="//"]:not(.some-class) or even a[href*="//"]:not(.some-class):not(#some-id):not(sometag)

P.S. instead of http the script now looks for // because many web pages don't specify the protocol.

Great! I just had to add && n.textContent !== '' to exlude non texted elements. Thank you, specially for the awesome setMutationHandler function.