Implement Chrome extension

NimJay · Sep 18, 2024 · e598d7f · e598d7f
1 parent 516decd
commit e598d7f
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 0 deletions.
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,13 @@
+{
+    "manifest_version": 3,
+    "name": "Copy-to-clipboard notes manager",
+    "version": "1.0",
+    "description": "Maintain notes that you can easily copy into your clipboard.",
+    "action": {
+      "default_popup": "popup.html"
+    },
+    "permissions": [
+      "clipboardWrite",
+      "storage"
+    ]
+  }
diff --git a/popup.html b/popup.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Copy-to-clipboard notes manager</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            font-size: 20px;
+            padding: 10px;
+        }
+
+        button,
+        textarea {
+            margin-top: 15px;
+            padding: 15px;
+        }
+
+        button {
+            font-size: 18px;
+            width: 100%;
+            border: none;
+            color: rgba(0, 0, 0, 0.7);
+            background-color: #95dc5f;
+            border-radius: 6px;
+            box-shadow: -1px 1px 6px -1px rgba(0, 0, 0, 0.1);
+            cursor: pointer;
+            outline: none;
+            transition: box-shadow 0.2s ease-out, opacity .2s ease-out;
+        }
+
+        button:focus {
+            box-shadow: -1px 1px 10px 0px rgba(0, 0, 0, 0.2);
+        }
+
+        button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        textarea {
+            font-family: Arial, sans-serif;
+        }
+    </style>
+</head>
+
+<body>
+    <button id="copy-button">Copy to clipboard</button>
+    <textarea id="note-textarea"></textarea>
+    <button id="save-button" disabled>Save changes</button>
+    <script src="popup.js"></script>
+</body>
+
+</html>
diff --git a/popup.js b/popup.js
@@ -0,0 +1,43 @@
+// Save the note when the "save-button" is clicked
+document.getElementById('save-button').addEventListener('click', function () {
+    const saveButton = document.getElementById('save-button');
+    saveButton.disabled = true;
+    const textarea = document.getElementById('note-textarea');
+    const text = textarea.value;
+    chrome.storage.sync.set({ 'savedNote': text }, () => {
+        console.log('Text saved to storage');
+    });
+});
+
+// Enable the "save-button" when the "note-textarea" is modified
+document.getElementById('note-textarea').addEventListener('input', () => {
+    const saveButton = document.getElementById('save-button');
+    saveButton.disabled = false;
+});
+
+// "Copy to clipboard" feature
+document.getElementById('copy-button').addEventListener('click', () => {
+    chrome.storage.sync.get(['savedNote'], (result) => {
+        const text = result.savedNote;
+        navigator.clipboard.writeText(text)
+            .then(() => {
+                console.log('Text copied to clipboard!');
+                const copyToClipboardButton = document.getElementById('copy-button');
+                copyToClipboardButton.innerHTML = 'Copied!';
+                copyToClipboardButton.disabled = true;
+                setTimeout(() => {
+                    copyToClipboardButton.innerHTML = 'Copy to clipboard';
+                    copyToClipboardButton.disabled = false;
+                }, 2000);
+            })
+            .catch(err => {
+                console.error('Failed to copy text:  ', err);
+            });
+    });
+});
+
+// Load the saved note
+chrome.storage.sync.get(['savedNote'], (result) => {
+    const textarea = document.getElementById('note-textarea');
+    textarea.value = result.savedNote || '';
+});