最近在开发一个chrome插件，在网上找到了一些的文章，虽说按照文章可以写出对应的例子，但若要进行实际开发，发现还是有不少文章中没有的坑。下面我将结合我在开发过程中遇到的几个方面，对这些坑做一下补充。

如果你有前端开发的经验，那么你将可以很快开始你的chrome插件开发。chrome插件开发的主要内容仍然是“老三样”——HTML、 CSS、javascript  不同的是执行环境与平时的浏览器略有不同，且有一些安全限制，还有插件开发中能用到一下chrome专门封装api

有哪些比较好的文档？

　　首先是chrome的官方文档：  https://developer.chrome.com/extensions/  如果英文不是很好，或因为网络原因打不开这个网址的同学，可以看下面这个链接。

chrome官方目前没有提供中文的文档，好在360 浏览器的极速模式使用的是webkit内核并且也支持chrome插件开发，因此360 翻译了一份很详细的开发文档（默默点赞）。有能力的同学还是看官方的，毕竟内容全且新。地址： http://open.chrome.360.cn/extension_dev/overview.html

当然一些基本的东西文档中已经有了，我就不单拿出来说了，但我的例子中会提到。

chrome插件的基本结构

　　chrome插件从结构上分为扩展界面部分和content script（注入到页面内执行的脚本）

chrome插件的扩展界面部分分为browser action（启动按钮在地址栏外面的）或page action（启动按钮在地址栏里面的）。每个应用（扩展）最多可以有一个browser action或page action。当应用（扩展）的图标是否显示出来是取决于单个的页面时，应当选择page action；当其它情况时可以选择browser action。

　　content script会在浏览器页面中执行，与扩展界面交互，完成对应的执行逻辑。

　　每个插件都有一个manifest文件，这里面描述的是与插件相关配置信息，包括（名称、图标、文件路径、执行时机等等）。后面的实例中会一一介绍。

插件代码，其实就是HTML、CSS和js，由于我们最终会根据manifest文件打包成一个crx文件。因此静态资源的引用仅仅使用相对路径就可以了。

第一个chrome插件

　　我们定义这样一个需求： 一个获取当前天气的插件。

　　我们新建一个文件夹作为项目目录　　

mkdir weatherCrx
cd weatherCrx

　　有了目录，我们的第一件事情就是创建manifest.json,基本内容如下：

 {

   "name": "weather",

   "version": "0.0.1",

   "manifest_version": 2,

   "description": "get weather",

   "permissions":["tabs","<all_urls>", "http://*/*", "https://*/*"],

   "browser_action": {

     "default_icon": "icon.png" ,

     "default_title": "weather",

     "default_popup": "popup.html"

   }

 }

注意："manifest_version": 2 这一条，必须填写，因为从chrome18开始往后，chrome浏览器插件开发的 manifest.json 文件中的 "manifest_version": 2 属性就必须被显式（固定）的声明了。我之前多次不成功，就是没有加上这一条。

我们的需求和页面的内容没有直接关系也不针对于特定的域名，我在例子中，没有加入content_scripts，并且采用 browser_action 。

manifest.json 中所有的文件路径，都是相对于manifest.json的。主要说一下default_popup，这个html可以理解为入口页面，也就是点击插件按钮时的气泡弹窗。

我定义为popup.html

开始编写popup.html ,然后的一切都和平常的前端开发时一样的。

popup.html:

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>weather</title>

     <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css" />

     <script type="text/javascript" src="lib/jquery/jquery.min.js"></script>

     <script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>

 </head>

 <body>

     <div class="main-wrap">

         <div class="panel panel-default">

            <div class="panel-heading">

               <h3 class="panel-title">天气</h3>

            </div>

            <div class="panel-body clearfix">

               <div id="city-list">

                   <form role="form">

                    <div class="form-group">

                       <label for="name">城市/区域</label>

                       <select id="city-select" multiple class="form-control">

                         <option value="101010100">北京</option>

                         <option value="101070101">沈阳</option>

                         <option value="101291401">丽江</option>

                         <option value="101030100">天津</option>

                       </select>

                    </div>

                 </form>

                 <p id="city-weather" class="alert alert-success" style="display: none;"></p>

                 <a id="weather-get" class="btn btn-success pull-right">获取</a>

               </div>

            </div>

         </div>

     </div>

     <script type="text/javascript" src="js/popup.js"></script>

 </body>

 </html>

在网上找到“中国气象局公共气象服务中心”的api接口地址： http://www.weather.com.cn/adat/cityinfo/101010100.html  其中 101010100表示北京，详见： http://blog.csdn.net/duxinfeng2010/article/details/7830136的整理。

popup.js:

 $(document).ready(function(){

     function showWeather(wi){

         $('#city-weather').text(wi.city+': '+wi.weather+' '+wi.temp1+' - '+wi.temp2).show();

     };

     function getWeather(cityNum){

         $.get('http://www.weather.com.cn/adat/cityinfo/'+cityNum+'.html', function (res){

             if(res.weatherinfo){

                 showWeather(res.weatherinfo);

             }

         }, 'json');

     };

     $('#weather-get').click(function(){

         var curCity = $('#city-select').val();

         if(curCity < 1){return;}

         getWeather(curCity[0]);

     });

 });

值得注意的是，如果你在自己的页面里调用天气的api，是会出现跨域限制的，但是在扩展页面的js中并不会被限制。因为扩展本身，并不属于当前打开的页面。

这样我们的插件就开发好了，在chrome的开发者模式下，对项目打包：

然后将生成的crx文件拖入窗口，安装。

点击按钮，选择城市，看看是不是就看到天气了？

这样我们的第一个chrome 插件就完成了。

后面还会继续讨论 chrome 插件的开发中遇到的一些问题。

chrome 浏览器插件开发（一）—— 创建第一个chrome插件的更多相关文章

  1. Chrome浏览器插件开发－淘宝自动登录

    浏览器插件的介绍 Chrome浏览器插件开发的准备工作 manifest.json配置介绍 页面如何注入scripts文件 一. 浏览器插件的介绍 浏览器插件是一种遵循一定规范的应用程序接口编写出来的 ...

  2. Chrome浏览器插件开发－关于案例

    前言 关于案例 下一章 版本更新提示案例 一.前言 上章我们提到过开发一个插件所需要的步骤: Chrome浏览器插件开发-淘宝自动登录 并且还介绍了如何在页面上面注入脚本代码,并且成功的完成用户名和密 ...

  3. chrome 浏览器插件开发

    一.chrome 浏览器插件开发是什么: 1 从技术上说插件只是一个存在于本地的一个网站.所以呢在插件开发的过程中用到的技术无非是 javascript .html .css . 二.把当前活动页面的 ...

  4. Google Chrome 浏览器插件开发学习

    2014/11/16 Google Chrome 浏览器插件开发学习 因笔记存有文件,不便发表在cnblogs上,请到evernote里找笔记 "Google Chrome 浏览器插件开发学 ...

  5. chrome 浏览器插件开发（二）—— 通信 获取页面变量 编写chrome插件专用的库

    在chrome插件的开发过程中,我遇到了一些问题,在网上找了不少文章,可能是浏览器升级的原因,有一些是有效的也有无效的.下面我简单的分享一下我遇到的坑,以及我把这些坑的解决方案整理而成的js库 —— ...

  6. Chrome浏览器扩展开发系列之八：Chrome扩展的数据存储

    Google Chrome浏览器扩展可以使用如下任何一种存储机制: HTML5的localStorage API实现的本地存储(此处略) Google的chrome.storage.* API实现的浏 ...

  7. chrome浏览器的跨域设置 Google Chrome浏览器下开启禁用缓存和js跨域限制--disable-web-security

    chrome用户默认路径 Win7:C:\Users\[用户名]\AppData\Local\Google\Chrome\User Data\XP:C:\Documents and Settings\ ...

  8. chrome浏览器中安装以及使用Elasticsearch head 插件

    一.安装Elasticsearch head 插件 下载安装包:https://github.com/liufengji/es-head/commit/121cdcb6d1b18656461e4889 ...

  9. chrome浏览器插件开发实例

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code   具体步骤: 1.新建 manifest.json 文件 { "name& ...

随机推荐

  1. RPC簡介

    RPC 技术原理       RPC ( Remote Procedure Call Protocol,远程过程调用协议 ): 客户端在不知道调用细节的情况下,调用存在于远程计算机上的某个对象,就像调 ...

  2. HSQL结合润乾报表同步部署问题

     1 . 问题概述 中国登记结算公司为了验证报表模型和附带的样例[内建的不算],都是需要连接携带的DEMO数据源才能够运行, 应用程序[润乾报表]需要部署到UNIX服务器上, DEMO自带的HSQ ...

  3. Mysqlbinlog工具及导出数据并转换编码导入

    2014 - binlog是通过记录二进制文件方式来备份数据,然后在从二进制文件将数据恢复到某一时段或某一操作点. 1.使用mysqlbinlog工具来恢复 Mysqlbinlog日志如何开启? 在m ...

  4. REST Framework 的分页

    分页: PageNumberPagination from rest_framework.pagination import PageNumberPagination 导入分页之后你要实例化分页这个对 ...

  5. [C++] 用Xcode来写C++程序[4] 函数

    用Xcode来写C++程序[4] 函数 此节包括引用函数,内联函数,防止修改函数入参,函数自身带有默认值. 引用函数:防止复制对象,减少系统开销 内联函数:编译的时候根据具体情形将代码嵌入进去,成不成 ...

  6. Python入门-模块2（random模块、os模块）

    >>> random.randomrange(1,10) #返回1-10之间的一个随机数,不包括10 >>> random.randint(1,10) #返回1-1 ...

  7. 解决windows10下无法安装.net framework 3.5，错误代码0x800F081F

    1.下载 NET Framework 3.5的安装包netfx3.cab: http://download.windowsupdate.com/d/msdownload/update/software ...

  8. （转）透明光照模型与环境贴图之基础理论篇（折射率、色散、fresnel定律） .

     摘抄“GPU Programming And Cg Language Primer 1rd Edition” 中文名“GPU编程与CG语言之阳春白雪下里巴人” 材质和光的交互除了反射现象,对于透明物 ...

  9. jenkins 安卓打包生成二维码下载

    先来张图看看吧 构思 jenkins gradle 打包apk文件,python myqr 模块生成二维码 放入nginx 访问图片的路径,apk安装包放在 nginx 下载目录. 环境 centos ...

  10. python第三方库——xlrd和xlwt操作Excel文件学习

    python第三方库——xlrd和xlwt操作Excel文件学习 1安装: C:\Users\Lenovo>pip install xlwtCollecting xlwt  Downloadin ...