post_image - browser extension to share images quickly
git clone https://github.com/rj1/post_image
commit 1ffb675ac226a12d7ae1c566f7c02322c89124c5 parent bf0482a4326657ad4c941de9c62e87afe9d7d7fd author: rj1 <[email protected]> date: Thu, 18 May 2023 21:35:23 -0600 cleaned up code + added filehost setting Diffstat:
| M | manifest.json | | | 13 | +++++++++++-- |
| M | settings.html | | | 23 | ++++++++++++----------- |
| M | settings.js | | | 38 | +++++++++++++++++--------------------- |
| M | upload.js | | | 164 | +++++++++++++++++++++++++++++++++++++++++++++++-------------------------------- |
4 files changed, 137 insertions(+), 101 deletions(-)
diff --git a/manifest.json b/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "POST Image", - "version": "0.5", + "version": "0.6", "icons": { "200": "icon.png" }, @@ -9,6 +9,7 @@ "permissions" : [ "contextMenus", "tabs", + "storage", "http://*/*", "https://*/*" ], @@ -21,5 +22,13 @@ "css" : [], "js" : ["upload.js"] } - ] + ], + "options_ui": { + "page": "settings.html" + }, + "browser_specific_settings": { + "gecko": { + "id": "[email protected]" + } + } } diff --git a/settings.html b/settings.html @@ -1,35 +1,36 @@ <!DOCTYPE html> <html> <head> - <meta charset="utf-8"> - <link rel="stylesheet" href="settings.css"> + <meta charset="utf-8" /> + <link rel="stylesheet" href="settings.css" /> </head> <body> <form> <h3>Settings</h3> <div class="setting"> <label class="permission"> - <input id="newTab" type="checkbox" checked> - Open uploaded image in a new tab + <input id="newTab" type="checkbox" checked disabled/> + Open uploaded image in a new tab </label> </div> <div class="setting"> <label class="permission"> - <input id="clipboardPlace" type="checkbox"> - Place uploaded image URL in system clipboard + <input id="clipboardPlace" type="checkbox" disabled/> + Place uploaded image URL in system clipboard (not implemented) </label> </div> <h3>File host</h3> <div class="setting"> <label class="permission"> - <select id="fileHost"> - <option value="filehole">filehole.org</option> - <option value="0x0">0x0.st</option> + <select id="fileHost" name="fileHost"> + <option value="filehole">filehole</option> + <option value="uguu">uguu</option> </select> </label> </div> + <button type="submit">apply</button> </form> - <script src="js/options.js"></script> - <div style="height:100px;"></div> + <script src="settings.js"></script> + <div style="height: 100px"></div> </body> </html> diff --git a/settings.js b/settings.js @@ -1,22 +1,18 @@ -function saveOptions(e) { - e.preventDefault(); - browser.storage.sync.set({ - fileHost: document.querySelector("#fileHost").value - }); -} +// get saved settings and display them +browser.storage.sync.get("fileHost").then((settings) => { + document.getElementById("fileHost").value = settings.fileHost || "filehole"; +}); -function restoreOptions() { - function setCurrentChoice(result) { - document.querySelector("#fileHost").value = result.fileHost || "filehole"; - } - - function onError(error) { - console.log(`Error: ${error}`); - } - - let getting = browser.storage.sync.get("fileHost"); - getting.then(setCurrentChoice, onError); -} - -document.addEventListener("DOMContentLoaded", restoreOptions); -document.querySelector("form").addEventListener("submit", saveOptions); +// save settings upon form submit +document.querySelector("form").addEventListener("submit", (event) => { + event.preventDefault(); + const newFileHost = document.getElementById("fileHost").value; + browser.storage.sync + .set({ fileHost: newFileHost }) + .then(() => { + console.log(`saved new file host: ${newFileHost}`); + }) + .catch((error) => { + console.error(`error saving file host: ${error}`); + }); +}); diff --git a/upload.js b/upload.js @@ -1,105 +1,135 @@ chrome.contextMenus.create({ title: "Upload image [POST]", contexts: ["image"], - onclick: function(info) { - var download = new XMLHttpRequest(); - download.onload = function() { - formatDetect(download.response, function(extension) { - var filename = makeid(5) + '.' + extension; - var fd = new FormData(); - fd.append("file", download.response, filename); - fd.append("url_len", "5"); - var upload = new XMLHttpRequest(); - upload.responseType = 'text'; - upload.onload = function() { - url = upload.response - chrome.tabs.create({url: url}); - } + onclick: async function (info) { + const download = new XMLHttpRequest(); + download.onload = async function () { + const extension = await detectFileExtension(download.response); + const filename = makeid(5) + "." + extension; + const fileHost = + (await browser.storage.sync.get("fileHost")).fileHost || "filehole"; + const fd = new FormData(); - // upload image - upload.open('POST', 'https://filehole.org/'); - upload.send(fd); - }); + switch (fileHost) { + case "uguu": + fd.append("files[]", download.response, filename); + await uploadToUguu(fd, filename); + break; + case "filehole": + fd.append("file", download.response, filename); + fd.append("url_len", "8"); + await uploadToFileHole(fd); + break; + default: + break; + } }; - download.responseType = 'blob'; - download.open('GET', info.srcUrl); + download.responseType = "blob"; + download.open("GET", info.srcUrl); download.send(); - } + }, }); -function makeid(length) { - var result = ''; - var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'; - var charactersLength = characters.length; - for (var i = 0; i < length; i++) { - result += characters.charAt(Math.floor(Math.random() * charactersLength)); - } - return result; -} - -function formatDetect(file, callback) { - // https://mimesniff.spec.whatwg.org/#matching-an-image-type-pattern - var mimes = [ +async function detectFileExtension(file) { + const mimes = [ { - mime: 'image/jpeg', - extension: 'jpg', - pattern: [0xFF, 0xD8, 0xFF], - mask: [0xFF, 0xFF, 0xFF] + mime: "image/jpeg", + extension: "jpg", + pattern: [0xff, 0xd8, 0xff], + mask: [0xff, 0xff, 0xff], }, { - mime: 'image/png', - extension: 'png', - pattern: [0x89, 0x50, 0x4E, 0x47], - mask: [0xFF, 0xFF, 0xFF, 0xFF] + mime: "image/png", + extension: "png", + pattern: [0x89, 0x50, 0x4e, 0x47], + mask: [0xff, 0xff, 0xff, 0xff], }, { - mime: 'image/webp', - extension: 'webp', + mime: "image/webp", + extension: "webp", pattern: [0x52, 0x49, 0x46, 0x46], - mask: [0xFF, 0xFF, 0xFF, 0xFF] + mask: [0xff, 0xff, 0xff, 0xff], }, { - mime: 'image/gif', - extension: 'gif', + mime: "image/gif", + extension: "gif", pattern: [0x47, 0x49, 0x46, 0x38], - mask: [0xFF, 0xFF, 0xFF, 0xFF] + mask: [0xff, 0xff, 0xff, 0xff], }, { - mime: 'image/svg+xml', - extension: 'svg', + mime: "image/svg+xml", + extension: "svg", pattern: [0x3c, 0x3f, 0x78, 0x6d], - mask: [0xFF, 0xFF, 0xFF, 0xFF] - } + mask: [0xff, 0xff, 0xff, 0xff], + }, ]; function check(bytes, mime) { - for(var i = 0, l = mime.mask.length; i < l; ++i) { - if((bytes[i] & mime.mask[i]) - mime.pattern[i] !== 0) { + for (let i = 0, l = mime.mask.length; i < l; ++i) { + if ((bytes[i] & mime.mask[i]) - mime.pattern[i] !== 0) { return false; } } return true; } - var blob = file.slice(0, 4); + const blob = file.slice(0, 4); - var reader = new FileReader(); - reader.onloadend = function(e) { - if(e.target.readyState === FileReader.DONE) { - var bytes = new Uint8Array(e.target.result); + const reader = new FileReader(); + return new Promise((resolve) => { + reader.onloadend = function (e) { + if (e.target.readyState === FileReader.DONE) { + const bytes = new Uint8Array(e.target.result); - for(var i = 0, l = mimes.length; i < l; ++i) { - if(check(bytes, mimes[i])) { - // return the proper extension for the file - return callback(mimes[i].extension) + for (let i = 0, l = mimes.length; i < l; ++i) { + if (check(bytes, mimes[i])) { + // return the proper extension for the file + resolve(mimes[i].extension); + return; + } } + + // return a default extension + resolve("png"); } + }; + reader.readAsArrayBuffer(blob); + }); +} - // return a default extension - return callback('png'); - } +async function uploadToUguu(fd, filename) { + const upload = new XMLHttpRequest(); + upload.responseType = "json"; + upload.onload = function () { + const url = upload.response.files[0].url; + chrome.tabs.create({ url }); + }; + + // upload image + upload.open("POST", "https://uguu.se/upload.php"); + upload.send(fd); +} + +async function uploadToFileHole(fd) { + const upload = new XMLHttpRequest(); + upload.responseType = "text"; + upload.onload = function () { + const url = upload.response; + chrome.tabs.create({ url }); }; - reader.readAsArrayBuffer(blob); + + // upload image + upload.open("POST", "https://filehole.org/"); + upload.send(fd); } +function makeid(length) { + const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; + const charactersLength = characters.length; + let result = ""; + for (let i = 0; i < length; i++) { + result += characters.charAt(Math.floor(Math.random() * charactersLength)); + } + return result; +}