首页 > 代码库 > chrome 新建标签时的缺省页如何DIY？

chrome 新建标签时的缺省页如何DIY？

2024-07-17 23:46:38   218人阅读

通过创建扩展程序的方式来解决这个问题。
至少要创建二个文件。
mainifest.json
w01.html (这个文件名是上面项目文件中指定的，可以自已设定。)


第一个文件内容如：
# 此我为写的注释，我不了解程序是否可以有注释。所以使用时去掉注释
-----------------------------
{
"name": "DIY page 20140817", #扩展程序名称
"description": "author: wide288",   #扩展描述
"version": "1.0", #扩展版本
"manifest_version": 2,
"chrome_url_overrides": {
    "newtab": "w01.html" } #指定的新建标签的显示内容
}


-----------------------------
没有写注释内容，不变。更多内容去找 chrome 相关资料吧。我没去找更多


参考：
http://bbs.kafan.cn/thread-1047032-1-1.html
http://bbs.kafan.cn/thread-1046868-1-1.html
http://blog.csdn.net/pangdingshan/article/details/7172803


w01.html内容：
---------------------------------
<body bgcolor="#6A5ACD" link="#ffffff" alink=rgb(255,77,41) vlink="#ffffff">


<font size="2" face="PF Tempesta Seven" color=rgb(255,77,41)>
go go internet machine.<br /><br />


<table border="0" width="100%" cellpadding="5">
<tr>


<td width="5%" valign="top">
<font size="2" face="Arial" color=rgb(34,181,246)>
?
<font size="1" face="PF Tempesta Seven" color=rgb(60,60,60)>
社交：
<p>
<img src=http://www.mamicode.com/"Line.png" alt="Wut" align="left" width="15" height="120" />
<a href=http://www.mamicode.com/"http://weibo.com/wide288" Style="Text-Decoration: None">新浪微博

<a href=http://www.mamicode.com/"http://www.facebook.com" Style="Text-Decoration: None">Facebook

<a href=http://www.mamicode.com/"http://blog.csdn.net/wide288" Style="Text-Decoration: None">csdn.blog

</p>
</td>


<td width="5%" valign="top">
<font size="2" face="Arial" color=rgb(34,181,246)>
?
<font size="1" face="PF Tempesta Seven" color=rgb(60,60,60)>
新闻：
<p>
<img src=http://www.mamicode.com/"Line.png" alt="Wut" align="left" width="15" height="100" />
<a href=http://www.mamicode.com/"http://" Style="Text-Decoration: None">link 1

<a href=http://www.mamicode.com/"http://" Style="Text-Decoration: None">link 2

<a href=http://www.mamicode.com/"http://" Style="Text-Decoration: None">link 3

</p>
</td>


<td width="20%" valign="top">
<font size="2" face="Arial" color=rgb(34,181,246)>
?
<font size="1" face="PF Tempesta Seven" color=rgb(60,60,60)>
论坛：
<p>
<img src=http://www.mamicode.com/"Line.png" alt="Wut" align="left" width="15" height="80" />
<a href=http://www.mamicode.com/"http://" Style="Text-Decoration: None">link 1

<a href=http://www.mamicode.com/"http://" Style="Text-Decoration: None">link 2

<a href=http://www.mamicode.com/"http://" Style="Text-Decoration: None">link 3

</p>
</td>


</tr>
</table>


</body>
-------------------------------------
建立好了此二个文件后。我们要通过 chrome 来打包扩展程序
把这二个文件所在目录打包成， *.crx 扩展程序
再安装此扩展程序到 chrome 中此可使用了。不用重启 chrome


点击chrome设置按钮－－工具－－扩展程序　点击右上角开发人员模式　点击打包扩展程序　选择你的文件夹
打包。
会在目录同级目录中生成二个文件
**.crx
**.pem
把 **.crx 文件拖入网页中。即可了


新建个标签就能看到效果了。


联系
我们