From 0a67271feb8a654c58c02e9e5852006a0d8d846e Mon Sep 17 00:00:00 2001 From: Zaif Senpai Date: Thu, 8 May 2025 17:59:07 +0500 Subject: [PATCH] Replaced clearbit API (deprecated) (#1453) (#1456) * Replaced clearbit API (deprecated) with Google's favicon snatcher * Updated UI designs for optional_permissions examples of both mv2 and mv3 Using chrome's build in favicon provider for optional_permissions examples * Run linter --------- Co-authored-by: Oliver Dunk --- .../extensions/optional_permissions/logic.js | 11 +-- .../optional_permissions/manifest.json | 2 +- .../extensions/optional_permissions/style.css | 68 +++++++++++++------ .../sample.optional_permissions/manifest.json | 2 +- .../sample.optional_permissions/newtab.js | 14 ++-- .../sample.optional_permissions/style.css | 68 +++++++++++++------ 6 files changed, 117 insertions(+), 48 deletions(-) diff --git a/_archive/mv2/extensions/optional_permissions/logic.js b/_archive/mv2/extensions/optional_permissions/logic.js index 9c2b994e..8ab0141f 100644 --- a/_archive/mv2/extensions/optional_permissions/logic.js +++ b/_archive/mv2/extensions/optional_permissions/logic.js @@ -20,16 +20,19 @@ function createTop(){chrome.topSites.get(function(topSites) { topSites.forEach(function(site) { let div = document.createElement('div'); div.className = 'colorFun'; - let tooltip = document.createElement('span'); + let tooltip = document.createElement('a'); + tooltip.href = site.url; tooltip.innerText = site.title; tooltip.className = 'tooltip'; let url = document.createElement('a'); url.href = site.url; - let hostname = (new URL(site.url)).hostname; + let imageContainer = document.createElement('div'); + imageContainer.className = 'imageContainer'; let image = document.createElement('img'); image.title = site.title; - image.src = 'https://logo.clearbit.com/' + hostname; - url.appendChild(image); + image.src = 'chrome://favicon/' + site.url; + imageContainer.appendChild(image); + url.appendChild(imageContainer); div.appendChild(url); div.appendChild(tooltip); sites_div.appendChild(div); diff --git a/_archive/mv2/extensions/optional_permissions/manifest.json b/_archive/mv2/extensions/optional_permissions/manifest.json index ac62ef2d..ba3d0eb9 100644 --- a/_archive/mv2/extensions/optional_permissions/manifest.json +++ b/_archive/mv2/extensions/optional_permissions/manifest.json @@ -2,7 +2,7 @@ "name": "Optional Permissions New Tab", "version": "1.2.5.0", "description": "Demonstrates optional permissions in extensions", - "permissions": ["storage"], + "permissions": ["storage", "chrome://favicon/*"], "optional_permissions": [ "topSites" ], diff --git a/_archive/mv2/extensions/optional_permissions/style.css b/_archive/mv2/extensions/optional_permissions/style.css index 2c948741..a9482600 100644 --- a/_archive/mv2/extensions/optional_permissions/style.css +++ b/_archive/mv2/extensions/optional_permissions/style.css @@ -8,6 +8,7 @@ h1 { #display_top { margin: auto; + margin-bottom: 40px; width: 600px; } @@ -18,6 +19,11 @@ h1 { display: flex; align-items: center; justify-content: center; + + animation-name: color-extravaganza; + animation-duration: 6s; + animation-iteration-count: infinite; + animation-direction: alternate; } .center { @@ -36,41 +42,41 @@ h1 { .colorFun { position: relative; - height: 100px; + height: 70px; width: 100px; padding: 10px; display: inline-block; - margin-top: 60px; + margin-top: 40px; } .colorFun .tooltip { - visibility: hidden; - width: 120px; - color: #fff; + width: 100px; text-align: center; padding: 5px 0; - border-radius: 6px; position: absolute; z-index: 1; bottom: 0%; left: 50%; - margin-left: -60px; - opacity: 0; - transition: opacity 0.3s; + transform: translateX(-50%); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } - -#todo_div, .colorFun:hover .tooltip { - visibility: visible; - opacity: 1; - animation-name: color-extravaganza; - animation-duration: 6s; - animation-iteration-count: infinite; - animation-direction: alternate; +.imageContainer { + background-color: #cdcdcd; + width: 50px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + justify-self: center; } -img { - width: 100px; +.imageContainer img { + width: 14px; + height: 14px; } footer { @@ -78,3 +84,27 @@ footer { bottom: 20px; left: 20px; } + +input#todo_value { + width: 300px; + height: 40px; + font-size: 18px; + padding: 12px 20px; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; + margin-right: 4px; +} + +input#todo_value ~ input[type="submit"] { + background-color: #4285F4; + color: white; + padding: 12px 20px; + border: none; + border-radius: 4px; + cursor: pointer; +} + +input#todo_value ~ input[type="submit"]:hover { + background-color: #45a049; +} diff --git a/functional-samples/sample.optional_permissions/manifest.json b/functional-samples/sample.optional_permissions/manifest.json index 8d3f7f8e..252ed7f9 100644 --- a/functional-samples/sample.optional_permissions/manifest.json +++ b/functional-samples/sample.optional_permissions/manifest.json @@ -2,7 +2,7 @@ "name": "Optional Permissions New Tab", "version": "1.0.0", "description": "Demonstrates optional permissions in extensions", - "permissions": ["storage"], + "permissions": ["storage", "favicon"], "optional_permissions": ["topSites"], "icons": { "16": "images/icon16.png", diff --git a/functional-samples/sample.optional_permissions/newtab.js b/functional-samples/sample.optional_permissions/newtab.js index 188477d5..9620746c 100644 --- a/functional-samples/sample.optional_permissions/newtab.js +++ b/functional-samples/sample.optional_permissions/newtab.js @@ -28,16 +28,22 @@ const createTop = () => { topSites.forEach((site) => { const div = document.createElement('div'); div.className = 'colorFun'; - const tooltip = document.createElement('span'); + const tooltip = document.createElement('a'); + tooltip.href = site.url; tooltip.innerText = site.title; tooltip.className = 'tooltip'; const url = document.createElement('a'); url.href = site.url; - const hostname = new URL(site.url).hostname; + const imageContainer = document.createElement('div'); + imageContainer.className = 'imageContainer'; + const imgUrl = new URL(chrome.runtime.getURL('/_favicon/')); + imgUrl.searchParams.set('pageUrl', site.url); + imgUrl.searchParams.set('size', '28'); const image = document.createElement('img'); image.title = site.title; - image.src = 'https://logo.clearbit.com/' + hostname; - url.appendChild(image); + image.src = imgUrl.toString(); + imageContainer.appendChild(image); + url.appendChild(imageContainer); div.appendChild(url); div.appendChild(tooltip); sites_div.appendChild(div); diff --git a/functional-samples/sample.optional_permissions/style.css b/functional-samples/sample.optional_permissions/style.css index 92ea74e7..511ee759 100644 --- a/functional-samples/sample.optional_permissions/style.css +++ b/functional-samples/sample.optional_permissions/style.css @@ -18,6 +18,7 @@ h1 { #display_top { margin: auto; + margin-bottom: 40px; width: 600px; } @@ -28,6 +29,11 @@ h1 { display: flex; align-items: center; justify-content: center; + + animation-name: color-extravaganza; + animation-duration: 6s; + animation-iteration-count: infinite; + animation-direction: alternate; } .center { @@ -56,41 +62,41 @@ h1 { .colorFun { position: relative; - height: 100px; + height: 70px; width: 100px; padding: 10px; display: inline-block; - margin-top: 60px; + margin-top: 40px; } .colorFun .tooltip { - visibility: hidden; - width: 120px; - color: #fff; + width: 100px; text-align: center; padding: 5px 0; - border-radius: 6px; position: absolute; z-index: 1; bottom: 0%; left: 50%; - margin-left: -60px; - opacity: 0; - transition: opacity 0.3s; + transform: translateX(-50%); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } -#todo_div, -.colorFun:hover .tooltip { - visibility: visible; - opacity: 1; - animation-name: color-extravaganza; - animation-duration: 6s; - animation-iteration-count: infinite; - animation-direction: alternate; +.imageContainer { + background-color: #cdcdcd; + width: 50px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + justify-self: center; } -img { - width: 100px; +.imageContainer img { + width: 28px; + height: 28px; } footer { @@ -98,3 +104,27 @@ footer { bottom: 20px; left: 20px; } + +input#todo_value { + width: 300px; + height: 40px; + font-size: 18px; + padding: 12px 20px; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; + margin-right: 4px; +} + +input#todo_value ~ input[type="submit"] { + background-color: #4285F4; + color: white; + padding: 12px 20px; + border: none; + border-radius: 4px; + cursor: pointer; +} + +input#todo_value ~ input[type="submit"]:hover { + background-color: #45a049; +}