✨ Support unsplash

tw93 · Sep 13, 2023 · 7ff89d4 · 7ff89d4
1 parent e3782ff
commit 7ff89d4
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 14 deletions.
diff --git a/bookmark/manifest.json b/bookmark/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Maple Bookmarks",
   "description": "Let you navigate smoothly while hiding the bookmark bar.",
-  "version": "1.9",
+  "version": "1.10",
   "action": {
     "default_popup": "popup.html"
   },

diff --git a/bookmark/manifest_firefox.json b/bookmark/manifest_firefox.json
@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Maple Bookmarks",
   "description": "Let you navigate smoothly while hiding the bookmark bar.",
-  "version": "1.9",
+  "version": "1.10",
   "action": {
     "default_popup": "popup.html"
   },
@@ -13,6 +13,11 @@
       }
     }
   },
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "[email protected]"
+    }
+  },
   "optional_host_permissions": ["*://*/*"],
   "permissions": ["bookmarks", "favicon"],
   "icons": {

diff --git a/bookmark/popup.js b/bookmark/popup.js
@@ -413,15 +413,28 @@ function createBookmarkItem(bookmarkNode, parent) {
   let linkTitle = createElement("p", "", bookmarkNode.title ? bookmarkNode.title : getTitleFromUrl(bookmarkNode.url));
   bookItem.appendChild(linkTitle);
 
+  let hideTimeout = null;
+
+  let mouseleaveHandler = function () {
+    // 在mouseleave事件中，设置一个延时，然后隐藏Notification
+    hideTimeout = setTimeout(() => {
+      Notification.hide();
+    }, 500);
+  };
+
   bookItem.addEventListener("mouseover", function () {
+    // 如果已经计划了隐藏通知的操作，取消它
+    if (hideTimeout) {
+      clearTimeout(hideTimeout);
+      hideTimeout = null;
+    }
+
     if (checkOverflow(linkTitle)) {
       Notification.show(bookmarkNode.title);
     }
   });
 
-  bookItem.addEventListener("mouseleave", function () {
-    Notification.hide();
-  });
+  bookItem.addEventListener("mouseleave", mouseleaveHandler);
 
   parent.appendChild(bookItem);
 }

diff --git a/newtab/manifest.json b/newtab/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Maple NewTab",
   "description": "Enhance your new tab experience with a comfortable and refreshing design.",
-  "version": "1.8",
+  "version": "1.9",
   "chrome_url_overrides": {
     "newtab": "newtab.html"
   },

diff --git a/newtab/newtab.html b/newtab/newtab.html
@@ -85,9 +85,10 @@
   <body>
     <div class="selector-container">
       <select id="bg-selector">
+        <option value="bing">必应图</option>
+        <option value="unsplash">Unsplash</option>
         <option value="blank">空白页</option>
         <option value="random">随机图</option>
-        <option value="bing">必应图</option>
       </select>
     </div>
     <a id="bg-description"></a>

diff --git a/newtab/newtab.js b/newtab/newtab.js
@@ -15,12 +15,14 @@ window.onload = function () {
       blank: "空白页",
       random: "随机图",
       bing: "必应图",
+      unsplash: "Unsplash",
     },
     en: {
       title: "New Tab",
       blank: "Blank",
       random: "Image",
       bing: "Bing",
+      unsplash: "Unsplash",
     },
   };
 
@@ -33,6 +35,7 @@ window.onload = function () {
   document.querySelector('#bg-selector option[value="blank"]').textContent = mapping.blank;
   document.querySelector('#bg-selector option[value="random"]').textContent = mapping.random;
   document.querySelector('#bg-selector option[value="bing"]').textContent = mapping.bing;
+  document.querySelector('#bg-selector option[value="unsplash"]').textContent = mapping.unsplash;
 
   // 根据浏览器类型和颜色模式设置背景色
   function setBackgroundColor() {
@@ -44,12 +47,16 @@ window.onload = function () {
   }
 
   function convertToLinkElement(data) {
-    bgDescription.textContent = `${data.title} · ${data.date}`;
-    bgDescription.href = "#";
-    bgDescription.onclick = function (e) {
-      e.preventDefault();
-      chrome.tabs.create({ url: data.url });
-    };
+    if (!title) {
+      bgDescription.textContent = "";
+    } else {
+      bgDescription.textContent = `${data.title} · ${data.date}`;
+      bgDescription.href = "#";
+      bgDescription.onclick = function (e) {
+        e.preventDefault();
+        chrome.tabs.create({ url: data.url });
+      };
+    }
   }
 
   // 随机设置背景图片
@@ -104,6 +111,24 @@ window.onload = function () {
       });
   }
 
+  function setUnsplashBackgroundImage() {
+    const apiBaseUrl = "https://ai.xrender.fun/photos/3200/1800";
+
+    fetch(apiBaseUrl)
+      .then((r) => {
+        const imageUrl = r.url.replace("https://fastly.picsum.photos", "https://ai.xrender.fun/picsum");
+        body.style.backgroundImage = `url(${imageUrl})`;
+        localStorage.setItem("bgUnsplashUrl", imageUrl);
+        localStorage.setItem("bgUnsplashDate", new Date().toISOString().slice(0, 10));
+        localStorage.setItem("bgUnsplashInfo", {
+          title: "",
+        });
+      })
+      .catch((error) => {
+        console.error("Error:", error);
+      });
+  }
+
   /**
    * @description 处理选择非空白背景时的逻辑
    * @param type 选择的背景类型，random 或 bing
@@ -120,12 +145,16 @@ window.onload = function () {
 
     if (imageUrl && imageDate === currentDate) {
       body.style.backgroundImage = `url(${imageUrl})`;
-      convertToLinkElement(JSON.parse(imageInfo));
+      if (type !== "unsplash") {
+        convertToLinkElement(JSON.parse(imageInfo));
+      }
     } else {
       if (type === "random") {
         setRandomBackgroundImage();
       } else if (type === "bing") {
         setBingBackgroundImage();
+      } else if (type === "unsplash") {
+        setUnsplashBackgroundImage();
       }
     }
   }
@@ -144,6 +173,8 @@ window.onload = function () {
       handleSetBackground(bgType, "bgImageUrl", "bgImageDate", "bgImageInfo");
     } else if (bgType === "bing") {
       handleSetBackground(bgType, "bgBingUrl", "bgBingDate", "bgBingInfo");
+    } else if (bgType === "unsplash") {
+      handleSetBackground(bgType, "bgUnsplashUrl", "bgUnsplashDate", "bgUnsplashInfo");
     }
   }