WebExtension: jsonToDOM DOM builder code browser compatibility

Add-ons Development
#1

Hello everyone!
I’m in the process of restructuring code in my add-on which failed review because of my liberal use of innerHTML = …

I’m using the jsonToDOM code found on THIS page. It is working well as expected. Building DOM trees is not my issue. Since this is a WebExtension, I use the same code (content script) in my Chrome version.

Testing with Chrome and Opera, both browsers reported the same error:
Uncaught TypeError: Array.slice is not a function

Error points to this line in the jsonToDOM code:
var childElems = Array.slice(arguments, 2);

I then added THIS shim code to hopefully “fix” array prototype, but this resulted in the same error reported (and pointing to the same line of code) in Chrome/Opera.

I realize this is a mozilla forum, but I am curious as to why Chrome/Opera will not run the jsonToDOM code? So, in the spirit of developing crossbrowser code and for general knowledge, I am asking this question. If this is not proper, I will delete without hesitation if requested.
Thank you.

#2

The code you linked to uses Array generic methods, which only exist only in Firefox (and are deprecated).

you have to replace stuff like Array.<method>(...) with Array.prototype.<method>.call(...).

#3

Thanks for using jsonToDOM! Its an awesome function.

Also Array.isArray is not in chrome.

Try this version of jsonToDOM - https://gist.github.com/Noitidart/9504180

#4

What Nik recommended is what I did in that gist. So please try that first
before using my gist, my gist is outdated. I personally don’t use it, but I
recall it was a cross browser version I tested a couple years ago.

#5

It is and has been for years:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray

#6

Oh whoops, thanks for the correction :slight_smile:

#7

You are spot on! Thank you very much! :slight_smile:

Thanks for your comments and your enthusiasm! lol

I only changed the one line:
var childElems = Array.slice(arguments, 2);
to this:
var childElems = Array.prototype.slice.call(arguments, 2);

Chrome and Opera now like it…
So far, that one change seems to have done the trick!