1

I'm writing a userscript and need to make it so any iframe appended to the DOM with document.body.appendChild()'s content document has the hidden getter set to always return false.
I can change the getter with:

iframe.contentDocument.__defineGetter__("hidden",()=>false)

I need this to modify elements before they're added to the DOM, so that

var i = document.createElement("iframe");
i.sandbox = "allow-same-origin";
document.body.appendChild(i);
document.__defineGetter__("hidden", i.contentDocument.__lookupGetter__("hidden"))

will always redefine the document hidden getter to return false.
I've tried:

const oldAppend = Node.prototype.appendChild;
Node.prototype.appendChild = function (child) {
  child?.contentDocument?.__defineGetter__("hidden",()=>false);
  return oldAppend(child);
}

But then when I try to use the appendChild method, I get: TypeError: 'appendChild' called on an object that does not implement interface Node.

Is there a way (in pure JS) to change the appendChild method so that it does this for every iframe that gets appended to the DOM?

2
  • 1
    You can redefine Node.prototype.appendChild to do this.
    – Barmar
    Commented Jul 19, 2021 at 22:25
  • @Barmar I got the error TypeError: 'appendChild' called on an object that does not implement interface Node. when I tried that. Commented Jul 19, 2021 at 22:52

2 Answers 2

1

You can use a MutationObserver to watch for nodes added anywhere in the document, and patch them if they haven't been patched yet.

// userscript code
const parsed = new WeakSet();
const parse = iframe => {
  if (parsed.has(iframe)) return;
  parsed.add(iframe);
  Object.defineProperty(iframe, 'hidden', { get() { return false; } });
};
new MutationObserver(() => {
  document.querySelectorAll('iframe').forEach(parse);
})
  .observe(document.documentElement, { childList: true, subtree: true });

// site code
const iframe = document.body.appendChild(document.createElement('iframe'));
console.log(iframe.hidden);

Object.defineProperty should be preferred over __defineGetter__, which is deprecated.

A MutationObserver is probably a bit better than working with only appendChild because appendChild is not the only way that nodes can be added to the document. (A MutationObserver will catch everything)

1
  • I should have specified I need it to specifically do this before the iframe gets added to the DOM. I've edited my question to reflect this. Commented Jul 19, 2021 at 22:50
0

I managed to solve my problem by redefining document.body.appendChild like this:

const oldAppend = Node.prototype.appendChild;
document.body.appendChild = function(...args) {
  const toReturn = oldAppend.call(this, ...args);
  
  if (args[0].nodeName === "IFRAME") {
    args[0].contentDocument.__defineGetter__("hidden",()=>false);
  }
  
  return toReturn;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.