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,在其中放入下面几句:
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->{
"format_version":1,
"id":"AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA2",
"version":"0.2",
"name":"CustomNewTab",
"description":"Customizeyournewtabpage.",
"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,也就是会作为工具栏按钮显示,并且指定了工具栏按钮图标。
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><divid="button"onclick="window.open('dashboard.html')"class="toolstrip-button">
<imgid="icon"src="ui/icon.png"/>
</div>
再来看其中的JavaScript代码,settings数组中保存了新标签页中应该显示区域的默认设置。
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->varsettings={
"displayAnotherPageInstead":"0",
"pageToDisplayURL":"",
"hideMostVisited":"false",
"hideSearches":"false",
"hideRecentBookmarks":"false",
"hideRecentlyClosedTabs":"false"
};
这里为Chrome的connect事件注册了一个监听器,当扩展加载进来时会首先触发此事件,并且会在一个端口中进行监听,于是这里为此端口注册了一个监听器来监听可能到来的消息。
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->
chrome.self.onConnect.addListener(handleConnect);//加入一个监听器
functionhandleConnect(port)
{
console.log("Handlingconnect");
myport=port;
myport.onMessage.addListener(handleMessage);
console.log("Donehandlingconnect");
}
在端口的事件处理函数中,首先确认消息类型是否是getsettings,若是,则使用Ajax技术读取扩展根目录下的config.xml配置文件,并返回给请求者。
3)再来看页面content加载时加载进来的Javascript文件CustomNewTab.js。
它使用一个端口连接到扩展,在此端口上注册一个监听器来处理从扩展发送过来的消息,在初始化时它会利用此端口向扩展发送一个消息去通知扩展读取本地的配置文件。
扩展发送过来的就是读取到的配置信息,然后使用这些配置信息来对新标签页进行区域显示的设置。
对新标签页面的显示区域处理就非常简单了,就是DOM进行处理即可
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->functioncustomizeNewTab(settings)
{
if(document.body==null)
{//页面还未加载完毕
console.debug("CS:Cannotcustomize,nobody");
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:AddingIFrame");
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
分享到:
相关推荐
chrome扩展插件获取ajax请求记录
基于Chrome浏览器扩展的图书采访插件开发
一款基于Chrome扩展实现的基金定投助手
Chrome是Google公司基于WebKit开发的一款浏览器1,但从某种角度上来说它已经超越了浏览器成为了一个平台甚至是一个操作系统。Chrome继承了WebKit内核对HTML的高速渲染,同时Google自行开发的V8引擎使得JavaScript在...
pcr计算器用于【兰德索尔图书馆】的公主连结R刷图规划工具,使用Chrome扩展开发安装辣鸡Google开发者注册账户要5美元, :old_man:现在不知道怎么办了在Chrome应用商店中安装,终于过审啦,再也不用被取代开发者模式的...
一个超棒的基于React&TypeScript&webpack的chrome扩展开发模板 :sparkles:特性 :fire:支持修改content scripts代码自动重载扩展和刷新注入了content scripts的页面,再也不用修改了content scripts后手动刷新...
Surfingkeys :另一个Chrome扩展,提供了基于键盘的导航和Web控制。
本插件是基于谷歌浏览器的,方便打开页面过多进行页面切换、多屏幕切换
本扩展会在每天早上8点到下午17点之间,实时抓取您所填写的基金信息。鼠标移动至对应的基金代码和最新价格,会显示该基金的中文名称和最后一次获取实时数据的时间。若您在扩展非运行抓取时间内,需要获取最新的数据...
chrom扩展应用开发,Chrome是Google公司基于WebKit开发的一款浏览器1 , 但从某种角度上来说它已经超越了浏览器成为了一个平台甚至 是一个操作系统。 Chrome继承了WebKit内核对HTML的高速渲染, 同时Google自行开发的...
vtemp-chrome-extension一个... 用于快速创建Chrome扩展程序的vue-cli模板。 基于模板。 开发模式下的自动实时刷新支持。 支持crx包。利用npm install -g vue-clivue init kinglisky/vtemp-chrome-extension my-proj
基于快照的chrome扩展管理器用其他语言阅读:产品特点易于启用/禁用扩展直接访问任何扩展程序的选项页面一键启用/禁用所有扩展快照管理创建:将chrome当前扩展程序的状态捕获为快照,还原点应用:选择一个快照,将...
这个扩展是为个人使用而开发的,并在 Ubuntu 20.04 LTS 和 Chrome 浏览器上进行了测试。 我还将“Chromium”和“Brave”浏览器添加到书签搜索列表中,但不幸的是,我没有时间支持和测试所有浏览器和 Linux 发行版...
自动化AutoMoe-MCC自动化,Chrome扩展。 基于JQuery的网络蜘蛛。 将需要修改您的用户代理字符串以及阻止mcc的代理检查器。安装最新源从下载zip,将其解压缩到您的桌面。 [DESKTOP]将引用您的桌面目录转到Chrome并...
·Chrome提供了浏览器扩展框架,可以制作与Adobe-AIR类似的混合应用。 ·包含V8 Javascript虚拟机,这个多线程的虚拟机可以加速Javascript的执行。 ·具备隐私模式,可以让用户无需在本地机器上登录即可使用,...
该链接可在任何基于Chrome的浏览器上使用。 如果尚未执行此操作,请切换“开发人员模式” 。 这通常是扩展页面右上方的切换按钮。 单击加载未打包的扩展名按钮。 在弹出的窗口中,选择包含此最小扩展名的文件夹...
拥有chrome扩展开发知识是很好的 nodeJS >= 8.9.0 npm >= 5.2.0 (支持npx ) Chrome >= 55 该项目是在macOS上开发的,因此在基于Linux的系统上应该可以正常工作。 您可能会遇到在Windows上进行开发的问题,因为...
bigquery-json-extension是chrome扩展程序,它添加了模拟函数,用于基于正则表达式的json字符串属性的解析。 安装 克隆存储库 在chrome中,请访问: chrome://extensions/ 检查“开发人员模式” 单击“加载解压缩...
ScreenLook基于chrome extension开发的录屏插件notebackground.js 91 getUserMedia报错NotAllowedchrome的bug需要在detect.js中进行操作在非https或localhost页面中调用mediaDevices.getUserMedia会undefined扩展在...
Chrome 34.0.1847.137 更新内容: 1、Flash Player更新到13.0.0.214版本 2、3个安全补丁和一些BUG的修复 基于更强大的JavaScript V8引擎极强高效超快的浏览器,谷歌...Chrome扩展安全浏览服务 可防主页被篡改