注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

网易杭州 QA Team

务实 专注 分享 做有态度的QA

 
 
 
 
 

日志

 
 

Chrome扩展编写入门基础  

来自m18514657855   2016-12-14 14:36:37|  分类: Web测试 |举报 |字号 订阅

  下载LOFTER 我的照片书  |

背景

Chrome是Google公司基于Webkit开发的一款浏览器,但实际上它已经可以称做一个操作系统,我们可以在它基础上开发很多扩展或者应用。Google自行开发的V8引擎使得JavaScript在Chrome中的执行效率大幅提升。

初识chrome扩展

chrome扩展是用来补充chrome功能的,所以我们可以根据自己的需求来定制扩展,辅助开发或者测试。chrome扩展强调与浏览器的结合,比如chrome扩展可以再浏览器的工具栏和地址栏中显示图标,它可以更改当前浏览器窗口中的内容,也可以更改浏览器代理服务器的设置等。
chrome扩展是一系列文件的集合,包括HTML文件,CSS样式文件,JavaScript脚本文件、图片以及manifest文件。而manifest.json文件,正是chrome扩展得以在chrome浏览器中运行的一个入口,它的文件名称和格式都是固定的。下面来详细讲解一下manifest.json文件格式和内容。

manifest.json文件

  • 文件名称
    • 文件名称固定为manifest.json,可以看做是chrome扩展的配置文件
  • 文件格式和基本配置模板
    • 文件格式采用json格式,如果对json格式不太了解请参考:http://www.w3school.com.cn/json/json_syntax.asp
    • 基本配置模板(下面这份manifest的基本配置如有需要可以保存一份,大部分的扩展有着些配置字段,基本足够了)
            {
                "manifest_version": 2,
                "name": "My Extension",
                "version": "versionString",
                "default_locale": "en",
                "description": "A plain text description",
                "icons": {
                    "16": "images/icon16.png",
                    "48": "images/icon48.png",
                    "128": "images/icon128.png"
                },
                "browser_action": {
                    "default_icon": {
                        "19": "images/icon19.png",
                        "38": "images/icon38.png"
                    },
                    "default_title": "Extension Title",
                    "default_popup": "popup.html"
                },
                "page_action": {
                    "default_icon": {
                        "19": "images/icon19.png",
                        "38": "images/icon38.png"
                    },
                    "default_title": "Extension Title",
                    "default_popup": "popup.html"
                },
                "background": {
                    "scripts": ["background.js"]
                },
                "content_scripts": [
                    {
                        "matches": ["http://yuedu.163.com/*"],
                        "css": ["styles.css"],
                        "js": ["jquery.js", "myscript.js"]
                    }
                ],
                "options_page": "options.html",
                "permissions": [
                    "http://yuedu.163.com/*"
                ],
                "web_accessible_resources": [
                    "images/*.png","css/mycss.css","js/myscrit2.js"]
            }
  • manifest.json文件字段详解
    • 必须属性
      • manifest_version:一般固定为2,目前manifest文件的最新版本就是2
      • name:扩展管理页面展示的扩展的名称
      • version:你的扩展的版本号
    • 推荐属性
      • description:扩展描述,主要描述扩展的功能
      • icons:扩展图标,16像素展示在扩展栏中,48像素的展示在扩展管理页面,128像素的用在安装的过程中,建议使用PNG格式对透明度支持好
      • default_locale:国际化语言支持(注意如果扩展有——locales目录,这个字段是必须的字段)
    • browser_action---可以设置扩展信息栏的图标、图标悬浮提示、点击图标时弹出窗口等(浏览器功能扩展)
      • default_icon:选择19像素的图标显示在工作栏,如果用户使用视网膜屏幕的话会展示38像素的图片(如果有browser_action,次字段必须配置)
        • 还可以使用setIcon方法来动态设置图片
        • chrome.browserAction.setIcon(:path:"icon.png"});
      • default_popup:一般都会关联一个html文件,用于设置点击扩展图标之后弹出的浮层中的展示内容的
      • default_title:hover扩展时展示的扩展名称
    • page_action---页面功能扩展,功能类似于browser_action
      • 图标会加载在地址栏里面,一般跟当前访问的URL地址进行交互
    • background---非常重要的一个属性,后台脚本
      • 在其中设置scripts字段,关联后台脚本
      • 或者设置page字段,来关联html文件(注意:scripts字段和page字段是不能同时存在的)
      • background字段中定义的脚本是用来处理扩展本身的一些逻辑,可以绑定运行事件等(注:background只在加载时运行一次)
      • 例:
        chrome.browserAction.onClinked.addListener(function(){...});
    • content_scripts---内容脚本,与网页本身进行交互
      • content_scripts可以直接访问或修改当前页面的DOM(注:他们只是共享DOM,但是js处理本身还是在两个不同的环境中进行的)
      • matches:可以访问的url
      • css:关联的css文件
      • js:关联的js文件,用于访问或者修改当前的DOM
      • 与background的交互:
        • content_script监听消息:
          • chrome.extension.onMessage.addListener(function(msg,sender,sendResponse){...});
        • background发送消息:
          • chrome.tabs.sendMessage(tab.id,msg,function(data){...});
        • 反之,同样
    • option_page---设置扩展得设置页面
    • permissions---权限设置
      • 常用的一些权限:"tabs","activeTab","storage","http://*/"等
      • 需要在permissions中向chrome申请相应的权限,才能进行访问
    • web_accessibble_resource---指定扩展注入目标页面所需要的资源文件的路径,相当于把这些文件加白名单

实例

下面展示一个小小的示例:
  1. 示例功能:点击时间扩展,展示当前时间
  2. 示例代码:
    • manifest.json
      • {
            "manifest_version": 2,
            "name": "my clock",
            "version": "1.0",
            "description": "A simple clock extension",
            "icons": {
                "16": "images/icon16.png",
                "48": "images/icon48.png",
                "128": "images/icon128.png"
            },
            "browser_action": {
                "default_icon": {
                    "19": "images/icon19.png",
                    "38": "images/icon38.png"
                },
                "default_title": "my clock",
                "default_popup": "popup.html"
            }
        }
    • popup.html---展示时间
      • <html>
        	<head>
        		<style>
        		* {margin: 0;padding: 0;}
        		body {width: 200px;height: 100px;}
        		div {line-height: 100px;font-size: 42px;text-align: center;}
        		</style>
        	</head>
        	<body>
        		<div id="clock_div"></div>
        		<script src="js/my_clock.js"></script>
        	</body>
        </html>
    • my_clock.js---获取当前时间
      • function my_clock(time){
            var today = new Date();
            var h = today.getHours();
            var m = oday.getMinutes();
            var s = today.getSeconds();
            m = m >= 10 ? m : ('0' + m);
            s = s >= 10 ? s : ('0' + s);
            time.innerHTML = h + ":" + m + ":" + s;
            setTimeout(function(){my_clock(el)}, 1000);
        }
        
        var clock_div = document.getElementById('clock_div');
        my_clock(clock_div);
    • 效果展示
    • Chrome扩展编写入门基础 - 网易杭州QA - 网易杭州 QA Team
       

推荐资料:

https://developer.chrome.com/extension/getstarted


  评论这张
 
阅读(135)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017