Adding Additional Attributes in Script Tag for 3rd party JS

Question

I ran into this when attempting to integrate Dropbox's drop in chooser API to a plugin I'm writing.

The API documentation instructs you to place the following script tag at the top of your file:

<script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropins.js" id="dropboxjs" data-app-key="MY_APP_KEY"></script>

All fine and good, and it actually works when I directly paste it into the page that is called in the admin section. But, I'd like to use some variation of wp_register_script(), wp_enqueue_script() and wp_localize_script() to pass the necessary id and data-app-key.

I've tried a couple different variations of this:

add_action('admin_enqueue_scripts', 'add_dropbox_stuff');
function add_dropbox_js() {
    wp_register_script('dropbox.js','https://www.dropbox.com/static/api/1/dropins.js');
    wp_enqueue_script('dropbox.js');
    wp_localize_script('dropbox.js','dropboxdata',array('id'=>"dropboxjs",'data-app-key'=>"MY_APP_KEY"));
}

And:

add_action('admin_enqueue_scripts', 'add_dropbox_stuff');
function add_dropbox_stuff() {
        wp_register_script('dropbox.js','https://www.dropbox.com/static/api/1/dropins.js');
        wp_enqueue_script('dropbox.js');
        wp_localize_script('dropbox.js','dropboxdata',array(array('id'=>"dropboxjs"),array('data-app-key'=>"MY_APP_KEY")));
    }

MY_APP_KEY is replaced with the appropriate application key in my code. Would appreciate any direction. Thanks.

EDIT: Also tried to do it with some jquery, but to no avail. Tried it on document load and on document ready. I get a {"error": "Invalid app_key"} return.

$('script[src="https://www.dropbox.com/static/api/1/dropins.js?ver=3.6"]').attr('id','dropboxjs').attr('data-multiselect','true').attr('data-app-key','MY_APP_KEY');

Answer 1

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;
}

Answer 2

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;
}

Answer 3

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>';

}

Answer 4

From Bainternet's reply above. This code worked for me.

function pmdi_dropbox( $good_protocol_url, $original_url, $_context){
    if ( FALSE === strpos($original_url, 'dropbox') or FALSE === strpos($original_url, '.js')) {
        return $url;
    } else {
        remove_filter('clean_url','pmdi_dropbox',10,3);
        $url_parts = parse_url($good_protocol_url);
        return $url_parts['scheme'] . '://' . $url_parts['host'] . $url_parts['path'] . "' id='dropboxjs' data-app-key='APIKEY";
    }
}

Edit: The only difference from the Bainternet code is, I added a condition to check if the script URL is dropbox and it is a .js file.

I'm ignoring all the other URL's and rewriting the dropbox URL.

Answer 5

Thanks for all the postings, they really helped. I did roll my own version to give it some structure and make it easier to read and update. Use enqueue as normal, use script for CSS files with a false tag at the end so that it loads at the top. Though it can probably be simplified somewhat.

add_filter('script_loader_tag', 'add_attributes_to_script', 10, 3); 
function add_attributes_to_script( $tag, $handle, $src ) {

    $scripts_to_load = array (

        (0) => Array
          (
            ('name') => 'bootstrap_min_css',
            ('type') => '<link rel="stylesheet" href="',            
            ('integrity') => 'sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB',
            ('close') => ' type="text/css" media="all">'
          ),

        (1) => Array
          (
            ('name') => 'popper_min_js',
            ('type') => '<script type="text/javascript" src="',         
            ('integrity') => 'sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49',
            ('close') => '></script>'
          ),

         (2) => Array
           (
            ('name') => 'bootstrap_min_js', 
            ('type') => '<script type="text/javascript" src="',
            ('integrity') => 'sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T',
            ('close') => '></script>'
           )
    );  

    $key = array_search($handle, array_column($scripts_to_load, 'name'));

    if ( FALSE !== $key){

        $tag = $scripts_to_load[$key]['type'] . esc_url($src) . '" integrity="' . $scripts_to_load[$key]['integrity'] .'" crossorigin="anonymous"' . $scripts_to_load[$key]['close'] . "\n";

    }
    return $tag;
}

Answer 6

I did this with my eCards plugin and it's really simple.

Here's a direct copy/paste from the plugin:

$output .= '<!-- https://www.dropbox.com/developers/chooser -->';
$output .= '<script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropbox.js" id="dropboxjs" data-app-key="' . get_option('ecard_dropbox_private') . '"></script>';
$output .= '<p><input type="dropbox-chooser" name="selected-file" style="visibility: hidden;" data-link-type="direct" /></p>';

Notice the API key is passed via an option.

Answer 7

I did some checking in the dropbox.js code (v2) to see what was happening and how to best solve this. As it turns out, the data-app-key is only used to set the variable Dropbox.appKey. I able to set the variable with the following extra line.

Using the javascript example on the Dropbox page https://www.dropbox.com/developers/dropins/chooser/js:

<script>
Dropbox.appKey = "YOUR-APP-ID";
var button = Dropbox.createChooseButton(options);
document.getElementById("container").appendChild(button);
</script>

In my code I set the Dropbox.appKey in every place where I reference the Dropbox javascript routines. Doing this allowed me to use wp_enqueue_script() without the extra parameters.

Answer 8

There's a simpler way to do this

 function load_attributes( $url ){
    if ( 'https://www.dropbox.com/static/api/1/dropins.js' === $url ){
        return "$url' id='dropboxjs' data-app-key='MY_APP_KEY";
    }

    return $url;
}

add_filter( 'clean_url', 'load_attributes', 11, 1 );

Answer 9

Wordpress syntax for script_loader_tag :

apply_filters( 'script_loader_tag', string $tag, string $handle, string $src )

To add any attribute, you can modify your $tag this way :

add_filter('script_loader_tag', 'add_attributes_to_script', 10, 3); 
function add_attributes_to_script( $tag, $handle, $src ) {
    if ( 'dropbox.js' === $handle ) {
        $tag = '<script type="text/javascript" src="' . esc_url( $src ) . '" id="dropboxjs" data-app-key="MY_APP_KEY"></script>';
    } 
    return $tag;
}

Which will correctly escape URL.