mirror of
https://github.com/mdn/webextensions-examples.git
synced 2026-04-16 06:18:35 +02:00
New example add-on: latest-download
This commit is contained in:
Will Bamberg
27
latest-download/README.md
Normal file
27
latest-download/README.md
Normal file
@@ -0,0 +1,27 @@
|
||||
# beastify
|
||||
|
||||
## What it does ##
|
||||
|
||||
The extension includes:
|
||||
|
||||
* a browser action with a popup including HTML, CSS, and JS
|
||||
* a content script
|
||||
* three images, each of a different beast, packaged as web accessible resources
|
||||
|
||||
When the user clicks the browser action button, the popup is shown, enabling
|
||||
the user to choose one of three beasts.
|
||||
|
||||
When they choose a beast, the extension injects the content script into
|
||||
the current page, and sends the content script a message containing
|
||||
the name of the chosen beast.
|
||||
|
||||
When the content script receives this message, it replaces the current page
|
||||
content with an image of the chosen beast.
|
||||
|
||||
## What it shows ##
|
||||
|
||||
* write a browser action with a popup
|
||||
* give the popup style and behavior using CSS and JS
|
||||
* inject a content script programmatically using `tabs.executeScript()`
|
||||
* send a message from the main extension to a content script
|
||||
* use web accessible resources to enable web pages to load packaged content
|
||||
2
latest-download/icons/LICENSE
Normal file
2
latest-download/icons/LICENSE
Normal file
@@ -0,0 +1,2 @@
|
||||
|
||||
The "page-32.png" and "page-48.png" icons are taken from the miu iconset created by Linh Pham Thi Dieu, and are used under the terms of its license: http://linhpham.me/miu/.
|
||||
BIN
latest-download/icons/page-32.png
Normal file
BIN
latest-download/icons/page-32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 344 B |
BIN
latest-download/icons/page-48.png
Normal file
BIN
latest-download/icons/page-48.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 310 B |
30
latest-download/manifest.json
Normal file
30
latest-download/manifest.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
|
||||
"description": "Shows the last downloaded item, and lets you open or delete it",
|
||||
"manifest_version": 2,
|
||||
"name": "latest-download",
|
||||
"version": "1.0",
|
||||
"homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/latest-download",
|
||||
"icons": {
|
||||
"48": "icons/page-48.png"
|
||||
},
|
||||
|
||||
"applications": {
|
||||
"gecko": {
|
||||
"id": "latest-download@mozilla.org",
|
||||
"strict_min_version": "48.0"
|
||||
}
|
||||
},
|
||||
|
||||
"permissions": [
|
||||
"downloads",
|
||||
"downloads.open"
|
||||
],
|
||||
|
||||
"browser_action": {
|
||||
"default_icon": "icons/page-32.png",
|
||||
"default_title": "Latest download",
|
||||
"default_popup": "popup/latest_download.html"
|
||||
}
|
||||
|
||||
}
|
||||
8
latest-download/popup/latest_download.css
Normal file
8
latest-download/popup/latest_download.css
Normal file
@@ -0,0 +1,8 @@
|
||||
html, body {
|
||||
font: "Open Sans",Arial,sans-serif;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
#download-entry > * {
|
||||
padding: 0.5em;
|
||||
}
|
||||
20
latest-download/popup/latest_download.html
Normal file
20
latest-download/popup/latest_download.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="latest_download.css"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="download-entry">
|
||||
<img id="icon"/><pre id="url"></pre>
|
||||
</div>
|
||||
<input id="open" type="button" value="Open"/>
|
||||
<input id="remove" type="button" value="Remove"/>
|
||||
|
||||
<script src="latest_download.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
65
latest-download/popup/latest_download.js
Normal file
65
latest-download/popup/latest_download.js
Normal file
@@ -0,0 +1,65 @@
|
||||
|
||||
var latestDownloadId;
|
||||
|
||||
/*
|
||||
Callback from getFileIcon.
|
||||
Log an error, or initialize the displayed icon.
|
||||
*/
|
||||
function updateIconUrl(iconUrl) {
|
||||
if (chrome.runtime.lastError) {
|
||||
console.error(chrome.runtime.lastError);
|
||||
iconUrl = "";
|
||||
}
|
||||
var downloadIcon = document.querySelector("#icon");
|
||||
downloadIcon.setAttribute("src", iconUrl);
|
||||
}
|
||||
|
||||
/*
|
||||
If there was a download item,
|
||||
- remember its ID as latestDownloadId
|
||||
- initialize the displayed icon using getFileIcon
|
||||
- initialize the displayed URL
|
||||
If there wasn't a download item, disable the "open" and "remove" buttons.
|
||||
*/
|
||||
function initializeLatestDownload(downloadItems) {
|
||||
if (downloadItems.length > 0) {
|
||||
latestDownloadId = downloadItems[0].id;
|
||||
chrome.downloads.getFileIcon(latestDownloadId, updateIconUrl);
|
||||
var downloadUrl = document.querySelector("#url");
|
||||
downloadUrl.textContent = downloadItems[0].url;
|
||||
} else {
|
||||
document.querySelector("#open").disabled = true;
|
||||
document.querySelector("#remove").disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Search for the most recent download, and pass it to initializeLatestDownload()
|
||||
*/
|
||||
chrome.downloads.search({
|
||||
limit: 1,
|
||||
orderBy: ["-startTime"]
|
||||
}, initializeLatestDownload);
|
||||
|
||||
/*
|
||||
Open the item using the associated application.
|
||||
*/
|
||||
function openItem() {
|
||||
chrome.downloads.open(latestDownloadId);
|
||||
window.close();
|
||||
}
|
||||
|
||||
/*
|
||||
Remove item from disk (removeFile) and from the download history (erase)
|
||||
*/
|
||||
function removeItem() {
|
||||
chrome.downloads.removeFile(latestDownloadId);
|
||||
chrome.downloads.erase({id: latestDownloadId});
|
||||
window.close();
|
||||
}
|
||||
|
||||
var openItemButton = document.querySelector("#open");
|
||||
openItemButton.addEventListener("click", openItem);
|
||||
|
||||
var removeItemButton = document.querySelector("#remove");
|
||||
removeItemButton.addEventListener("click", removeItem);
|
||||
Reference in New Issue
Block a user