chrome浏览器Bing主页自定义

前言

　　在使用Bing主页的时候，无法将主页的新闻彻底隐藏，也无法更换背景图片（如下图）。这就很难受了，我只想要一个只有搜索框加背景图片的一个主页。在集百家之所长后，得到一个符合个人要求的主页。

主要文件

  1. manifest.json

    1 {
2    "chrome_url_overrides": {
3       "newtab": "tab.html"
4    },
5     "manifest_version": 3,
6    "name": "home_tab",
7    "version": "1.0.0"
8 }

  2.  tab.html，代码中有图片路径，请根据实际进行替换

     1 <html lang="en">
 2 <head>
 3     <meta charset="UTF-8">
 4 </head>
 5 <body>
 6 <style type="text/css">
 7     body{
 8         background-image:url(images/bg.png);
 9         background-repeat:no-repeat;
10         background-size:100% 100%;
11     }
12     #box{
13         width:520px;
14         position:relative;
15     }
16     input{
17         width:520px;
18         border:1px solid #e2e2e2;
19         outline:none;
20         border-radius:20px;
21         height:50px;
22         float:left;
23         padding:0 0 0 10px;
24         font-family:'Microsoft YaHei';
25         font-size:20px;
26         background-color:white;
27     }
28     #search{
29         border:0;
30         outline:none;
31         width:30px;
32         height:30px;
33         position:absolute;
34         top:10px;
35         right:15px;
36         background-image:url(images/search.svg);
37         background-repeat:no-repeat;
38         background-size:30px;
39         cursor:pointer;
40     }
41 </style>
42 <table width=100% height=100%>
43     <tr><td>
44     <center>
45             <form id="box" action="https://cn.bing.com/search" target="_self" method="get">
46                 <input id="inputSearch" type="text" name="q" placeholder="search..." autocomplete="off">
47                 <div id="search" value=""></div>
48             </form>
49     </center>
50     </td></tr>
51 </table>
52 </body>
53 <script src="func.js"></script>
54 </html>

     

  3. func.js 
     1 let subSearch = document.getElementById("search");
 2 subSearch.onclick = function() {
 3     var inputStr = document.getElementById("inputSearch").value;
 4     if(inputStr == null || inputStr == ""){
 5         console.log("input String is null.");
 6     }else{
 7         document.getElementById("box").submit();
 8     }
 9 }
10 
11 let enterSearch = document.getElementById("box");
12 enterSearch.onkeydown = function(){
13     if(event.keyCode == 13){
14         var inputStr = document.getElementById("inputSearch").value;
15         if(inputStr == null || inputStr == ""){
16             console.log("input String is null.");
17             return false;
18         }else{
19             document.getElementById("box").submit();
20             return true;
21         }
22     }
23     
24 }

     

主要步骤

  1. 在电脑中创建一个文件夹（如chrome-tab），将上面的manifest.json、tab.html、func.js三个文件放到该文件夹中(chrome-tab)，在该文件夹下创建images文件夹（用于存放图片资源），文件结构如下：

  2. 打开chrome浏览器，右上角打开设置，点击“拓展程序”，再点击“加载已解压的拓展程序”，找到刚刚创建的文件夹位置（chrome-tab），到这一步就结束了。效果如下图：

存在缺陷

　　该自定义主页没有设计“历史搜索快速填充”的功能。（无所谓，我用不到，就是没有缺陷！）

posted @ 2023-06-17 15:58  瑾明  阅读(1512)  评论(2)  编辑  收藏  举报