vendredi 20 février 2015

Adding dropbox saver to webpage with chrome extension


I'm working on a chrome extension to add a dropbox saver to a webpage.



{
"manifest_version": 2,
"name": "File Saver",
"description": "Add a button to save file to directly to Dropbox",
"version": "0.0",

"content_security_policy": "script-src 'self' http://ift.tt/1DerHLs; object-src 'self'",

"permissions": [
"http://ift.tt/1F5gh9q"
],

"content_scripts": [{
"matches": ["http://ift.tt/1AYNQLn"],
"css": [
"css/style.css"
],
"js": [
"js/jquery-2.1.3.min.js",
"js/button_injector.js"
]
}]
}


The Dropbox saver is placed next to the regular "Download" button which just opens the chrome save dialog like any other download link.


I have a variable for the dropins api:



var dropbox_script = "<script type='text/javascript' src='http://ift.tt/1DerHLs' id='dropboxjs' data-app-key='MY_KEY'></script>"


Which I place in the head tag like this:



$("head").append(dropbox_script);


I create the anchor for the button like this:



var dropbox_btn = document.createElement("a");
$(dropbox_btn).addClass("dropbox-saver dropbox-dropin-btn dropbox-dropin-default spaced-out");
// "spaced-out" class is in style.css for putting margins around it
$(dropbox_btn).attr({
"href": download_url // retrieved successfully
"data-filename": filename // also retrieved successfully *
});
$(dropbox_btn).html("<span class='dropin-btn-status'></span>Save to Dropbox");
$("some_selector_syntax").append(dropbox_btn);


I've encountered two problems so far. The first is that when the extension adds the button, it works as a normal link and doesn't open the dropbox saver dialog. But, the button still gets styled exactly like the demo.


The second problem is that the download URL doesn't contain the file extension. It has ID parameters to get the requested file. I set up a simple html page to test that the saver actually works, and it does. But since the file extension is not in the URL, it gets saved as just "File" type.


* There's no mention of the file extension anywhere in the page. I'm able to get the name of the file from a header tag, but the header doesn't include the file extension.


What can I do to fix this? Or is there a better way to do this? Thanks in advance.





Aucun commentaire:

Enregistrer un commentaire