Merge pull request #1 from LEODPEN/feature/20210519/sch-url

Feature/20210519/sch url

README.md

@@ -1,26 +1,28 @@
-# Where-is-my-tab
-
-[![GitHub license](https://img.shields.io/github/license/LEODPEN/Where-is-my-tab)](https://github.com/LEODPEN/Where-is-my-tab/blob/main/LICENSE) 
-[![Version](https://img.shields.io/badge/version-1.2-orange)](https://github.com/LEODPEN/Where-is-my-tab/)
-
----
 
 <p align = "center">
 
 <img src="https://z3.ax1x.com/2021/05/17/g2EMt0.png" width="256" />
 
 </p>
 
+<h1 align="center">Where is my tab ?</h1>
+
+<div align = "center">
 
 Search for tabs in the opened window, may can also search for bookmarks and history in future versions.
 
-### About
+<a href = "https://github.com/LEODPEN/Where-is-my-tab/"> <img src="https://img.shields.io/badge/version-1.2-orange"> </a>
+<a href = "https://chrome.google.com/webstore/detail/where-is-my-tab/abccjdbmfpgocjjmebdjogoophngecfe?hl=zh-CN&authuser=0" > <img src="https://img.shields.io/badge/platform-chrome-red"> </a>
+<a href = "https://github.com/LEODPEN/Where-is-my-tab/blob/main/LICENSE"> <img src="https://img.shields.io/github/license/LEODPEN/Where-is-my-tab"> </a>
+</div>
+
+## About
 
 学习及工作中常常遇到浏览器里面打开的tab页过多，窗口也多，总感觉或确定之前打开过某个tab页，但是不知道它在哪里了，于是有时不得不重新开一个tab页，“雪球越滚越大”。
 
 本插件提供关键词查找功能，点击结果即可跳转到相应tab页；此外，还提供tab回退，助力大家使用浏览器的速度起飞；
 
-### Getting Plug-in
+## Getting Plug-in
 
 1. [谷歌应用商店](https://chrome.google.com/webstore/detail/where-is-my-tab/abccjdbmfpgocjjmebdjogoophngecfe?hl=zh-CN&authuser=0)添加即可（添加后记得固定下，方便点击）；
 
@@ -32,15 +34,15 @@ Search for tabs in the opened window, may can also search for bookmarks and hist
 
 3. Edge商店搜索同名插件（阉割版，因为其`manifest_version`只支持到2 ~~懒，不想兼容~~）；
 
-#### Features
+## Features
 
 + 分窗口tab名展示与关键词查找；
 
 + 点击搜索结果跳转对应tab页；
 
 + 分窗口tab页回退（一个窗口最多支持10次回退）；
 
-#### Usage
+## Usage
 
 + 搜索与跳转
     + 搜索
@@ -57,7 +59,7 @@ Search for tabs in the opened window, may can also search for bookmarks and hist
 
 > 注意：一个窗口只支持10个回退，多于10次则会丢弃更早的记录；
 
-### Others
+## Others
 
 + Windows下将(Command键替换为Ctrl即可)；
 

assets/popup.js

@@ -25,24 +25,22 @@ function initDisplay() {
 }
 
 function judgeGo(){
-  var word = $("#keyword").val().trim();
-  if(word == "" && $("#keyword").hasClass("wait")){
+    var word = $("#keyword").val().trim();
+    if(word == "" && $("#keyword").hasClass("wait")){
       alert("Please enter keywords first.");
       return;
     }
     initDisplay();
+    if(word == "") {
+      return;
+    }
     goSearching(word.toUpperCase());
   }
 
+// no btn needed
 function goSearching(word) {
-    let changeColor = document.getElementById("seach-tabs");
-
-    // 一旦变绿直接变绿 8D /xs
-    changeColor.style.backgroundColor = "lightgreen";
-
     queryTabs(word);
 }
-  document.getElementById("seach-tabs").addEventListener("click", judgeGo);
 
   document.onkeydown=keyListener;
 
@@ -64,14 +62,20 @@ function goSearching(word) {
   function queryTabs(keywords) {
     let tabs = [];
     traverseTabsOfCurWindow(function (tab) {
-      if (tab.title.toUpperCase().indexOf(keywords) != -1) {
+      if ((tab.title && tab.title.toUpperCase().indexOf(keywords) != -1)
+        || (tab.url && tab.url.toUpperCase().indexOf(keywords) != -1)
+        || (tab.pendingUrl && tab.pendingUrl.toUpperCase().indexOf(keywords) != -1)) {
         tabs.push(tab);
       }
     }, function () {
-      $(".container").append('<div class="tab-result">Results in tabs:</div>');
+      $(".container").append('<div class="tab-result"> \n </div>');
       for (let j in tabs) {
         let tab = tabs[j];
-        $('.tab-result').append('<p id = "' + tab.id + '"' + '>' + tab.title + '</p>');
+        $('.tab-result').append('<div class = "res-card" id = "' + tab.id + '"' + '></div>');
+        $("#" + tab.id).append('<div class = "t" >' + tab.title + '</div>');
+        $("#" + tab.id).append('<div class = "url" >' + tab.url + '</div>');
+        // $('.tab-result').append('<div class = "res-card" id = "' + tab.id + '"' + '>' + tab.title + '</div>');
+
         jump2Tab(tab.id);
       }
     });

assets/srch-res.css

@@ -1,8 +1,61 @@
-button {
-    height: 30px;
-    width: 30px;
-    outline: none;
-    margin: 10px;
-    border: ridge;
-    border-radius: 4px;
-  }
+body{
+	background-color:#D3D3D3;
+  background-image:url('../where.png');
+  background-repeat:no-repeat;
+  background-size: 1024px 1024
+}
+.head {
+  font-size: 26px;
+  font-weight: 777;
+  font-family: "Times New Roman";
+}
+
+input{
+  outline-style: none;
+  border: 1px solid #ccc; 
+  border-radius: 3px;
+  padding: 13px 14px;
+  width: 200px;
+  font-size: 16px;
+  font-weight: 666;
+  font-family: "Microsoft soft";
+}
+
+input:focus{
+  border-color: #66afe9;
+  outline: 0;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
+}
+
+.res-card {
+  position: center;
+  overflow: hidden;
+  margin-top: 7px;
+  margin-bottom: 7px;
+  width: auto;
+  max-width: 288px;
+  height: auto;
+  max-height: 80px;
+  background-color: 	#FFA07A;
+  content-visibility: auto;
+}
+
+.t {
+  width: 202px;
+  word-break:break-all;
+  word-wrap:break-word;
+  font-size: 12px;
+  font-weight: 555;
+  font-family: "Microsoft soft";
+  margin-bottom: 5px;
+}
+
+.url {
+  width: 202px;
+  word-break:break-all;
+  word-wrap:break-word;
+  font-size: 4px;
+  font-weight: 22;
+  font-family: "Times New Roman";
+}

manifest.json

@@ -1,7 +1,7 @@
 {
     "name": "Where is my tab ?",
-    "description": "Search for tabs in the opened window, may can also search for bookmarks and history in future versions.",
-    "version": "1.2",
+    "description": "Search for tabs in the opened window, can also increase your speed of switching tabs.",
+    "version": "1.3",
     "manifest_version": 3,
     "permissions": [
         "tabs","commands","windows"

srch-res.html

@@ -6,11 +6,12 @@
   <script src="assets/jquery-1.12.4.js"></script>
 </head>
 <body>
-  <h1 align="center">Where is my tab ?</h1>
-  <div align="center"> 
-    <input type="text" id = "keyword"/><input type="button" id="seach-tabs" value="GO!"/>
+  <div class = "head" align="center">Where is my tab ?</div>
+  <div align="center">
+    <input type="text" id = "keyword"/>
+    <!-- <input type="button" id="seach-tabs" value="GO!"/> -->
   </div> 
- <div class="container">
+ <div class="container" align="center">
      <!-- <div class="tab-result">Results in tabs:</div>
      <div class="bookmarks-result"></div>
      <div class="history-result"></div> -->