Merge pull request #341 from penge/context-menu

Improve context menu with Save URL to "@clipboard"

README.md

@@ -66,7 +66,9 @@ To use Context menu, select the text on website, right-click and see "My Notes"
 Context menu has these options:
 
 - `Save to [note name]` – Option for every note. As you create new notes, they are automatically added to the list. My Notes doesn't have to be open. Google Drive Sync is not required.
-- `Save to remotely open My Notes` – My Notes on other computers needs to be open. The same Google Account needs to be used. Google Drive Sync is not required. The destination note to save the text will be named **"@Received"** (created automatically if it doesn't exist, otherwise updated).
+- `Save to remotely open My Notes` – My Notes on other computers needs to be open. The same Google Account needs to be used. Google Drive Sync is not required. The destination note to save the text will be named **"@received"** (created automatically if it doesn't exist, otherwise updated).
+
+Context menu also allows you to save current page URL (no text selected) to **"@clipboard"** (created automatically if it doesn't exist, otherwise updated).
 
 <br><br>
 

manifest.json

@@ -11,7 +11,8 @@
   "permissions": [
     "storage",
     "unlimitedStorage",
-    "contextMenus"
+    "contextMenus",
+    "notifications"
   ],
   "optional_permissions": [
     "identity"

src/background/init/context-menu.ts

@@ -1,23 +1,37 @@
-import { Log } from "shared/logger";
 import { NotesObject } from "shared/storage/schema";
 import {
   saveTextToLocalMyNotes,
   saveTextToRemotelyOpenMyNotes,
+  CLIPBOARD_NOTE_NAME,
 } from "./saving";
+import { notify } from "./notifications";
 
 const ID = "my-notes";
-const contexts: chrome.contextMenus.ContextType[] = ["selection"];
 
-const MY_NOTES_SAVE_TO_NOTE_PREFIX = "my-notes-save-to-note-";
-const MY_NOTES_SAVE_TO_REMOTE = "my-notes-save-to-remote";
+const MY_NOTES_SAVE_URL_TO_CLIPBOARD = "my-notes-save-url-to-clipboard";
+const MY_NOTES_SAVE_SELECTION_TO_CLIPBOARD = "my-notes-save-selection-to-clipboard";
 
-const getTextToSave = (info: chrome.contextMenus.OnClickData) => {
+const MY_NOTES_SAVE_SELECTION_TO_NOTE_PREFIX = "my-notes-save-selection-to-note-";
+const MY_NOTES_SAVE_SELECTION_TO_REMOTE = "my-notes-save-selection-to-remote";
+
+const getPageUrlHtml = (pageUrl: string) => `<a href="${pageUrl}" target="_blank">${pageUrl}</a>`;
+
+const getUrlToSave = (info: chrome.contextMenus.OnClickData) => {
+  const { pageUrl } = info;
+  const pageUrlHtml = getPageUrlHtml(pageUrl);
+  const toSave = `${pageUrlHtml}<br><br>`;
+  return toSave;
+};
+
+const getSelectionToSave = (info: chrome.contextMenus.OnClickData) => {
   const { pageUrl, selectionText } = info;
-  const pageUrlLink = pageUrl.startsWith("http") ? `<a href="${pageUrl}" target="_blank">${pageUrl}</a>` : pageUrl;
-  const textToSave = `${selectionText}<br><b>(${pageUrlLink})</b><br><br>`;
-  return textToSave;
+  const pageUrlHtml = getPageUrlHtml(pageUrl);
+  const toSave = `${selectionText}<br><b>(${pageUrlHtml})</b><br><br>`;
+  return toSave;
 };
 
+const isLocked = (notes: NotesObject, noteName: string): boolean => !!(notes[noteName]?.locked);
+
 /**
  * Creates My Notes Context menu
  *
@@ -30,28 +44,48 @@ const createContextMenu = (notes: NotesObject): void => {
   chrome.contextMenus.create({
     id: ID,
     title: "My Notes",
-    contexts,
+    contexts: ["page", "selection"],
   }, () => {
+    chrome.contextMenus.create({
+      parentId: ID,
+      id: MY_NOTES_SAVE_URL_TO_CLIPBOARD,
+      title: `Save URL to ${CLIPBOARD_NOTE_NAME}`,
+      contexts: ["page"],
+      enabled: !isLocked(notes, CLIPBOARD_NOTE_NAME),
+    });
+    chrome.contextMenus.create({
+      parentId: ID,
+      id: MY_NOTES_SAVE_SELECTION_TO_CLIPBOARD,
+      title: `Save to ${CLIPBOARD_NOTE_NAME}`,
+      contexts: ["selection"],
+      enabled: !isLocked(notes, CLIPBOARD_NOTE_NAME),
+    });
+    chrome.contextMenus.create({
+      parentId: ID,
+      id: "my-notes-separator-one",
+      type: "separator",
+      contexts: ["selection"],
+    });
     Object.keys(notes).sort().forEach((noteName) => {
       chrome.contextMenus.create({
         parentId: ID,
-        id: `${MY_NOTES_SAVE_TO_NOTE_PREFIX}${noteName}`,
+        id: `${MY_NOTES_SAVE_SELECTION_TO_NOTE_PREFIX}${noteName}`,
         title: `Save to ${noteName}`,
-        contexts,
-        enabled: notes[noteName].locked !== true,
+        contexts: ["selection"],
+        enabled: !isLocked(notes, noteName),
       });
     });
     chrome.contextMenus.create({
       parentId: ID,
-      id: "my-notes-separator",
+      id: "my-notes-separator-two",
       type: "separator",
-      contexts,
+      contexts: ["selection"],
     });
     chrome.contextMenus.create({
       parentId: ID,
-      id: MY_NOTES_SAVE_TO_REMOTE,
+      id: MY_NOTES_SAVE_SELECTION_TO_REMOTE,
       title: "Save to remotely open My Notes",
-      contexts,
+      contexts: ["selection"],
     });
   });
 };
@@ -60,18 +94,37 @@ let currentNotesString: string;
 
 export const attachContextMenuOnClicked = (): void => chrome.contextMenus.onClicked.addListener((info) => {
   const menuId: string = info.menuItemId.toString();
-  const textToSave = getTextToSave(info);
 
-  if (menuId.startsWith(MY_NOTES_SAVE_TO_NOTE_PREFIX)) {
-    const destinationNoteName = menuId.replace(MY_NOTES_SAVE_TO_NOTE_PREFIX, "");
-    Log(`Context menu is saving text to ${destinationNoteName}`);
-    saveTextToLocalMyNotes(textToSave, destinationNoteName);
+  if (menuId === MY_NOTES_SAVE_URL_TO_CLIPBOARD) {
+    const urlToSave = getUrlToSave(info);
+    saveTextToLocalMyNotes(urlToSave, CLIPBOARD_NOTE_NAME);
+
+    notify(`Saved URL to ${CLIPBOARD_NOTE_NAME}`);
+    return;
+  }
+
+  if (menuId === MY_NOTES_SAVE_SELECTION_TO_CLIPBOARD) {
+    const selectionToSave = getSelectionToSave(info);
+    saveTextToLocalMyNotes(selectionToSave, CLIPBOARD_NOTE_NAME);
+
+    notify(`Saved text to ${CLIPBOARD_NOTE_NAME}`);
+    return;
+  }
+
+  if (menuId.startsWith(MY_NOTES_SAVE_SELECTION_TO_NOTE_PREFIX)) {
+    const destinationNoteName = menuId.replace(MY_NOTES_SAVE_SELECTION_TO_NOTE_PREFIX, "");
+    const selectionToSave = getSelectionToSave(info);
+    saveTextToLocalMyNotes(selectionToSave, destinationNoteName);
+
+    notify(`Saved text to ${destinationNoteName}`);
     return;
   }
 
-  if (info.menuItemId === MY_NOTES_SAVE_TO_REMOTE) {
-    Log("Context menu is saving text to be picked up by the remotely open My Notes");
-    saveTextToRemotelyOpenMyNotes(textToSave);
+  if (info.menuItemId === MY_NOTES_SAVE_SELECTION_TO_REMOTE) {
+    const selectionToSave = getSelectionToSave(info);
+    saveTextToRemotelyOpenMyNotes(selectionToSave);
+
+    notify("Sent text to remotely open My Notes");
     return;
   }
 });

src/background/init/notifications.ts

@@ -13,3 +13,11 @@ export const showNewVersionNotification = (details: chrome.runtime.InstalledDeta
 
   chrome.storage.local.set({ notification });
 };
+
+// Shows a Chrome notification in the top-right corner
+export const notify = (message: string) => chrome.notifications.create({
+  type: "basic",
+  title: "My Notes",
+  message,
+  iconUrl: "images/icon128.png",
+});

src/background/init/saving.ts

@@ -5,6 +5,9 @@ import {
   Message,
 } from "shared/storage/schema";
 
+export const CLIPBOARD_NOTE_NAME = "@clipboard";
+const RECEIVED_NOTE_NAME = "@received";
+
 export const saveTextToLocalMyNotes = (textToSave: string, noteName: string): void => {
   chrome.storage.local.get(["notes"], local => {
     const notes = local.notes as NotesObject;
@@ -93,7 +96,7 @@ export const saveTextOnRemoteTransfer = (): void => {
           return;
         }
 
-        saveTextToLocalMyNotes(selection.text, "@Received");
+        saveTextToLocalMyNotes(selection.text, RECEIVED_NOTE_NAME);
       });
     }
   });