开发者社区> 嗯哼9925> 正文

基于Chrome的扩展开发(二)

简介:
+关注继续查看
Chrome启动时默认的效果如下图所示,有”most visited”,”Searches”,”Recent bookmarks”,”recently closed”这几个区域,但每次打开标签都是这样的页面,相信让很多人都感到烦躁。



本文要介绍的扩展名为Custom New Tab,可以从这里直接下载安装包:Custom New tab。这个扩展实现的功能是让用户可以对标签页打开后的显示效果进行自定义,实现的具体功能如下:

1、隐藏/显示最热门网页略缩图

2、隐藏/显示新标签页上的搜索栏

3、隐藏/显示最近的书签

4、隐藏/显示最近关闭的标签

5、将新标签页重定向到任意页面

6、在新标签页中嵌入任意页面

具体效果如下面两图所示:





    好了,现在来看看这个扩展究竟是如何实现的,首先需要进行准备工作,你需要使用Chrome 2.0.180.0或更新版本

      1)首先创建一个文件夹,例如c:/ myextension,在这个目录下创建一个文本文件,命名为manifest.json,在其中放入下面几句:
复制代码
{
  "format_version": 1,
  "id": "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA2",
  "version": "0.2",
  "name": "CustomNewTab",
  "description": "Customize your new tab page.",
  "toolstrips": [
    "CustomNewTab_toolstrip.html"
  ],
  "content_scripts": [
    {
      "js": ["CustomNewTab.js"], 
      "matches": ["chrome://newtab/*"],
      "run_at": "document_start"
    }
  ]
}
复制代码
 
其中各个参数含义如下:

format_version(必需的):向Chrome指明扩展所使用的清单格式版本。目前只有一个格式版本,因此设为1.

id(必需的):扩展的ID号(唯一的)。

version(必需的):扩展的版本号。可以使用任意点分格式的数字串

name(必需的):扩展的名称。

description(可选的):扩展的描述信息

toolstrips: 在此指定的页面将加入到Chrome工具栏

content_scripts: 此处指定的内容在Chrome的content中加载,这里指定了加载的js文件,以及待匹配的url模式,运行的时刻应该是文档打开时。

 
2)先来看要加入工具栏的页面CustomNewTab_toolstrip.html,它只有一个div,指明类型是toolstrip-button,也就是会作为工具栏按钮显示,并且指定了工具栏按钮图标。
 
<div id="button"  onclick="window.open('dashboard.html')" class="toolstrip-button">
  <img id="icon" src="ui/icon.png" />
</div>
 
再来看其中的JavaScript代码,settings数组中保存了新标签页中应该显示区域的默认设置。

复制代码
var settings =    {
                    "displayAnotherPageInstead": "0",
                    "pageToDisplayURL" : "",
                    "hideMostVisited": "false",
                    "hideSearches" : "false",
                    "hideRecentBookmarks" : "false",
                    "hideRecentlyClosedTabs" : "false"
                };
复制代码
这里为Chrome的connect事件注册了一个监听器,当扩展加载进来时会首先触发此事件,并且会在一个端口中进行监听,于是这里为此端口注册了一个监听器来监听可能到来的消息。

复制代码
chrome.self.onConnect.addListener(handleConnect);// 加入一个监听器
function handleConnect(port) 
{

    console.log("Handling connect");
    myport = port;
    myport.onMessage.addListener(handleMessage);
    console.log("Done handling connect");
}
复制代码
在端口的事件处理函数中,首先确认消息类型是否是getsettings,若是,则使用Ajax技术读取扩展根目录下的config.xml配置文件,并返回给请求者。

复制代码
function handleMessage(message)
{
    console.log("Handling message");
    
    if(message != "getsettings")
    {
        console.error("Not getsettings");
        return;
    }
        
    req = new XMLHttpRequest();
    req.onload = loadconfig;
    
    console.log("Getting settings");
    //从config.xml文件中读取配置信息
    req.open("GET",
             "config.xml",
             false);
    req.send(null);
    console.log("Done handling message");
}
function loadconfig()
{//加载配置信息
    if( this.readyState == 4 ) 
    {
        console.log("Loading config");
        var xmlDoc = req.responseXML;
        bindSettings(xmlDoc);
        console.log("Done loading config");
        console.log("Sending settings");
        console.log(settings);
        myport.postMessage(settings);//向请求者应答提交配置信息
        console.log("Done sending settings");
    }
}
复制代码
3)再来看页面content加载时加载进来的Javascript文件CustomNewTab.js。

它使用一个端口连接到扩展,在此端口上注册一个监听器来处理从扩展发送过来的消息,在初始化时它会利用此端口向扩展发送一个消息去通知扩展读取本地的配置文件。

复制代码
function init()
 {
    var theBody = document.body;
    
    if(theBody == null)
    {//页面还未加载完毕
        console.debug("CS: Body not loaded yet");
        if(currentWait < maxWaitTime)
        {
            currentWait++;
            window.setTimeout(init,1);
        } 
        else 
        {
            currentWait=0;//重新归零
        }
        return;
    }
    console.debug("CS: Hiding body");
    theBody.style.display = "none";
    console.debug("CS: Sending message");
    myport.postMessage("getsettings");//请求配置信息
    console.debug("CS: Done sending message");
}
复制代码
扩展发送过来的就是读取到的配置信息,然后使用这些配置信息来对新标签页进行区域显示的设置。

复制代码
var myport = chrome.extension.connect();
myport.onMessage.addListener(handleMessage);//加入监听者
function handleMessage(settings) 
{
    
    console.debug("CS: Handling received settings");
    console.debug(settings);
    
    console.debug("CS: Start customizing");
    console.debug(settings);
    customizeNewTab(settings);//使用读取到的配置信息设置页面
    console.debug("CS: Done customizing");
    
    if(settings["displayAnotherPageInstead"] != "1")
    {
        showBody();
    }
    
    console.debug("CS: Done handling received settings");
}
复制代码
对新标签页面的显示区域处理就非常简单了,就是DOM进行处理即可


复制代码
function customizeNewTab(settings) 
{
    
    if(document.body == null)
    {//页面还未加载完毕
        console.debug("CS: Cannot customize, no body");
        window.setTimeout(customizeNewTab,1,settings);
        return;
    }
    
    if(settings['displayAnotherPageInstead']=="1")
    {//重定向到指定页面,比如www.google.com
        console.debug("CS: Redirecting");
        window.location = settings['pageToDisplayURL'];
        return;
    }
    if(settings['displayAnotherPageInstead']=="2")
    {//把新打开的页面作为一个frame加入
        console.debug("CS: Adding IFrame");
        addPageIFrame(settings['pageToDisplayURL']);
    }

    if(settings['hideMostVisited'] == "true")
        hideDiv("mostvisitedsection");
    if(settings['hideSearches'] == "true")
        hideDiv("searches");
    if(settings['hideRecentBookmarks'] == "true")
        hideDiv("recentlyBookmarked");
    if(settings['hideRecentlyClosedTabs'] == "true")
        hideDiv("recentlyClosedTabs");
        
}  
复制代码
4)此扩展还提供了一个图形化的配置页面,但实际意义不大,因为它只是产生配置文件信息,最终还是需要手工去修改扩展根目录下的config.xml文件,仍然需要进一步改进
 

5)最后,将上述文件打包为Crx安装包,请参考本系列的上一篇文章《基于Chrome的扩展开发(一)》,

      6)输入下列URL:chrome://extensions/,将会列出所有已经安装的扩展,同时还会显示扩展系统启动时发生的错误信息。



 

7)google官方还放出了两个扩展示例,但是由于官网http://dev.chromium.org/好像被wall掉了,所以无法得到那两个示例来研究。

 

参考资料

1,Chrome实用扩展推荐:自定义新标签页

2,Chrome Extension HOWTO


本文转自Phinecos(洞庭散人)博客园博客,原文链接:http://www.cnblogs.com/phinecos/archive/2009/05/18/1459529.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
一个用于 Angular 开发的 Chrome 扩展 - Angular Dev Tools
一个用于 Angular 开发的 Chrome 扩展 - Angular Dev Tools
16 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
9806 0
Chrome开发者工具的小技巧
Chrome的开发者工具是个很强大的东西,相信程序员们都不会陌生,不过有些小功能可能并不为大众所知,所以,写下这篇文章罗列一下可能你所不知道的功能,有的功能可能会比较实用,有的则不一定,也欢迎大家补充交流。
1715 0
过滤分享的Chrome扩展开发详解
明确需求 扩展的功能在前文《眼不见为净——过滤人人网分享的chrome扩展》中已做了介绍:把人人网中一些带有“不分享就如何如何”等诅咒信息的标题给屏蔽掉,眼不见为净!描述得更详细些就是: 过滤功能只在人人网域名(http://*.renren.com/*)下启用; 只有访问人人网时,扩展的图标才显示; 好友的分享信息会出现在很多地方(如好友主页、新鲜事、分享主页等),这些都要过滤;
1240 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
20509 0
chrome开发者工具网络请求过滤
chrome开发者工具,会列出所有的网络请求,网络请求太多的时候,如何准确过滤出我们需要的网路请求呢?
31 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
18791 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
25131 0
+关注
4716
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载