| OLD | NEW |
|---|
| (Empty) |
| 1 <!-- BEGIN AUTHORED CONTENT --> | |
| 2 <p id="classSummary"> | |
| 3 Use the <code>chrome.fileBrowserHandler</code> module to | |
| 4 extend the Chrome OS file browser. | |
| 5 For example, you can use this API | |
| 6 to enable users to upload files to your website. | |
| 7 </p> | |
| 8 <p class="caution"> | |
| 9 <b>Important:</b> | |
| 10 This API works <b>only on Chrome OS</b>. | |
| 11 </p> | |
| 12 <p> | |
| 13 The Chrome OS file browser comes up when | |
| 14 the user either presses Ctrl+M | |
| 15 or connects an external storage device, | |
| 16 such as an SD card, USB key, external drive, or digital camera. | |
| 17 Besides showing the files on external devices, | |
| 18 the file browser can also display files | |
| 19 that the user has previously saved to the system. | |
| 20 </p> | |
| 21 <p> | |
| 22 When the user selects one or more files, | |
| 23 the file browser adds buttons | |
| 24 representing the valid handlers for those files. | |
| 25 For example, in the following screenshot, | |
| 26 selecting a file with a ".jpg" suffix | |
| 27 results in an "Upload to Picasa" button that the user can click. | |
| 28 </p> | |
| 29 <p> | |
| 30 <img src="{{static}}/images/filebrowserhandler.png" | |
| 31 width="640" height="400" alt="file browser screenshot" /> | |
| 32 </p> | |
| 33 <h2 id="manifest">Manifest</h2> | |
| 34 <p> | |
| 35 You must declare the "fileBrowserHandler" permission | |
| 36 in the <a href="manifest.html">extension manifest</a>, | |
| 37 and you must use the "file_browser_handlers" field | |
| 38 to register the extension as a handler of at least one file type. | |
| 39 You should also provide a 16x16 icon | |
| 40 to be displayed on the button. | |
| 41 For example: | |
| 42 </p> | |
| 43 <pre> | |
| 44 { | |
| 45 "name": "My extension", | |
| 46 ... | |
| 47 <b>"file_browser_handlers"</b>: [ | |
| 48 { | |
| 49 <b>"id"</b>: "upload", | |
| 50 <b>"default_title"</b>: "Save to Gallery", <em>// What the button will dis
play</em> | |
| 51 <b>"file_filters"</b>: [ | |
| 52 "filesystem:*.jpg", <em>// To match all files, use "filesystem:*.*"</em> | |
| 53 "filesystem:*.jpeg", | |
| 54 "filesystem:*.png" | |
| 55 ] | |
| 56 } | |
| 57 ]</b>, | |
| 58 "permissions" : [ | |
| 59 <b>"fileBrowserHandler"</b> | |
| 60 ], | |
| 61 "icons": { <b>"16"</b>: "icon16.png", | |
| 62 "48": "icon48.png", | |
| 63 "128": "icon128.png" }, | |
| 64 ... | |
| 65 }</pre> | |
| 66 <p class="note"> | |
| 67 <b>Note:</b> | |
| 68 You can specify locale-specific strings for the value of "default_title". | |
| 69 See <a href="i18n.html">Internationalization (i18n)</a> for details. | |
| 70 </p> | |
| 71 <h2 id="code">Implementing a file browser handler</h2> | |
| 72 <p> | |
| 73 To use this API, | |
| 74 you must implement a function that handles the <code>onExecute</code> event | |
| 75 of <code>chrome.fileBrowserHandler</code>. | |
| 76 Your function will be called whenever the user clicks the button | |
| 77 that represents your file browser handler. | |
| 78 In your function, use the HTML5 | |
| 79 <a href="http://www.html5rocks.com/tutorials/file/filesystem/">FileSystem API</a
> | |
| 80 to get access to the file contents. | |
| 81 Here is an example: | |
| 82 </p> | |
| 83 <pre> | |
| 84 <em>//In background.html:</em> | |
| 85 chrome.fileBrowserHandler.onExecute.addListener(function(id, details) { | |
| 86 if (id == 'upload') { | |
| 87 var fileEntries = details.entries; | |
| 88 for (var i = 0, entry; entry = fileEntries[i]; ++i) { | |
| 89 entry.file(function(file) { | |
| 90 <em>// send file somewhere</em> | |
| 91 }); | |
| 92 } | |
| 93 } | |
| 94 }); | |
| 95 </pre> | |
| 96 <p> | |
| 97 Your event handler is passed two arguments: | |
| 98 </p> | |
| 99 <dl> | |
| 100 <dt> id </dt> | |
| 101 <dd> The "id" value from the manifest file. | |
| 102 If your extension implements multiple handlers, | |
| 103 you can check the <code>id</code> value | |
| 104 to see which handler has been triggered. | |
| 105 </dd> | |
| 106 <dt> details </dt> | |
| 107 <dd> An object describing the event. | |
| 108 You can get the file or files that the user has selected | |
| 109 from the <code>entries</code> field of this object, | |
| 110 which is an array of | |
| 111 FileSystem <code>Entry</code> objects. | |
| 112 </dd> | |
| 113 </p> | |
| 114 <!-- | |
| 115 <h2 id="manifest_details">Manifest details</h2> | |
| 116 <p class="authornote"> | |
| 117 {PENDING: give details about "id" and "default_title". | |
| 118 It should be unique within your extension -- don't worry about other extensions. | |
| 119 "default_title" implies that you can change the title, | |
| 120 but you can't aside from internationalizing it. | |
| 121 </p> | |
| 122 <p class="authornote"> | |
| 123 {PENDING: give details about the file_filters entry. | |
| 124 File filters are currently case-sensitive, but we plan to change that. | |
| 125 Mention <code>filesystem:*.*</code>. | |
| 126 </p> | |
| 127 --> | |
| 128 <!-- | |
| 129 <h2 id="examples">Examples</h2> | |
| 130 <p> | |
| 131 For examples of using this API, see ... | |
| 132 For other examples and for help in viewing the source code, see | |
| 133 <a href="samples.html">Samples</a>. | |
| 134 </p> | |
| 135 --> | |
| 136 <!-- END AUTHORED CONTENT --> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 10750017:
Extensions Docs Server: Intro data source (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src