Commit b1b90cfe authored by CrystalFaith's avatar CrystalFaith Committed by Commit Bot

[Extension Docs]Optional Permissions Sample

Sample extension that displays users top sites on new tab.
Includes button that triggers optional permission request/
shows warning.

Bug: none
Change-Id: Ib590b1d94773ba25dcbddd79d5f9be2de84aabf7
Reviewed-on: https://chromium-review.googlesource.com/920644
Commit-Queue: Crystal Lambert <crystallambert@chromium.org>
Reviewed-by: default avatarDevlin <rdevlin.cronin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#543836}
parent 1dfd20ea
// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
'use strict';
const kPermissionObj = {
permissions: ['topSites']
};
const sites_div = document.getElementById('display_top');
const todo = document.getElementById('display_todo');
const form = document.querySelector('form');
const footer = document.querySelector('footer');
function createTop(){chrome.topSites.get(function(topSites) {
topSites.forEach(function(site) {
let div = document.createElement('div');
div.className = 'colorFun';
let tooltip = document.createElement('span');
tooltip.innerText = site.title;
tooltip.className = 'tooltip';
let url = document.createElement('a');
url.href = site.url;
let hostname = (new URL(site.url)).hostname;
let image = document.createElement('img');
image.title = site.title;
image.src = 'https://logo.clearbit.com/' + hostname;
url.appendChild(image);
div.appendChild(url);
div.appendChild(tooltip);
sites_div.appendChild(div);
})
})};
chrome.permissions.contains({permissions: ['topSites']}, function(result) {
if (result) {
// The extension has the permissions.
createTop();
} else {
// The extension doesn't have the permissions.
let button = document.createElement('button');
button.innerText = 'Allow Extension to Access Top Sites';
button.addEventListener('click', function() {
chrome.permissions.request(kPermissionObj, function(granted) {
if (granted) {
console.log('granted');
sites_div.innerText = '';
createTop();
} else {
console.log('not granted');
}
});
});
footer.appendChild(button);
}
});
form.addEventListener('submit', function() {
let todo_value = document.getElementById('todo_value');
chrome.storage.sync.set({todo: todo_value.value});
});
function setToDo() {
chrome.storage.sync.get(['todo'], function(value) {
if (!value.todo) {
todo.innerText = '';
} else {
todo.innerText = value.todo;
}
});
};
setToDo();
{
"name": "Optional Permissions New Tab",
"version": "1.2.5.0",
"description": "Demonstrates optional permissions in extensions",
"permissions": ["storage"],
"optional_permissions": [
"topSites"
],
"icons": {
"16": "images/optional_permissions16.png",
"32": "images/optional_permissions32.png",
"48": "images/optional_permissions48.png",
"128": "images/optional_permissions128.png"
},
"chrome_url_overrides": {
"newtab": "newtab.html"
},
"manifest_version": 2
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>New Tab - Optional Permissions</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="todo_div" class="center colorFun">
<h1 id="display_todo"></h1>
</div>
<div id="display_top"></div>
<form class="center">
<input id="todo_value" placeholder="My focus today is..." />
<input type="submit" value="Submit">
</form>
<footer></footer>
<script src="logic.js"></script>
</body>
</html>
/* Copyright 2018 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.*/
h1 {
font-family: "Courier New", Courier, monospaces;
}
#display_top {
margin: auto;
width: 600px;
}
#todo_div {
margin-top: 0px;
height: 100px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.center {
display: flex;
align-items: center;
justify-content: center;
}
@keyframes color-extravaganza {
0% {background-color: #4285F4;}
10% {background-color: #4285F4;}
25% {background-color: #EA4335;}
50% {background-color: #FBBC04;}
100% {background-color: #34A853;}
}
.colorFun {
position: relative;
height: 100px;
width: 100px;
padding: 10px;
display: inline-block;
margin-top: 60px;
}
.colorFun .tooltip {
visibility: hidden;
width: 120px;
color: #fff;
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;
}
#todo_div, .colorFun:hover .tooltip {
visibility: visible;
opacity: 1;
animation-name: color-extravaganza;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
img {
width: 100px;
}
footer {
position: absolute;
bottom: 20px;
left: 20px;
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment