Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(709)

Side by Side Diff: docs/browser_actions.md

Issue 1309473002: WIP: Migrate Wiki content over to src/docs (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(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.
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698