Skip to content

Commit 0a67271

Browse files
ZaifSenpaioliverdunk
ZaifSenpai
and
oliverdunk
authored
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>
1 parent 5113e3c commit 0a67271

6 files changed

Lines changed: 117 additions & 48 deletions

File tree

‎_archive/mv2/extensions/optional_permissions/logic.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,19 @@ function createTop(){chrome.topSites.get(function(topSites) {
2020
topSites.forEach(function(site) {
2121
let div = document.createElement('div');
2222
div.className = 'colorFun';
23-
let tooltip = document.createElement('span');
23+
let tooltip = document.createElement('a');
24+
tooltip.href = site.url;
2425
tooltip.innerText = site.title;
2526
tooltip.className = 'tooltip';
2627
let url = document.createElement('a');
2728
url.href = site.url;
28-
let hostname = (new URL(site.url)).hostname;
29+
let imageContainer = document.createElement('div');
30+
imageContainer.className = 'imageContainer';
2931
let image = document.createElement('img');
3032
image.title = site.title;
31-
image.src = 'https://logo.clearbit.com/' + hostname;
32-
url.appendChild(image);
33+
image.src = 'chrome://favicon/' + site.url;
34+
imageContainer.appendChild(image);
35+
url.appendChild(imageContainer);
3336
div.appendChild(url);
3437
div.appendChild(tooltip);
3538
sites_div.appendChild(div);

‎_archive/mv2/extensions/optional_permissions/manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "Optional Permissions New Tab",
33
"version": "1.2.5.0",
44
"description": "Demonstrates optional permissions in extensions",
5-
"permissions": ["storage"],
5+
"permissions": ["storage", "chrome://favicon/*"],
66
"optional_permissions": [
77
"topSites"
88
],

‎_archive/mv2/extensions/optional_permissions/style.css‎

Lines changed: 49 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ h1 {
88

99
#display_top {
1010
margin: auto;
11+
margin-bottom: 40px;
1112
width: 600px;
1213
}
1314

@@ -18,6 +19,11 @@ h1 {
1819
display: flex;
1920
align-items: center;
2021
justify-content: center;
22+
23+
animation-name: color-extravaganza;
24+
animation-duration: 6s;
25+
animation-iteration-count: infinite;
26+
animation-direction: alternate;
2127
}
2228

2329
.center {
@@ -36,45 +42,69 @@ h1 {
3642

3743
.colorFun {
3844
position: relative;
39-
height: 100px;
45+
height: 70px;
4046
width: 100px;
4147
padding: 10px;
4248
display: inline-block;
43-
margin-top: 60px;
49+
margin-top: 40px;
4450
}
4551

4652
.colorFun .tooltip {
47-
visibility: hidden;
48-
width: 120px;
49-
color: #fff;
53+
width: 100px;
5054
text-align: center;
5155
padding: 5px 0;
52-
border-radius: 6px;
5356
position: absolute;
5457
z-index: 1;
5558
bottom: 0%;
5659
left: 50%;
57-
margin-left: -60px;
58-
opacity: 0;
59-
transition: opacity 0.3s;
60+
transform: translateX(-50%);
61+
overflow: hidden;
62+
text-overflow: ellipsis;
63+
white-space: nowrap;
6064
}
6165

62-
63-
#todo_div, .colorFun:hover .tooltip {
64-
visibility: visible;
65-
opacity: 1;
66-
animation-name: color-extravaganza;
67-
animation-duration: 6s;
68-
animation-iteration-count: infinite;
69-
animation-direction: alternate;
66+
.imageContainer {
67+
background-color: #cdcdcd;
68+
width: 50px;
69+
height: 50px;
70+
display: flex;
71+
align-items: center;
72+
justify-content: center;
73+
border-radius: 50%;
74+
justify-self: center;
7075
}
7176

72-
img {
73-
width: 100px;
77+
.imageContainer img {
78+
width: 14px;
79+
height: 14px;
7480
}
7581

7682
footer {
7783
position: absolute;
7884
bottom: 20px;
7985
left: 20px;
8086
}
87+
88+
input#todo_value {
89+
width: 300px;
90+
height: 40px;
91+
font-size: 18px;
92+
padding: 12px 20px;
93+
border: 1px solid #ccc;
94+
border-radius: 4px;
95+
box-sizing: border-box;
96+
margin-right: 4px;
97+
}
98+
99+
input#todo_value ~ input[type="submit"] {
100+
background-color: #4285F4;
101+
color: white;
102+
padding: 12px 20px;
103+
border: none;
104+
border-radius: 4px;
105+
cursor: pointer;
106+
}
107+
108+
input#todo_value ~ input[type="submit"]:hover {
109+
background-color: #45a049;
110+
}

‎functional-samples/sample.optional_permissions/manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "Optional Permissions New Tab",
33
"version": "1.0.0",
44
"description": "Demonstrates optional permissions in extensions",
5-
"permissions": ["storage"],
5+
"permissions": ["storage", "favicon"],
66
"optional_permissions": ["topSites"],
77
"icons": {
88
"16": "images/icon16.png",

‎functional-samples/sample.optional_permissions/newtab.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,22 @@ const createTop = () => {
2828
topSites.forEach((site) => {
2929
const div = document.createElement('div');
3030
div.className = 'colorFun';
31-
const tooltip = document.createElement('span');
31+
const tooltip = document.createElement('a');
32+
tooltip.href = site.url;
3233
tooltip.innerText = site.title;
3334
tooltip.className = 'tooltip';
3435
const url = document.createElement('a');
3536
url.href = site.url;
36-
const hostname = new URL(site.url).hostname;
37+
const imageContainer = document.createElement('div');
38+
imageContainer.className = 'imageContainer';
39+
const imgUrl = new URL(chrome.runtime.getURL('/_favicon/'));
40+
imgUrl.searchParams.set('pageUrl', site.url);
41+
imgUrl.searchParams.set('size', '28');
3742
const image = document.createElement('img');
3843
image.title = site.title;
39-
image.src = 'https://logo.clearbit.com/' + hostname;
40-
url.appendChild(image);
44+
image.src = imgUrl.toString();
45+
imageContainer.appendChild(image);
46+
url.appendChild(imageContainer);
4147
div.appendChild(url);
4248
div.appendChild(tooltip);
4349
sites_div.appendChild(div);

‎functional-samples/sample.optional_permissions/style.css‎

Lines changed: 49 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ h1 {
1818

1919
#display_top {
2020
margin: auto;
21+
margin-bottom: 40px;
2122
width: 600px;
2223
}
2324

@@ -28,6 +29,11 @@ h1 {
2829
display: flex;
2930
align-items: center;
3031
justify-content: center;
32+
33+
animation-name: color-extravaganza;
34+
animation-duration: 6s;
35+
animation-iteration-count: infinite;
36+
animation-direction: alternate;
3137
}
3238

3339
.center {
@@ -56,45 +62,69 @@ h1 {
5662

5763
.colorFun {
5864
position: relative;
59-
height: 100px;
65+
height: 70px;
6066
width: 100px;
6167
padding: 10px;
6268
display: inline-block;
63-
margin-top: 60px;
69+
margin-top: 40px;
6470
}
6571

6672
.colorFun .tooltip {
67-
visibility: hidden;
68-
width: 120px;
69-
color: #fff;
73+
width: 100px;
7074
text-align: center;
7175
padding: 5px 0;
72-
border-radius: 6px;
7376
position: absolute;
7477
z-index: 1;
7578
bottom: 0%;
7679
left: 50%;
77-
margin-left: -60px;
78-
opacity: 0;
79-
transition: opacity 0.3s;
80+
transform: translateX(-50%);
81+
overflow: hidden;
82+
text-overflow: ellipsis;
83+
white-space: nowrap;
8084
}
8185

82-
#todo_div,
83-
.colorFun:hover .tooltip {
84-
visibility: visible;
85-
opacity: 1;
86-
animation-name: color-extravaganza;
87-
animation-duration: 6s;
88-
animation-iteration-count: infinite;
89-
animation-direction: alternate;
86+
.imageContainer {
87+
background-color: #cdcdcd;
88+
width: 50px;
89+
height: 50px;
90+
display: flex;
91+
align-items: center;
92+
justify-content: center;
93+
border-radius: 50%;
94+
justify-self: center;
9095
}
9196

92-
img {
93-
width: 100px;
97+
.imageContainer img {
98+
width: 28px;
99+
height: 28px;
94100
}
95101

96102
footer {
97103
position: absolute;
98104
bottom: 20px;
99105
left: 20px;
100106
}
107+
108+
input#todo_value {
109+
width: 300px;
110+
height: 40px;
111+
font-size: 18px;
112+
padding: 12px 20px;
113+
border: 1px solid #ccc;
114+
border-radius: 4px;
115+
box-sizing: border-box;
116+
margin-right: 4px;
117+
}
118+
119+
input#todo_value ~ input[type="submit"] {
120+
background-color: #4285F4;
121+
color: white;
122+
padding: 12px 20px;
123+
border: none;
124+
border-radius: 4px;
125+
cursor: pointer;
126+
}
127+
128+
input#todo_value ~ input[type="submit"]:hover {
129+
background-color: #45a049;
130+
}

0 commit comments

Comments
 (0)