Chrome扩展开发指南

Chrome扩展开发指南(1)——入门这是制作chrome扩展插件的入门指南，不需要任何编程基础，看完这个后，我们就着手做自己的Chrome插件了。好吧，我们现在就开始，其实我也是个新手。准备工具做任何事情都要有个工具，制作chrome插件需要的工具很少。记事本，用来编写代码Chrome浏览器，这个不能少吧。Windows下，所有版本的Chrome都可以制作插件。Linux下需要下载Beta版本，Mac下载dev版本。开始制作第一个插件在计算机中创建一个目录来存放插件代码。在目录里面创建文件manifest.json(注意后缀名是.json)，用记事本打开，写入如下代码{name:第一个Chrome插件,version:1.0,description:我的第一个Chrome插件，还不错吧,browser_action:{default_icon:icon.gif}}复制代码把下面两张图片保存到文件夹中，分别取名icon.gif和smile.gif图片一：图片二：安装这个插件:a.点击右上角扳手，选择扩展程序，打开扩展中心。b.点击右上角的“开发人员模式”，使得前面的“+”变成“-”，打开相应的菜单。如果一开始就是“-”，那么不用点击。c.点击“载入正在开发的扩展程序按钮”，导入刚才创建的文件夹。如果一切顺利，你的Chrome地址栏将会有个新图标，你的第一个插件诞生了。给第一个插件增加新功能你现在虽然做了第一个插件，但实际上他并没有实现任何功能，我们点击图标，没有任何反应。下面我们就给他增加点功能。编辑manifest.json这个文件，用下面的代码替换现有的代码，其实我们只是加了一行代码和一个逗号而已。{name:第一个Chrome插件,version:1.0,description:我的第一个Chrome插件，还不错吧,browser_action:{default_icon:icon.gif,popup:popup.html}}复制代码下面我们创建一个文本文件popup.html，用记事本打开，将下面的代码写进去pHello,Chrome!/pp我的名字叫ChromeChina!/ppahref==_blankChrome中文论坛欢迎你/apimgsrc=smile.gif//p复制代码回到Chrome的扩展中心，点击插件下的“重新载入”。现在点击插件图标看看。我们的第一个插件算是制作成功了。打包插件我们想把自己制作的插件给其他人用，那么就需要将插件打包。回到Chrome的插件扩展中心，点击“打包扩展程序”按钮。选择刚才创建的文件夹，点击确定生成后缀为crx和cpm文件各一个。把crx文件发送给自己的朋友，告诉他们你也会制作chrome插件吧。你可以修改里面的文字图片，制作出极具个性的扩展来了。现在让我们来看看大家都做出了什么样的扩展，把你的第一个扩展上传上来让大家看看吧！这个是我的：Chrome扩展开发指南(2)——概述这篇文章翻译自，我还没有真正做过插件，翻译这篇文章算是班门弄斧，有翻译的不好的地方请一定指出来，希望能够达到完美！(对新手说的话：文章涉及到的一些术语，对没有任何网页知识的新手来说还是挺难懂的，可以借助Google/baidu看一下，其实不懂也没多大关系，这篇文章只是一个概述，完全可以跳过这些术语，希望大家对制作插件不要失去信心。)只要看完这篇文章，并且做过入门指南中的例子，你就可以真正开始开发属于自己的Chrome插件了。基础知识一个Chrome扩展是由HTML、CSS、JavaScript、图片等文件压缩而成。扩展实际上就是一个web页面，你可以用任何浏览器提供给web页面的接口，从XMLHttpRequest到JSON，再到HTML本地缓存都可以使用。Chrome扩展能做什么呢？我们肯定使用过一些扩展，会发现有些扩展在Chrome地址栏右侧区域增加一个图标。还有些扩展能够和浏览器的一些元素(如书签、tab导航标签)交互。扩展还可以和web页面交互，甚至是从web服务器获取数据。更加详细的内容可以从Developer'sGuide看到。Chrome扩展的组成文件每个扩展由下列文件组成：一个manifest文件(主文件,json格式)至少一个HTML文件(主题可以没有HTML文件)JavaScript文件(可选，非必须)任何其他你需要的文件(比如图片)当你开发一个扩展的时候，需要把这些文件放在一个文件夹里，当你发布这个扩展的时候，这个文件夹下的所有文件将会打包成一个特殊后缀.crx的ZIP文件。引用文件你可以放置任何文件到你的扩展里面，但是怎么调用这些文件呢？一般来说，使用相对地址调用，类似HTML中调用文件。下面是个例子，在子文件夹images中有个图片myimage.png，我们可以这样调用它imgsrc=images/myimage.png复制代码其中images/myimage.png表示这个文件。也许你注意到当使用GoogleChromedebugger查看这些文件的时候给，每个文件的地址是下面这种格式chrome-extension://extensionID/pathToFile复制代码这个地址中，extensionID是你制作的扩展的唯一标示符，也就是扩展的身份证编号。pathToFile是文件相对扩展顶级文件夹得位置。manifest文件主文件取名manifest.json，用来描述这个扩展，包括扩展名字、版本、调用的文件、可用域等信息。下面是个典型的manifest文件，这个扩展可以调用google.com的内容。{name:MyExtension,version:2.1,description:GetsinformationfromGoogle.,icons:{128:icon_128.png},background_page:bg.html,permissions:[http://*.google.com/,https://*.google.com/],browser_action:{default_title:,default_icon:icon_19.png,popup:popup.html}}复制代码扩展结构组成结构绝大部分扩展有background文件，一个不可见的文件控制着整个扩展的运行。上面这个图片显示的浏览器至少安装了两个扩展：一个浏览器行为扩展(黄色的图标),页面行为扩展(蓝色的图标)。这个浏览器行为扩展的background文件是用一个HTML文件定义的(background.html)，这个background文件中有JavaScript代码控制整个浏览器的活动。HTML页面background不是唯一存在的HTML文件，比如浏览器行为可能是弹出一个小窗口，这个小窗口的内容就可以调用一个HTML文件。Chrome扩展也能够用chrome.tabs.create()orwindow.open()这种函数来显示HTML文件。扩展里面的HTML文件可以互相访问对方的DOM结构，可以引用其他文件中定义的函数。下面的图展示了浏览器弹出一个窗口这个功能的结构(这正是我们最开始的例子)。这个弹出窗口的内容是一个HTML的web文件，这个弹出窗口不需要包含background文件中的代码，因为，popup.html和background是可以互相访问的。内容脚本(Contentscripts)如果你插件需要和网页交互，那么他就需要一个内容脚本(Contentscripts)，内容脚本常由JavaScript编写，会在网页载入完成后调用。完全可以把内容脚本看做是网页的一部分，而不是扩展的一部分。内容脚本可以访问到当前浏览器浏览的页面，而且还可以改变网页的显示方式(油猴脚本就是内容脚本)。下面的图片中，内容脚本可以读取、更改网页的DOM。注意，他不能更改background.html中的内容。内容脚本也不是和父扩展完全隔离开来，他也可以和父级扩展交换信息。如下图中所示，内容脚本在发现一个RSSFeed地址后将会给background.html发送一个信息。或者background.html给内容脚本发送一个信息要求改变网页外观。不同页面间的交互一个扩展中的文件常常需要交互。由于扩展的所有文件都由同一个进程执行，网页能够直接给其他页面发送命令。可以使用类似chrome.extensionmethodssuchasgetViews()andgetBackgroundPage()这样的方法引用扩展中的方法。一旦页面中引用了另外的页面，第一个页面就可以调用其他页面的函数，甚至可以控制DOM。结束语好了，你已经大概了解了一个扩展程序的基本内容，可以开始写作自己的扩展了。本文由ChromeChina翻译，转载注明出处扩展开发指南(3)——BrowserAction(扩展图标)这是扩展开发指南的第三篇，前面我们首先作了第一个扩展，然后学习了Chrome扩展的大概结构，看完后可能会有些迷惑，别担心，相信随着我们学习的深入，我们渐渐发现我们已经可以做扩展了。当然为了做出优秀的扩展，我们还需要学习一些HTML、CSS、JavaScript的基础知识，网站就不错。今天的文章翻译自，介绍BrowserAction，即右侧的扩展图标。这节的内容还是挺有趣的。(同样，有翻译需要改进的地方请指出来)BrowserActions的作用就是控制Chrome地址栏右侧添加一个图标。除了给chrome增加一个图标的功能外，还可以设置提示文字、图标标记、弹出窗口。下图中，在地址栏右侧的彩色图标就是一个BrowserAction。BrowserActions创建的图标是一直可见的，如果你想创建一个不是一直不可见的图标，可以使用pageaction。BrowserAction在Manifest文件中的位置下面是个在扩展的manifest文件中注册browseraction的例子：{name:Myextension,...browser_action:{default_icon:images/icon19.png,//requireddefault_title:GoogleMail,//optional;shownintooltipdefault_popup:popup.html//optional},...}复制代码UI部分BrowserAction必须有一个图标。同时还可以有提示文字、图标标记、弹窗。图标BrowserAction的图标会被浏览器缩放成19px*19px大小，太大的图标是没有意义的。你可以用两种方法定义图标：用一个静态图片，或者用HTML中的canvas元素。用静态图片的话简单些，但是用canvas元素可以创建更加平滑的图片。静态图片可以是任意常见格式的图片，包括BMP,GIF,ICO,JPEG,orPNG。我们可以在manifest文件中用default_icon语句来定义这个图标，也可以调用setIcon()函数。提示文字提示文字是指将鼠标移到扩展图标上显示的文字。我们可以在manifest中用default_title定义，也可以通过调用setTitle()函数。图标标记图标标记是指覆盖在扩展图标上的一些文字，比如Gmail提醒图标上未读邮件数，PR查询工具上PR值。由于标记的位置很小，