an example using permissions (#204)

* an example using permissions

* fix up after suggestions from wbamberg
This commit is contained in:
Andy McKay
2017-04-24 17:55:53 -07:00
committed by wbamberg
parent 8c575424ea
commit 48d7eb4479
8 changed files with 130 additions and 0 deletions

9
permissions/README.md Normal file
View File

@@ -0,0 +1,9 @@
# Permissions Example
## What it does
An example using the permissions API to grant and revoke an optional permission.
## What it shows
How to request a permission, catching error conditions from the request and querying the permissions API.

View File

@@ -0,0 +1,5 @@
browser.browserAction.onClicked.addListener(() => {
browser.tabs.create({
url: browser.runtime.getURL("page.html")
});
});

6
permissions/bootstrap.min.css vendored Normal file

File diff suppressed because one or more lines are too long

1
permissions/icon.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 500 500" height="500px" id="Layer_1" version="1.1" viewBox="0 0 500 500" width="500px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path clip-rule="evenodd" d="M131.889,150.061v63.597h-27.256 c-20.079,0-36.343,16.263-36.343,36.342v181.711c0,20.078,16.264,36.34,36.343,36.34h290.734c20.078,0,36.345-16.262,36.345-36.34 V250c0-20.079-16.267-36.342-36.345-36.342h-27.254v-63.597c0-65.232-52.882-118.111-118.112-118.111 S131.889,84.828,131.889,150.061z M177.317,213.658v-63.597c0-40.157,32.525-72.685,72.683-72.685 c40.158,0,72.685,32.528,72.685,72.685v63.597H177.317z M213.658,313.599c0-20.078,16.263-36.341,36.342-36.341 s36.341,16.263,36.341,36.341c0,12.812-6.634,24.079-16.625,30.529c0,0,3.55,21.446,7.542,46.699 c0,7.538-6.087,13.625-13.629,13.625h-27.258c-7.541,0-13.627-6.087-13.627-13.625l7.542-46.699 C220.294,337.678,213.658,326.41,213.658,313.599z" fill="#010101" fill-rule="evenodd"/></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

29
permissions/manifest.json Normal file
View File

@@ -0,0 +1,29 @@
{
"manifest_version": 2,
"name": "Permissions Example",
"description": "Permissions Example",
"version": "1.0",
"background": {
"scripts": ["background.js"]
},
"icons": {
"48": "icon.svg"
},
"browser_action": {
"default_title": "Permissions Example",
"default_icon": "icon.svg"
},
"permissions": [
"tabs"
],
"optional_permissions": [
"history"
],
"applications": {
"gecko": {
"strict_min_version": "55.0a2"
}
}
}

3
permissions/page.css Normal file
View File

@@ -0,0 +1,3 @@
p.bg-danger, p.bg-success, p.bg-warning {
padding: 1em;
}

31
permissions/page.html Normal file
View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Permissions Example</title>
<link rel="stylesheet" href="page.css"/>
<link rel="stylesheet" href="bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h3>Permissions Example</h3>
<p style="display: none" id="result"></p>
<p>
<b>Current permissions returned by the API:</b>
<span id="permissions"></span>
</p>
<hr>
<ul>
<li>The <code>tabs</code> permission has been <b>granted</b> on install.</li>
<li>The <code>history</code> permission is an optional permission that can be
<a href="#" class="permission" data-permission="history" data-action="grant">granted</a> or
<a href="#" class="permission" data-permission="history" data-action="revoke">revoked</a>.
</li>
<li>The <code>cookies</code> permission cannot be <a href="#" class="permission" data-permission="cookies" data-action="grant">granted</a>, because it was not included in the <code>optional_permissions</code> manifest key.</li>
<li>The <code>foo</code> permission cannot be <a href="#" class="permission" data-permission="foo" data-action="grant">granted</a>, because it is not a valid permission name.</li>
</ul>
</div>
<script src="page.js"></script>
</body>
</html>

46
permissions/page.js Normal file
View File

@@ -0,0 +1,46 @@
function updatePermissions() {
browser.permissions.getAll()
.then((permissions) => {
document.getElementById('permissions').innerText = permissions.permissions.join(', ');
});
}
async function processChange(event) {
let permission = event.target.dataset.permission;
let result = document.getElementById('result');
try {
if (event.target.dataset.action === 'grant') {
browser.permissions.request({permissions: [permission]})
.then((response) => {
result.className = 'bg-success';
result.textContent = 'Call successful.';
})
.catch((err) => {
// Catch the case where the permission cannot be granted.
result.className = 'bg-warning';
result.textContent = err.message;
});
}
else {
browser.permissions.remove({permissions: [permission]})
.then((response) => {
result.className = 'bg-success';
result.textContent = 'Call successful.';
});
}
} catch(err) {
// Catch the case where the permission is completely wrong.
result.className = 'bg-danger';
result.textContent = err.message;
}
result.style.display = 'block';
updatePermissions();
event.preventDefault();
}
for (let element of document.getElementsByClassName('permission')) {
element.addEventListener('click', processChange);
}
updatePermissions();