feat: A simple proof of concept

bezlant · May 2, 2023 · ba5df5f · ba5df5f
1 parent 06c1279
commit ba5df5f
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 2 deletions.
diff --git 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
diff --git a/assets/icon-34.png b/assets/icon-34.png
diff --git a/background.js 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
@@ -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
@@ -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": ["<all_urls>"],
+      "js": ["contentScript.js"],
+      "run_at": "document_end"
+    }
+  ],
+  "permissions": ["activeTab", "scripting", "storage"],
+  "background": {
+    "service_worker": "background.js"
+  }
+}
diff --git a/popup.html b/popup.html
@@ -0,0 +1,13 @@
+<html>
+
+<body>
+  <h1>Save Article to Gist</h1>
+  <label for="gistId">Gist ID:</label>
+  <input type="text" id="gistId" />
+  <br />
+  <label for="token">GitHub Token:</label>
+  <input type="text" id="token" />
+  <script src="popup.js"></script>
+</body>
+
+</html>
diff --git a/popup.js 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 });
+});