OLD | NEW |
(Empty) | |
| 1 # Proposal |
| 2 |
| 3 Browser actions are an idea to be able to add simple buttons to the main toolbar
of Chrome. |
| 4 |
| 5 ![http://www.youngpup.net/z_dropbox/browser_action.png](http://www.youngpup.net/
z_dropbox/browser_action.png) |
| 6 |
| 7 For more pretty pictures, see the attachments to http://crbug.com/22099. |
| 8 |
| 9 Browser actions can optionally support a popup. The popup displays an HTML page,
and is shown when the browser action is pressed. Either way, an event is fired
in the extension when a browser actions is pressed that the extension can do som
ething with. |
| 10 |
| 11 At most, one browser action or page action is allowed per-extension. |
| 12 |
| 13 They are registered in the manifest like so: |
| 14 |
| 15 ``` |
| 16 { |
| 17 "name": "My extension that has a browser action", |
| 18 "version": "1", |
| 19 "browser_action": { |
| 20 "default_icon": "foo.png", // optional |
| 21 "default_title": "Click here for foo", // required |
| 22 "popup": "popup.html" // optional |
| 23 } |
| 24 } |
| 25 ``` |
| 26 |
| 27 And they also have a programmatic API: |
| 28 |
| 29 ``` |
| 30 // Set the icon. Can be specified using either a path to a static icon inside |
| 31 // the extension, or by using raw image data from an HTML5 canvas element |
| 32 // (see: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-
element.html#imagedata) |
| 33 // Either the imageData or path property must be set. |
| 34 void chrome.browserAction.setIcon({optional ImageData imageData, |
| 35 optional string path, |
| 36 optional int tabId}); |
| 37 |
| 38 // Set the browser action title. This shows up in the tooltip on mouseover, and |
| 39 // in the overflow menu next to the icon. |
| 40 void chrome.browserAction.setTitle({string title, optional int tabId}); |
| 41 |
| 42 // Set the badge background color. The |color| array is an array of four integer
s |
| 43 // in the range [0-255] that specify the ARGB color for the badge background. |
| 44 void chrome.browserAction.setBadgeBackgroundColor({int[] color, optional int tab
Id}); |
| 45 |
| 46 // Set the badge text color. The |color| array is an array of four integers |
| 47 // in the range [0-255] that specify the ARGB color for the text background. |
| 48 void chrome.browserAction.setBadgeTextColor({int[] color, optional int tabId}); |
| 49 |
| 50 // Set the badge text. This can be any string, but practically speaking, it is |
| 51 // limited to about 4 characters. |
| 52 void chrome.browserAction.setBadgeText({string text, optional int tabId}); |
| 53 |
| 54 // Fired when the browser action is clicked. |
| 55 event chrome.browserAction.onClicked(Tab tab); |
| 56 ``` |
| 57 |
| 58 ## Per-tab details |
| 59 |
| 60 There are two common use cases for browser actions: global notifiers (eg Gmail n
otifier), and things that can affect any tab (eg bookmark this page in delicious
). |
| 61 |
| 62 For the first case, you can call each API without the optional tabId parameter.
It sets the default details for the browser action in each window. |
| 63 |
| 64 With the tabId specified, the API call only affects the browser action when the
specified tab is selected. |
| 65 |
| 66 ## Dynamic images |
| 67 |
| 68 One of the overloads to setIcon allows authors to create their own images using
the HTML canvas element. The implementation of this method in extension\_process
\_bindings.js would need to convert the ImageData object into something that we
could send over IPC. Probably a string. |
| 69 |
| 70 ## Static image paths do not need to be prespecified |
| 71 |
| 72 When setIcon() is called, it specifies the relative path to an image inside the
extension. This can be implemented without any extra sandbox gymnastics by using
a canvas element internally in the implementation of the API to load the image,
populate a canvas, and then call setIcon({imageData...}); |
| 73 |
| 74 ## Sizing, positioning, and overflow |
| 75 |
| 76 As an advanced (v2) feature, users should be able to reposition the browser acti
ons within the container using drag and drop. |
| 77 |
| 78 The browser action container will grow larger until the omnibox reaches some min
imum size. After that, browser actions will overflow. Users should be able to dr
ag+drop into the overflow area. |
| 79 |
| 80 ## Hiding browser actions |
| 81 |
| 82 As an advanced (v2) feature, it should be possible for users to hide a browser a
ction by right-clicking it. They could get it back by right-clicking the contain
er and selecting from a list of checkmarked buttons. |
| 83 |
| 84 ## Popups |
| 85 |
| 86 If you specify a popup, you will still get the browserAction.onClicked event (EK
: I would prefer if this wasn't the case. They can accomplish the equivalent in
their popup's HTML code, and that will likely encourage less racy designs.). In
the future, there should also be a popup closed event. Popups can be closed pr
ogrammatically using window.close(). Initial popup dimensions are determined dyn
amically based on content size, but constrained within a sensible minimum and ma
ximum. |
OLD | NEW |