felixfoertsch/webextensions-examples
1
0
Fork 0
mirror of https://github.com/mdn/webextensions-examples.git synced 2026-04-17 23:08:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

Selfify example (#251)

Browse Source 
* Selfify example for how to access files article

* Restored selfify.js and updated choose_file.js as suggested by Luca

* Updated comments

* Updates for feedback from Will

* Updates from the second round of feedback

* removed activetab from manifest, removed document.body.appendChild(info);, renamed the content script (selfify > content), renamed the listener (selfify > injectImage) and moved example to imagify folder.

* Correctly renamed folder and update manifest.json
This commit is contained in:
rebloor
2017-07-21 09:54:33 +12:00
committed by wbamberg
parent 8351d9923e
commit 716ace2d41
9 changed files with 225 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
imagify/sidebar/choose_file.js Normal file
View File

@@ -0,0 +1,63 @@
/*
Listens for a file being selected, creates a ObjectURL for the chosen file, injects a
content script into the active tab then passes the image URL through a message to the
active tab ID.
*/
// Listen for a file being selected through the file picker
const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handlePicked, false);
// Listen for a file being dropped into the drop zone
const dropbox = document.getElementById("drop_zone");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
// Get the image file if it was chosen from the pick list
function handlePicked() {
displayFile(this.files);
}
// Get the image file if it was dragged into the sidebar drop zone
function drop(e) {
e.stopPropagation();
e.preventDefault();
displayFile(e.dataTransfer.files);
}
/*
Insert the content script and send the image file ObjectURL to the content script using a
message.
*/
function displayFile(fileList) {
const imageURL = window.URL.createObjectURL(fileList[0]);
browser.tabs.executeScript({
file: "/content_scripts/content.js"
}).then(messageContent)
.catch(reportError);
function messageContent() {
const gettingActiveTab = browser.tabs.query({active: true, currentWindow: true});
gettingActiveTab.then((tabs) => {
browser.tabs.sendMessage(tabs[0].id, {imageURL});
});
}
function reportError(error) {
console.error(`Could not inject content script: ${error}`);
}
}
// Ignore the drag enter event - not used in this extension
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
// Ignore the drag over event - not used in this extension
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}

15
imagify/sidebar/sidebar.css Normal file
View File

@@ -0,0 +1,15 @@
html, body {
width: 100%;
height: 100%;
}
#drop_zone {
border: 5px solid blue;
width: 100%;
height: 100%;
}
#drop_zone_label {
margin: 1em;
display: block;
}

24
imagify/sidebar/sidebar.html Normal file
View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="sidebar.css"/>
</head>
<body>
<div id="picker_zone" style="margin:20px ;color:blue">
<input type="file" accept="image/*" id="input">
</div>
<div id="drop_zone">
<strong id="drop_zone_label">Drag an image file into this Drop Zone ...</strong>
</div>
<script src="choose_file.js"></script>
</body>
</html>