mirror of
https://github.com/mdn/webextensions-examples.git
synced 2026-04-17 23:08:33 +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