How replacing Element prototype method?

Question

What should I do to make it work in greasemonkey?:

Element.prototype._attachShadow = Element.prototype.attachShadow;
Element.prototype.attachShadow = function () {
    return this._attachShadow( { mode: "open" } );
};

Now, when I use this: document.body.attachShadow({mode:"closed"}).innerHTML = "dec";

Is this bug:

Error: Permission denied to access object

What should I do to make the application use the substituted method?

EDIT (MORE INFO):

Firefox Nightly 62.0a1 (2018-06-18) (64 bity)

Greasemonkey 4.4.0

// ==UserScript==
// @name     Unnamed Script 124585
// @version  1
// @grant    none
// @include http://kind-clarke-ced7cb.bitballoon.com/
// ==/UserScript==


Element.prototype._attachShadow = Element.prototype.attachShadow;
Element.prototype.attachShadow = function () {
    return this._attachShadow( { mode: "open" } );
};
console.log("US work");

Tested page: http://kind-clarke-ced7cb.bitballoon.com/

<div id="test" style="border: 1px solid silver;">xxx</div>

<div id="info">wait 4 sec...(so that UserScript can load itself before)</div>
   <script>
setTimeout(()=>{
  document.querySelector("#test").attachShadow({mode:"closed"}).innerHTML = "dec";
  document.querySelector("#info").innerHTML += `<br/>run: document.querySelector("#test").attachShadow({mode:"closed"}).innerHTML = "dec";`;
}, 3000);

setTimeout(()=>{
  document.querySelector("#info").innerHTML += `<br/>shadowRoot of #test is: ${(document.querySelector("#test").shadowRoot)}`;
}, 4000);
    </script>

Now this substitution of the attachShadow method simply does not work.

shadowRoot of #test return null but should be [object ShadowRoot], because UserScript forces it.

Works for me. Add a complete userscript (with the metadata header) and an URL that demonstrates the problem (e.g. example.com). Also specify which version of FF and GM you are using. — wOxxOm, Jun 19 '18 at 07:52

Vignesh Raja · Answer 1 · 2018-06-19T16:20:55.697

The shadowdom is disabled by default from FF version 59. To enable it, preferences need to be modified.

Go to about:config -> Search for dom.webcomponents.shadowdom.enabled -> Double click it to toggle the boolean value (set it to true) -> Reload your page.

MDN Docs for reference

Now the replacement will work. Tested in Firefox Quantum 60.0.2 (64 bit) and Firefox Nightly 62.0a1 (64 bit)

But the shadow element cannot be seen in the HTML tree while inspecting via Inspect Element. A bug has also been reported in BugZilla

Only an info message stating Shadow DOM used in [site-link] or in some of its subdocuments. will be logged in the console. (Message shown only in Nightly version)

EDIT : After a little digging, found that using unsafeWindow may solve your problem. Little detail about unsafeWindow

// ==UserScript==
// @name     Unnamed Script 124585
// @version  1
// @grant    none
// @include  http://kind-clarke-ced7cb.bitballoon.com/
// ==/UserScript==

unsafeWindow.Element.prototype._attachShadow = unsafeWindow.Element.prototype.attachShadow;
unsafeWindow.Element.prototype.attachShadow = function () {
    return this._attachShadow( { mode: "open" } );
};
console.log("US work");
setTimeout(()=>{
  document.querySelector("#test").attachShadow({mode:"open"}).innerHTML = "dec";
  document.querySelector("#info").innerHTML += `<br/>run: document.querySelector("#test").attachShadow({mode:"closed"}).innerHTML = "dec";`;
}, 1000);

setTimeout(()=>{
    document.querySelector("#info").innerHTML += `<br/>shadowRoot of #test is: ${(document.querySelector("#test").shadowRoot)}`;
}, 2000);

The substitution didn't work as the mode is closed. Change it to open.

But I use Firefox Nightly 62.0a1. Problem is with Greasemonkey, not with ShadowDom itself. — lukaszpolowczyk, Jun 19 '18 at 14:39
Yes. ShadowDom works fine. Problem is in it, that ` Element.prototype._attachShadow = Element.prototype.attachShadow;` not create _attachShadow, and that Element.prototype.attachShadow in not replacing through new funkcion. Its happens in UseScript. — lukaszpolowczyk, Jun 19 '18 at 14:46
@lukaszpolowczyk updated the answer.. now it may work. please check. — Vignesh Raja, Jun 19 '18 at 16:21
`unsafeWindow` should not make a difference in `@grant none` mode. (Which didn't exist when that Q&A was written.) — Brock Adams, Jun 19 '18 at 18:11
@VigneshRaja With unsafeWindow is Error: `Permission denied to access object` when run function attachShadow. Henceforth page is no access to function attachShadow. It is blocked. — lukaszpolowczyk, Jun 19 '18 at 21:59

How replacing Element prototype method?

1 Answers1