Chrome扩展开发教程学习笔记（一)

原文来自: http://marinzou.blogbus.com/logs/74915478.html

 

Buzz里的一条回复更新顶起了一个旧贴，是一位Chrome同好关于制作某个chrome扩展的呼吁。记得当时看过，心里也激荡了一小下创造的热情，不过当时什么都一团糟，所以在未知的chrome扩展的学习难度前止步，此念遂放下心头，置之度外。今天旧念重温，大概是因为工作进入了一个新阶段且较有进展而导致心情大好，这次创造的热情挟着我搜索、阅读了一些扩展制作的基本知识，现将笔记记录于下。是官方资料承蒙各位网友的辛苦劳动的翻译稿，感觉讲得不太深入，仅涉及布局，而具体API的调用基本没讲。不过里面关于设计的一般性原则挺有价值。

概述，原文见http://dev.chromechina.com/thread-2255-1-1.html。
1. Chrome扩展的组成文件：manifest文件（主文件,json格式）；至少一个HTML文件（主题可以没有HTML文件）；JavaScript文件（可选）；任何其他你需要的文件（比如图标图片）。
2. 一般来说，文件调用形式为相对地址调用，类似HTML。当使用Google Chrome debugger时，文件的地址为下列格式：chrome-extension://<extensionID>/<pathToFile>，其中<extensionID>是所在扩展的唯一标示符，即其id；<pathToFile>是文件相对扩展根目录的位置。
3. 主文件取名manifest.json，用来描述这个扩展，包括扩展名字、版本、调用的文件、可用域等信息。
4. 绝大部分扩展有一个非显式的background文件控制着整个扩展的运行，即background.html，内涵javascript脚本以控制浏览器行为。对于html文件，可调用chrome.tabs.create()或window.open()以显示之。同一扩展的HTML文件可以互相访问DOM结构，引用其内定义的函数。
5. 如果需要和网页交互，则需要一个内容脚本（Content script），常由JavaScript编写，在网页载入完成后调用。可将内容脚本看做是网页的一部分，而非直接隶属于扩展。
6. 扩展的所有文件都由同一个进程执行，网页能够直接给其他页面发送命令。一旦页面中引用了另外的页面，第一个页面就可以调用其他页面的函数，甚至控制DOM。引用扩展中的方法可以用诸如getViews()或者getBackgroundPage()这些chrome.extension方法。

浏览器行为，原文见http://dev.chromechina.com/thread-2307-1-1.html。
7. Browser Actions主要负责在Chrome地址栏右侧添加扩展的图标，此外还可以设置提示文字、图标标记、弹出窗口，这部分内容需在manifest.json中写出。
8. Browser Action内容中必须指定图标，可以用default_icon语句，也可以调用setIcon()函数。图片可用静态图片或HTML中的canvas元素，图标在浏览器中总是可见的。静态图片可以是任意常见格式的图片，包括BMP，GIF，ICO，JPEG和PNG。图片不论大小，均被浏览器缩放成19 px*19 px。
9. 一个小技巧是将图标边缘使用alpha透明，这样的话可以融合到各种不同的浏览器主题里。
10. 提示文字是指将鼠标移到扩展图标上显示的文字，其设置可用用default_title定义，也可以调用setTitle()函数。
11. 图标标记是指覆盖在扩展图标上的一些文字，比如Gmail提醒扩展图标上未读邮件数等，最多容纳4个字母。设置标记文字或者背景可以分别调用函数setBadgeText()和setBadgeBackgroundColor()。
12. 点击扩展弹出小窗的行为也由Browser Action定义，可用default_popup定义某个html文件为默认弹出窗口的html脚本，当然也可以调用函数：setPopup()。
13. 仅在小部分页面起作用的话就不要用browser action，而是用page actions。

选项页面，原文见http://dev.chromechina.com/thread-2377-1-1.html。
14. 选项页面（Options Page）用于让用户自定义扩展。选项页需要在manifest中定义，格式是： “"options_page": "options.html",”，这样就把options.html指定为选项页面了，然后编写options.html脚本即可。

重置页面，原文见http://dev.chromechina.com/thread-2456-1-1.html。
15. 重置页面（override page）即用于替换Google Chrome默认新标签页的自制页面。在manifest中定义， 如："chrome_url_overrides": {"newtab": "newtab.html"},”（注意格式），其中新标签页为newtab.html。
16. 重置页面设计的几个原则：保持页面简洁，使得能够快速加载；写入代码：<title>New Tab's Name</title>，确保有<title>标签；让用户新建标签页的时候键盘焦点在地址栏而非页面上；不要模仿默认的新标签页面，以免迷惑用户。

页面行为，原文见http://dev.chromechina.com/thread-2532-1-1.html。
17. 页面行为（Page Action）仅在当前页面内可用，也需在manifest中定义，格式如：“{"page_action": {"default_icon": "icons/foo.png","default_title": "Do action","default_popup": "popup.html"},”。
18. 与浏览器行为不同（参8），页面行为的图标可在显示/隐藏间切换。默认情况下，地址栏图标是隐藏的。可用函数show()和hide()分别使地址栏图标显示和隐藏。调用show()时必须指定在哪些标签页上显示。
19. 使用页面行为的一些原则：在大部分页面起作用的功能请使用扩展图标；使用比扩展图标更小的图标，一般来说为19 px，且边缘带有模糊效果；不要总是激活图标，否则很讨厌。

事件，原文见http://dev.chromechina.com/thread-2854-1-1.html。
20. 事件（Event）即当某些行为发生所触发的函数，这些行为包括打开新标签、点击按钮之类。事件的添加和绑定通过addListener()进行，addListener()用于注册行为的那个函数，此外还有removeListener(function callback(...))和hasListener(function callback(...))等。

目前就翻译到这里，另有一个交流会的优酷视频，稍看了一下，觉得present得不好，没看。下一步准备开始读那个加入了很久但是一直在潜水的chrome迷的开发指南翻译计划，如果水平到了还可以顺便做做翻译或者校对，嘻嘻。

备忘：地址：https://wave.google.com/wave/#restored:wave:googlewave.com/w+ovaN93tVC。