diff --git a/README.md b/README.md index 2101d79..f012c73 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,3 @@ -# articles-ive-read -A vanilla js chrome extension to save articles you've read to a github gist. +# Articles I've read + +A Vanilla JS chrome extension to save articles you've read to a github gist. diff --git a/assets/icon-128.png b/assets/icon-128.png new file mode 100644 index 0000000..c3d7ef5 Binary files /dev/null and b/assets/icon-128.png differ diff --git a/assets/icon-34.png b/assets/icon-34.png new file mode 100644 index 0000000..973b2e7 Binary files /dev/null and b/assets/icon-34.png differ diff --git a/background.js b/background.js new file mode 100644 index 0000000..4ca6d9b --- /dev/null +++ b/background.js @@ -0,0 +1,39 @@ +chrome.runtime.onMessage.addListener((message) => { + chrome.storage.local.get(["gistId", "token"], (result) => { + const gistId = result.gistId; + const token = result.token; + if (gistId && token) { + updateGist(message.title, message.url, gistId, token); + } + }); +}); + +async function updateGist(title, url, gistId, token) { + const headers = new Headers(); + headers.append("Authorization", `token ${token}`); + headers.append("Content-Type", "application/json"); + + const response = await fetch(`https://api.github.com/gists/${gistId}`, { + method: "GET", + headers: headers, + }); + + const gist = await response.json(); + const content = gist.files["articles-ive-read.md"].content; + + const updatedContent = `- [${title}](${url})\n` + content; + + const body = JSON.stringify({ + files: { + "articles-ive-read.md": { + content: updatedContent, + }, + }, + }); + + await fetch(`https://api.github.com/gists/${gistId}`, { + method: "PATCH", + headers: headers, + body: body, + }); +} diff --git a/contentScript.js b/contentScript.js new file mode 100644 index 0000000..d930e4f --- /dev/null +++ b/contentScript.js @@ -0,0 +1,19 @@ +const overlayButton = document.createElement("button"); +overlayButton.innerText = "Save Article"; +overlayButton.style.position = "fixed"; +overlayButton.style.bottom = "10px"; +overlayButton.style.right = "10px"; +overlayButton.style.zIndex = "9999"; +overlayButton.style.backgroundColor = "white"; +overlayButton.style.border = "1px solid black"; +overlayButton.style.padding = "5px"; +overlayButton.style.borderRadius = "5px"; + +document.body.appendChild(overlayButton); + +overlayButton.addEventListener("click", () => { + const title = document.title; + const url = window.location.href; + + chrome.runtime.sendMessage({ title, url }); +}); diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..9ffed2a --- /dev/null +++ b/manifest.json @@ -0,0 +1,24 @@ +{ + "manifest_version": 3, + "name": "Articles I've read", + "description": "Save article titles and URLs to a GitHub Gist", + "version": "0.69", + "action": { + "default_popup": "popup.html", + "default_icon": "assets/icon-34.png" + }, + "icons": { + "128": "assets/icon-128.png" + }, + "content_scripts": [ + { + "matches": [""], + "js": ["contentScript.js"], + "run_at": "document_end" + } + ], + "permissions": ["activeTab", "scripting", "storage"], + "background": { + "service_worker": "background.js" + } +} diff --git a/popup.html b/popup.html new file mode 100644 index 0000000..f156c7a --- /dev/null +++ b/popup.html @@ -0,0 +1,13 @@ + + + +

Save Article to Gist

+ + +
+ + + + + + diff --git a/popup.js b/popup.js new file mode 100644 index 0000000..47bd55a --- /dev/null +++ b/popup.js @@ -0,0 +1,15 @@ +const gistIdInput = document.getElementById("gistId"); +const tokenInput = document.getElementById("token"); + +chrome.storage.local.get(["gistId", "token"], (result) => { + gistIdInput.value = result.gistId || ""; + tokenInput.value = result.token || ""; +}); + +gistIdInput.addEventListener("blur", () => { + chrome.storage.local.set({ gistId: gistIdInput.value }); +}); + +tokenInput.addEventListener("blur", () => { + chrome.storage.local.set({ token: tokenInput.value }); +});