手把手教你开发chrome扩展一：开发Chrome Extenstion其实很简单

时间 2019-11-20

标签手把手开发 chrome 扩展 extenstion 其实简单栏目 Chrome 繁體版

原文原文链接

Chrome的更新速度能够说前无古人，如今我天天开机的第一件事就是打开Chrome检查是否是有了新版本。界面清爽、操做人性化、网络备份资料和快速的启动速度令我爱不释手，还有它拥有众多的扩展程序，相对于firefox的插件来讲，数量上和质量上稍显不足，但相信chrome将会很快在扩展上超越firefox，firefox上内存占用上实在不使人满意，也许我使用firefox的一个缘由就是由于firebug，不过相信chrome平台的类firebug插件也会很快出现。 css

Chrome的扩展开发十分简单，咱们只须要掌握web开发的htm+CSS+Javascript，就能很快开发出本身的扩展。 html

你须要了解的内容

在开发前首先要掌握一些基础知识。 web

一、Chrome扩展文件 chrome

Chrome扩展文件以.crx为后缀名，在Google Chrome扩展官方网站下载扩展时，Chrome会将.crx文件下载到Chrome的Application Data文件夹的User Data\Temp下，通常是C:\Documents and Settings\User\Local Settings\Application Data\Google\Chrome\User Data\Temp，安装完成或者取消安装，该文件就会被删除。.crx其实是一个压缩文件，使用解压文件打开这个文件就能够看到其中的文件目录，下图中是“关灯看视频”扩展的截图： json

所以能够认为，咱们实际上就是写一个Web应用，而后将按照Chrome的规定将一个快捷方式放在Chrome工具栏上。网络

二、Browser Actions（扩展图标） ide

把Browser Actions翻译成扩展图标不是很准确，但它的功能就是把你的应用显示在Chrome工具栏上。咱们在上面看到一个文件manifest.json，就是使用这个文件来把相应的图标和其余参数注册到Browser Actions。好比下图中就是EverNote的扩展图标。工具

三、Page Actions（地址栏图标） 网站

若是你熟悉一些Chrome插件的话，你必定会发现有些扩展的图标不是显示在地址栏的右边，而是显示在地址内部右方，这就是Page Actions地址栏图标。 google

能够看出上面中有三个Page Actions，图中我标出的是Chrome添加书签，如今你就会发现其实这个也是Chrome的扩展，只不是它是直接内置在Chrome的。

Page Actions与Browser Actions的区别就是Page Actions不是随时都是显示的，必须在特定的页面中这个功能才能使用。所以在开发中注意：若是不是所有页面中都能使用的功能请使用Page Actions方式。

四、popup弹出窗口

popup属于Browser Actions，当点击图标时出现这个窗口，能够在里面放置任何html元素，它的宽度是自适应的。固然，这个弹出窗口不会被Chrome拦截的:)

以下图中是evernote的popup窗口：

五、Background Pages后台页面

这个窗口不会显示，它是扩展程序的后台服务，它会一直保持运行。好比在一些须要数据保存程序中，若是当前用户关闭popup，就须要Background Pages来进行相应的操做。

本身动手作一个

咱们以一个简单的任务管理程序来一步步讲解。

上图是界面实现，咱们首先完成界面的显示部分，首先创建一个新文件夹，以扩展应用的名称为标题，咱们这里的应用叫作MyTaskList。而后把找一个图标文件，放到文件夹中，也可直接右键下载个人这个图标：

图标文件不要小于19px*19px，但最好也不要超过这个尺寸，虽然大图它会自适应，但会使得应用文件变大。而后完成和未完成状态的两个图标放到资源文件中，能够创建任意文件夹放进去，由于CSS文件把定义它们的路径。

创建manifest.json来定义咱们程序配置：

           {  
         
             "name":"MyTaskList",  
         
             "version":"0.9.0",  
         
             "description":"Management my everyday's task lists.",  
         
             "browser_action": {  
         
               "default_icon":"icon.png" , 
         
               "default_title":"My Task List", 
         
               "default_popup":"popup.html" 
         
             }  
         
           }

其中name表明应用程序名，version表明版本号，description表明功能描述。这些在安装扩展后就能看到，见下图：

browser_action表明扩展图标段显示，它会定义图标地址、标题（也就是鼠标悬停提示）和默认的popup页面。咱们这里定义的popup页面为popup.html。

接下来开始定义popup.html显示，它不须要使用<html>、<head>和<body>标签，能够直接写上样式、脚本和html。咱们的popup.html源码为：

           <style type="text/css"> 
         
           *{margin:0;padding:0;} 
         
           body{color:#333;overflow: hidden;margin: 0px;padding:5px;background: white;font-size:12px;} 
         
           img{margin:0 4px;} 
         
           #addItemDiv{color:#ccc;} 
         
           .hide{display:none;} 
         
           .show{display:block;} 
         
           .taskItem{cursor:pointer;} 
         
           input{width:100%;} 
         
           label.on{width:12px; display:inline-block; height:12px; background:url(images/bg_task_on.gif) no-repeat 0px 2px;} 
         
           label.off{width:12px; display:inline-block; height:12px; background:url(images/bg_task_off.gif) no-repeat 0px 2px;} 
         
           </style> 
         
           <div id="newItem" class="gray">添加新项</div> 
         
           <div id="addDiv" class="hide"><input type="text" id="txtTitle" /></div> 
         
           <div id="taskItemList"> 
         
               <div class="taskItem"> 
         
                   <label class="on"></label><span class="taskTitle">新任务</span> 
         
               </div> 
         
               <div class="taskItem"> 
         
                   <label class="off"></label><span class="taskTitle">已完成任务</span> 
         
               </div> 
         
           </div>

打开预览，样子就已经出来了：

这样咱们文件就已经创建完成，文件列表以下：

如今就能够先尝试把它打包装到本身的Chrome里。

首先打开Chrome-工具-扩展程序，展开开发人员模式，打到“打包扩展程序”按钮：

点击“打包扩展程序…”，弹出打包选择文件窗口，在扩展程序根目标中找到咱们创建的文件夹，私有密码文件第一次不用选择：

点击肯定，它会在根文件夹同一级生成MyTaskList.crx和MyTaskList.pem，MyTaskList.pem是程序签名文件，以新版本的开发中还须要这个文件，不要删除它。把MyTaskList.crx拖进Chrome窗体内，就会把这个应用MyTaskList安装在Chrome里。

咱们的这个简单的模型就能看到效果了，下一节咱们就会完善其中的代码。