post_image - browser extension to share images quickly
git clone https://github.com/rj1/post_image
commit 1bfee640e06f408a3fd00c40c19be3a808677ccb parent a4e0da36cb972947e8d34793f8fef41000b6d3d5 author: rj1 <[email protected]> date: Fri, 19 May 2023 16:37:47 -0600 implemented settings to open urls in new tab, place url in clipboard Diffstat:
| M | manifest.json | | | 4 | +++- |
| M | settings.css | | | 17 | +++++++++++------ |
| M | settings.html | | | 24 | ++++++++++++------------ |
| M | settings.js | | | 24 | ++++++++++++++---------- |
| M | upload.js | | | 68 | ++++++++++++++++++++++++++++++++++++++++++++++++++++---------------- |
5 files changed, 92 insertions(+), 45 deletions(-)
diff --git a/manifest.json b/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "POST Image", - "version": "0.6", + "version": "0.7", "icons": { "200": "icon.png" }, @@ -10,6 +10,8 @@ "contextMenus", "tabs", "storage", + "notifications", + "clipboardWrite", "http://*/*", "https://*/*" ], diff --git a/settings.css b/settings.css @@ -3,18 +3,23 @@ body { background: #fff; color: rgb(74, 74, 79); font-size: 13px; - overflow: hidden; + padding: 20px; } h3:first-of-type { - margin-block-start: 1rem; + margin-top: 0; } input[type="checkbox"] { - margin-inline: 0 8px; - margin-block: 1px auto; - inline-size: 16px; - block-size: 16px; + margin-right: 8px; +} + +button[type="submit"] { + margin-top: 16px; +} + +.spacer { + height: 100px; } @media (prefers-color-scheme: dark) { diff --git a/settings.html b/settings.html @@ -7,30 +7,30 @@ <body> <form> <h3>Settings</h3> - <div class="setting"> - <label class="permission"> - <input id="newTab" type="checkbox" checked disabled/> - Open uploaded image in a new tab + <div> + <label> + <input id="newTab" type="checkbox" /> + Open uploaded image in a new tab </label> </div> - <div class="setting"> - <label class="permission"> - <input id="clipboardPlace" type="checkbox" disabled/> - Place uploaded image URL in system clipboard (not implemented) + <div> + <label> + <input id="clipboardPlace" type="checkbox" /> + Place uploaded image URL in system clipboard </label> </div> <h3>File host</h3> - <div class="setting"> - <label class="permission"> + <div> + <label> <select id="fileHost" name="fileHost"> <option value="filehole">filehole</option> <option value="uguu">uguu</option> </select> </label> </div> - <button type="submit">apply</button> + <button type="submit">Apply</button> </form> <script src="settings.js"></script> - <div style="height: 100px"></div> + <div class="spacer"></div> </body> </html> diff --git a/settings.js b/settings.js @@ -1,18 +1,22 @@ // get saved settings and display them browser.storage.sync.get("fileHost").then((settings) => { - document.getElementById("fileHost").value = settings.fileHost || "filehole"; + document.getElementById("fileHost").value = settings.fileHost; +}); + +browser.storage.sync.get("newTab").then((settings) => { + document.getElementById("newTab").checked = settings.newTab; +}); + +browser.storage.sync.get("clipboardPlace").then((settings) => { + document.getElementById("clipboardPlace").checked = settings.clipboardPlace; }); // 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}`); - }); + browser.storage.sync.set({ + newTab: document.getElementById("newTab").checked, + clipboardPlace: document.getElementById("clipboardPlace").checked, + fileHost: document.getElementById("fileHost").value, + }); }); diff --git a/upload.js b/upload.js @@ -8,17 +8,17 @@ chrome.contextMenus.create({ const filename = makeid(5) + "." + extension; const fileHost = (await browser.storage.sync.get("fileHost")).fileHost || "filehole"; - const fd = new FormData(); + const formData = new FormData(); switch (fileHost) { case "uguu": - fd.append("files[]", download.response, filename); - await uploadToUguu(fd, filename); + formData.append("files[]", download.response, filename); + await uploadToUguu(formData, filename); break; case "filehole": - fd.append("file", download.response, filename); - fd.append("url_len", "8"); - await uploadToFileHole(fd); + formData.append("file", download.response, filename); + formData.append("url_len", "8"); + await uploadToFileHole(formData); break; default: break; @@ -98,30 +98,53 @@ async function detectFileExtension(file) { }); } -async function uploadToUguu(fd, filename) { +async function uploadToUguu(formData, filename) { const upload = new XMLHttpRequest(); upload.responseType = "json"; - upload.onload = function () { - const url = upload.response.files[0].url; - chrome.tabs.create({ url }); + upload.onload = async function () { + await openNewTab(upload.response.files[0].url); + await placeUrlInClipboard(upload.response.files[0].url); }; // upload image upload.open("POST", "https://uguu.se/upload.php"); - upload.send(fd); + upload.send(formData); } -async function uploadToFileHole(fd) { +async function uploadToFileHole(formData) { const upload = new XMLHttpRequest(); upload.responseType = "text"; - upload.onload = function () { - const url = upload.response; - chrome.tabs.create({ url }); + upload.onload = async function () { + await openNewTab(upload.response); + await placeUrlInClipboard(upload.response); }; // upload image upload.open("POST", "https://filehole.org/"); - upload.send(fd); + upload.send(formData); +} + +async function openNewTab(url) { + const newTab = (await browser.storage.sync.get("newTab")).newTab; + + if (newTab) { + chrome.tabs.create({ url }); + return; + } +} + +async function placeUrlInClipboard(url) { + // check if clipboardPlace is set to true + const clipboardPlace = (await browser.storage.sync.get("clipboardPlace")) + .clipboardPlace; + if (clipboardPlace) { + navigator.clipboard.writeText(url); + chrome.notifications.create({ + type: "basic", + title: "POST Image", + message: "Copied image URL to clipboard", + }); + } } function makeid(length) { @@ -133,3 +156,16 @@ function makeid(length) { } return result; } + +// set default settings for first-time install +browser.runtime.onInstalled.addListener(handleInstalled); + +function handleInstalled(details) { + if (details.reason === "install") { + browser.storage.sync.set({ + fileHost: "filehole", + newTab: true, + clipboardPlace: false, + }); + } +}