Wordpress - Adding Additional Attributes in Script Tag for 3rd party JS

Since WP 4.1.0, a new filter hook is available to achieve this easily:

script_loader_tag

Use it this way:

add_filter( 'script_loader_tag', 'add_id_to_script', 10, 3 );

function add_id_to_script( $tag, $handle, $source ) {
    if ( 'dropbox.js' === $handle ) {
        $tag = '<script type="text/javascript" src="' . $source . '" id="dropboxjs" data-app-key="MY_APP_KEY"></script>';
    }

    return $tag;
}

you can try to use the script_loader_src filter hook e.g:

add_filter('script_loader_src','add_id_to_script',10,2);
function add_id_to_script($src, $handle){
    if ($handle != 'dropbox.js') 
            return $src;
    return $src."' id='dropboxjs' data-app-key='MY_APP_KEY";
}

Update

i just figured it out myself that the src is escaped by esc_url, so looking a bit more i found the clean_url filter which you can use to return the value with your id and app key data :

add_filter('clean_url','unclean_url',10,3);
function unclean_url( $good_protocol_url, $original_url, $_context){
    if (false !== strpos($original_url, 'data-app-key')){
      remove_filter('clean_url','unclean_url',10,3);
      $url_parts = parse_url($good_protocol_url);
      return $url_parts['scheme'] . '://' . $url_parts['host'] . $url_parts['path'] . "' id='dropboxjs' data-app-key='MY_APP_KEY";
    }
    return $good_protocol_url;
}

OK, it seems (to me) that with wp_enqueque_scripts is not possible to print the id and the app key as script tag attributes.

I'm sure at 90%, because WP_Dependencies is not a class that I know well, but looking at the code It seems not possible to me.

But I'm sure at 100% that using wp_localize_script is not useful for your scope.

As I said in my comment above:

What wp_localize_script do is print a json-encoded object in the html output of the page. This object is recognized by the script and so you can use it.

What I've not said in the comment is that the json-encoded object as an arbitrary name that you decide, in fact, looking at the syntax:

wp_localize_script( $handle, $object_name, $l10n );

The object named $object_name could be used by the script because is in the global scope and printed in the html of the page.

But the $object_name is a name that you decide, so it can be everything.

So ask to yourself:

how the script in the remote dropbox server can make use of a variable that they don't know how is called?

So there is no reason at all to pass id and/or app key to the script with wp_localize_script: you have just to print them as script tag attributes as is said in Dropbox API docs.

I'm not a js developer, but I think what dropbox script does is:

1. get all <script> html elements in the page
2. cycle through them looking for the one with the 'id' == 'dropboxjs'
3. if that script is found, looking at the 'data-app-key' of that script
4. check if that app key (if present) is a valid one and authorize you if so

Please, note that I don't know this for sure, I'm just guessing.

In this way, the script loaded from the dropbox server can check your app key in a way that is easy for them and easy to implement for you.

Because in the first sentence I've said that is not possible to print the id and the app key in the script using wp_enqueque_scripts, moral of the story is that you have to print them in the markup in another way.

A way that not smells too much (when there are no alternatives) is to use wp_print_scripts hook to print the script tag:

add_action('wp_print_scripts', 'do_dropbox_stuff');

function do_dropbox_stuff() {

  if ( ! is_admin() ) return; // only for admin area

  $app_key = 'MY_APP_KEY';

  // why do not create an option for it?
  // $app_key = get_option('dropbox_app_key');

  if ( empty($app_key) ) return;

  echo '<script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropins.js" id="dropboxjs" data-app-key="' . esc_attr($app_key) . '"></script>';

}