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 <oliverdunk@google.com>

_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);

_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"
   ],

_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;
+}

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",

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);

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;
+}