My problem is not with the functionality itself, but handling the browser-specific nuances in the implementation. I want to create at least three "editions", with small but important differences:
- a "standalone" version to be embedded in websites as a
- a Chrome plugin
- a Firefox plugin.
How could I handle this situation, is there some kind of JS preprocessor which understands conditional sections? Something like C-like #ifdef comments would come handy to strip out the irrelevant parts.
(A specific problem, as an example:
The main code is almost the same for all of them, the plugins need some extra functions for handling their settings but these are in separate files. But injecting the content has to be done in at least two different ways:
innerHTMLwould work in any modern browser, but the Firefox add-on guidelines forbid its usage (I understand the reasons and accept this policy)
- DOM manipulation methods could be used instead, but since the content to inject can contain HTML elements, I have to parse and re-create it (with filtering based on a whitelist). This can be done by DOMParser, but if I want to use
text/htmlas content type, a lot of compatibility code has to be added to support IE <10.
So basically I could use
innerHTML anywhere except the Firefox plugin, or the DOM method with a lot of extra stuff I don't want to add to the standalone version (to minimize page load delay). It would be great to implement all these editions in one single file with something like conditional sections for different versions.)