| OLD | NEW |
| 1 <div id="pageData-title" class="pageData">Toolstrips</div> | 1 <div id="pageData-title" class="pageData">Toolstrips</div> |
| 2 | 2 |
| 3 <!-- BEGIN AUTHORED CONTENT --> | 3 <!-- BEGIN AUTHORED CONTENT --> |
| 4 | 4 |
| 5 <p> | 5 <p> |
| 6 Toolstrips allow you to add UI to Google Chrome's toolbar area. | 6 Toolstrips allow you to add UI to Google Chrome's toolbar area. |
| 7 Toolstrips are nothing more than (very small) HTML pages, | 7 Toolstrips are nothing more than (very small) HTML pages, |
| 8 so anything you can do with HTML/CSS/JavaScript, | 8 so anything you can do with HTML/CSS/JavaScript, |
| 9 you can do with toolstrips. | 9 you can do with toolstrips. |
| 10 </p> | 10 </p> |
| (...skipping 17 matching lines...) Expand all Loading... |
| 28 <pre><div class="toolstrip-button"> | 28 <pre><div class="toolstrip-button"> |
| 29 <!-- Image is optional and should be a 16x16 icon. --> | 29 <!-- Image is optional and should be a 16x16 icon. --> |
| 30 <img src="<em>path/to/some_icon.png</em>"> | 30 <img src="<em>path/to/some_icon.png</em>"> |
| 31 <span>My Button</span> | 31 <span>My Button</span> |
| 32 </div></pre> | 32 </div></pre> |
| 33 | 33 |
| 34 | 34 |
| 35 <h2>Debugging tips</h2> | 35 <h2>Debugging tips</h2> |
| 36 | 36 |
| 37 <ul> | 37 <ul> |
| 38 <li>You can right click on a toolstrip to get a web inspector.</li> | 38 <li>You can bring up the web inspector for a toolstrip by going to chrome://exte
nsions and clicking on the 'inspect' link. This includes a javascript console a
s well as a debugger.</li> |
| 39 <li>alert(), prompt(), and confirm() don't work yet. Sorry about that.</li> | 39 <li>alert(), prompt(), and confirm() don't work yet. Sorry about that.</li> |
| 40 <li>You can run toolstrips in the main content area by loading their URL, which
would be something like chrome-extension://0000000000000000000000000000000000000
000/my_toolstrip.html</li> | 40 <li>You can run toolstrips in the main content area by loading their URL, which
would be something like chrome-extension://0000000000000000000000000000000000000
000/my_toolstrip.html</li> |
| 41 </ul> | 41 </ul> |
| 42 | 42 |
| 43 <h2>Design tips</h2> | 43 <h2>Design tips</h2> |
| 44 | 44 |
| 45 <ul> | 45 <ul> |
| 46 <li>Try not to use too much space. Toolbar real estate is precious and users ten
d to prefer extensions to use as little of it as possible.</li> | 46 <li>Try not to use too much space. Toolbar real estate is precious and users ten
d to prefer extensions to use as little of it as possible.</li> |
| 47 <li>The toolbar automatically detects how much space a toolstrip needs and reflo
ws. So you can resize your toolstrip dynamically if you need a little more room
temporarily.</li> | 47 <li>The toolbar automatically detects how much space a toolstrip needs and reflo
ws. So you can resize your toolstrip dynamically if you need a little more room
temporarily.</li> |
| 48 <li>If you need to do more extensive UI, use the tab contents area or a pop up w
indow.</li> | 48 <li>If you need to do more extensive UI, use the tab contents area or a pop up w
indow.</li> |
| 49 <li>Remember that there can be multiple instances of a given toolstrip page runn
ing at one time. Each browser window has its own toolstrip. If you need long-run
ning application logic, try Background Pages.</li> | 49 <li>Remember that there can be multiple instances of a given toolstrip page runn
ing at one time. Each browser window has its own toolstrip. If you need long-run
ning application logic, try Background Pages.</li> |
| 50 </ul> | 50 </ul> |
| 51 <!-- END AUTHORED CONTENT --> | 51 <!-- END AUTHORED CONTENT --> |
| OLD | NEW |