基于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,如需转载请自行联系原作者

目录
相关文章
|
6月前
|
Web App开发 JavaScript 前端开发
使用vue快速开发一个带弹窗的Chrome插件
使用vue快速开发一个带弹窗的Chrome插件
236 0
使用vue快速开发一个带弹窗的Chrome插件
|
6月前
|
Web App开发 人工智能 自然语言处理
谷歌公布 2023 年最受欢迎Chrome扩展
谷歌公布 2023 年最受欢迎Chrome扩展
|
6月前
|
Web App开发 JavaScript 前端开发
chrome调试秘籍,让你的开发速度飞起来
chrome调试秘籍,让你的开发速度飞起来
|
21天前
|
Web App开发 Windows
win 快捷键大全,虚拟窗口、桌面等操作细节,可以使界面整洁,分类工作;Chrome快捷键,都是一些开发的骚操作
这篇文章提供了Windows操作系统和Chrome浏览器的快捷键大全,以及Xshell的快捷键操作,旨在帮助用户提高工作效率和界面管理。
93 2
|
21天前
|
Web App开发 JSON JavaScript
vue学习:chrome 中 vuetools 开发插件 的下载、安装
这篇文章介绍了如何在Chrome浏览器中下载、安装并测试Vue.js开发插件——vue-devtools。
130 0
vue学习:chrome 中 vuetools 开发插件 的下载、安装
|
3月前
|
Web App开发 存储 前端开发
《Chrome谷歌插件Top10》开发最好用的谷歌插件
本文介绍了多个实用的浏览器插件及其安装方法。包括CSDN浏览器助手,提供高效开发工具;FeHelper,前端必备工具,支持格式化、压缩等功能;uBlock Origin,有效屏蔽广告和弹窗;PageLiner,网页标尺工具,便于前端设计;Fatkun,批量下载图片;Smallpdf,文件转换工具;Octotree,GitHub代码树插件;Awesome Screenshot,截图与录屏工具;ColorZilla,颜色拾取器;Dark Reader,暗黑模式阅读插件。安装方式有通过Chrome商店搜索或下载crx插件本地安装。
62 11
|
3月前
|
Web App开发 JSON 安全
【跨域难题终结者】:一键解锁Chrome浏览器神秘设置,彻底告别开发阶段的跨域烦恼!
【8月更文挑战第20天】跨域是前端开发常遇难题,尤其在前后端分离项目中。浏览器因安全考量会阻止不同源间的请求。本文对比CORS、JSONP、代理服务器等解法,并介绍开发阶段通过调整Chrome设置来临时禁用跨域限制的方法,提供启动Chrome及使用`fetch`API示例,适合快速测试。但请注意这不适用于生产环境,存在一定安全风险。
614 1
|
3月前
|
Web App开发 前端开发 JavaScript
手摸手教你,从0到1开发一个Chrome浏览器插件
开发 Chrome 插件既有趣又具成就感。本教程将引导你从零开始,逐步创建一个简单的 Chrome 插件。首先了解 Chrome 插件是可增强浏览器功能的小程序。以一个基础示例开始,你将学习如何设置开发环境,包括安装 Chrome 和准备文本编辑器,并掌握 HTML、CSS 和 JavaScript 的基础知识。接着,我们将构建插件的基本结构,涉及 `manifest.json` 配置文件、`background.js` 后台脚本、`popup.html` 用户界面以及 `style.css` 样式表。
293 8
|
4月前
|
Web App开发 前端开发 Java
通过设置 Chrome 解决开发调用跨域问题
通过设置 Chrome 解决开发调用跨域问题
1118 7
|
5月前
|
存储 Web App开发 JSON
【Chrome插件】如何在Chrome插件开发中处理复杂数据结构的存储?
在Chrome插件开发中,遇到问题:存储包含Map和数组的复杂数据结构到`chrome.storage.local`时,读取为空。原因在于`chrome.storage.local`只支持JSON序列化,而Map无法直接序列化。解决方案是使用`serializeMap`和`deserializeMap`方法将Map转换为数组进行存储和读取。更新的`saveMindData`和`getMindData`方法实现了数据的正确序列化和反序列化。
117 5