Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I'm working on a piece of JavaScript code that searches its host page for references from a certain source and when hovered, shows the definition/referenced text in a tooltip (something like Google Dicitionary or RefTagger)

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 <script src="..."/> tag
  • 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:

  • innerHTML would 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/html as 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.)

share|improve this question
    
There's code here stackoverflow.com/questions/7507277/… to detect weather the code is running in a Chrome extension. There are some good solutions there that might also be applicable to Firefox Add-Ons. –  nathangiesbrecht Apr 1 at 15:34
    
@nathangiesbrecht I don't want to detect the environment the code is running in. I want to create environment-specific files from a common one with browser-specific code sections marked somehow. –  Márton Molnár Apr 1 at 15:37

1 Answer 1

up vote 0 down vote accepted

Okay, I figured it out using PowerShell (feel free to add bash-powered info):

The script to strip out unneeded code regions (and all conditional markup):

[Regex]::Replace(
    [Regex]::Replace(
        (Get-Content $source -Raw),
        '(?sm)// #if ((!' + $condition + ')|(?!' + $condition + ')[A-Z]+).*?// #endif \1',
        ''
    ),
    '// #(end)?if !?[A-Z]+',
'') |
Set-Content $output

The input file (set in $source) can contain sections similar to this:

if(cache[reference]){
// #if FIREFOX
    addContent(cache[reference]);
// #endif FIREFOX
// #if !FIREFOX
    tooltip.innerHTML = cache[reference];
// #endif !FIREFOX
    return;
}

To get the Firefox-specific version, use the script like this (after adding params declaration and saving to script.ps1):

powershell -File script.ps1 input.js output.js FIREFOX
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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