Any way to alter script tag for some javascript and add custom attributes?

Question

In order to work with Cloudflare's Rocket Loader service, certain scripts need to have their script tags updated with the cf-async="false" attribute like so:

<script type="text/javascript" cf-async="false">

Specifically, I need to add this attribute to the Drupal settings script tag, that gets added inline at the top of every page.

My first thought was to do this via hook_js_alter(), like:

function custom_helper_js_alter(&$javascript) {
  $javascript['settings']['cf-async'] = 'false';
}

But it doesn't seem to be possible to add custom attribute tags via this function. So my question is, is there any way at all to do what I want without hacking core?

Answer 1

There is, but it's not pretty. The markup produced by drupal_get_js() is pretty closed off; it uses theme_html_tag(), but what it provides for variables means identifying the Drupal.settings script is a pain.

This is about as good as you'll get. In custom module:

function MYMODULE_preprocess_html_tag(&$vars) {
  if ($vars['element']['#tag'] == 'script' && strpos($vars['element']['#value'], 'jQuery.extend(Drupal.settings') === 0) {
    $vars['element']['#attributes']['cf-async'] = 'false';
  }
}

As you rightly mentioned through the comments you could also attack it at the theme override level instead of the module level. In template.php:

function MYTHEME_preprocess_html_tag(&$variables) {
  if ($variables['element']['#tag'] == 'script' && strpos($variables['element']['#value'], 'jQuery.extend(Drupal.settings') === 0) {
    $variables['element']['#attributes']['cf-async'] = 'false';
  }
}

If you have modules that mess with JavaScript (e.g. LabJS), the string match will be slightly different.