"save note" is now "save link with note" - i.e. we're saving a current URL together with the text note

background.js

@@ -237,18 +237,25 @@ async function saveWholePage() {
 	toast("Page has been saved to Trilium.", resp.noteId);
 }
 
-async function saveNote(title, content) {
+async function saveLinkWithNote(title, content) {
+	const activeTab = await getActiveTab();
+
+	if (!title.trim()) {
+		title = activeTab.title;
+	}
+
 	const resp = await triliumServerFacade.callService('POST', 'notes', {
 		title: title,
 		content: content,
-		clipType: 'note'
+		clipType: 'note',
+		pageUrl: activeTab.url
 	});
 
 	if (!resp) {
 		return false;
 	}
 
-	toast("Note has been saved to Trilium.", resp.noteId);
+	toast("Link with note has been saved to Trilium.", resp.noteId);
 
 	return true;
 }
@@ -330,8 +337,8 @@ browser.runtime.onMessage.addListener(async request => {
 	else if (request.name === 'save-whole-page') {
 		return await saveWholePage();
 	}
-	else if (request.name === 'save-note') {
+	else if (request.name === 'save-link-with-note') {
-		return await saveNote(request.title, request.content);
+		return await saveLinkWithNote(request.title, request.content);
 	}
 	else if (request.name === 'trigger-trilium-search') {
 		triliumServerFacade.triggerSearchForTrilium();

content.js

@@ -23,24 +23,6 @@ function pageTitle() {
 	return titleElements.length ? titleElements[0].text.trim() : document.title.trim();
 }
 
-function getPageLocationOrigin() {
-	// location.origin normally returns the protocol + domain + port (eg. https://example.com:8080)
-	// but for file:// protocol this is browser dependant and in particular Firefox returns "null" in this case.
-	return location.protocol === 'file:' ? 'file://' : location.origin;
-}
-
-function getBaseUrl() {
-	let output = getPageLocationOrigin() + location.pathname;
-
-	if (output[output.length - 1] !== '/') {
-		output = output.split('/');
-		output.pop();
-		output = output.join('/');
-	}
-
-	return output;
-}
-
 function getReadableDocument() {
 	// Readability directly change the passed document so clone it so as
 	// to preserve the original web page.

popup/popup.css

@@ -24,11 +24,11 @@ body {
   width: 100%;
 }
 
-#create-text-note-wrapper {
+#save-link-with-note-wrapper {
   display: none;
 }
 
-#create-text-note-textarea {
+#save-link-with-note-textarea {
   width: 100%;
 }
 

popup/popup.html

@@ -20,10 +20,10 @@
 
   <button class="button full needs-connection" id="clip-screenshot-button">Clip screenshot</button>
   <button class="button full needs-connection" id="save-whole-page-button">Save whole page</button>
-  <button class="button full needs-connection" id="create-text-note-button">Create text note</button>
+  <button class="button full needs-connection" id="save-link-with-note-button">Save link with a note</button>
 
-  <div id="create-text-note-wrapper">
+  <div id="save-link-with-note-wrapper">
-    <textarea id="create-text-note-textarea" rows="5"></textarea>
+    <textarea id="save-link-with-note-textarea" rows="5"></textarea>
 
     <div style="display: flex;">
       <button type="submit" class="button wide" id="save-button">Save</button>
@@ -41,6 +41,7 @@
   <script src="../lib/browser-polyfill.js"></script>
   <script src="../lib/cash.min.js"></script>
   <script src="popup.js"></script>
+  <script src="../utils.js"></script>
 </body>
 
 </html>

popup/popup.js

@@ -19,54 +19,55 @@ $clipScreenShotButton.on("click", () => sendMessage({name: 'save-screenshot'}));
 
 $saveWholePageButton.on("click", () => sendMessage({name: 'save-whole-page'}));
 
-const $createTextNoteWrapper = $("#create-text-note-wrapper");
+const $saveLinkWithNoteWrapper = $("#save-link-with-note-wrapper");
-const $textNote = $("#create-text-note-textarea");
+const $textNote = $("#save-link-with-note-textarea");
 
 $textNote.on('keypress', function (event) {
-    if (event.which === 10 || event.which === 13 && event.ctrlKey) {
+    if ((event.which === 10 || event.which === 13) && event.ctrlKey) {
-        saveNote();
+        saveLinkWithNote();
         return false;
     }
 
     return true;
 });
 
-$("#create-text-note-button").on("click", () => {
+$("#save-link-with-note-button").on("click", () => {
-    $createTextNoteWrapper.show();
+    $saveLinkWithNoteWrapper.show();
 
     $textNote[0].focus();
 });
 
 $("#cancel-button").on("click", () => {
-    $createTextNoteWrapper.hide();
+    $saveLinkWithNoteWrapper.hide();
     $textNote.val("");
 
     window.close();
 });
 
-async function saveNote() {
+async function saveLinkWithNote() {
     const textNoteVal = $textNote.val().trim();
-
-    if (textNoteVal.length === 0) {
-        alert("Note is empty. Please enter some text");
-        return;
-    }
-
-    const match = /^(.*?)([.?!]\s|\n)/.exec(textNoteVal);
     let title, content;
 
-    if (match) {
+    if (!textNoteVal) {
-        title = match[0].trim();
+        title = '';
-        content = textNoteVal.substr(title.length).trim();
+        content = '';
     }
     else {
-        title = textNoteVal;
+        const match = /^(.*?)([.?!]\s|\n)/.exec(textNoteVal);
-        content = '';
+
+        if (match) {
+            title = match[0].trim();
+            content = textNoteVal.substr(title.length).trim();
+        }
+        else {
+            title = textNoteVal;
+            content = '';
+        }
     }
 
     content = escapeHtml(content);
 
-    const result = await sendMessage({name: 'save-note', title, content});
+    const result = await sendMessage({name: 'save-link-with-note', title, content});
 
     if (result) {
         $textNote.val('');
@@ -75,7 +76,7 @@ async function saveNote() {
     }
 }
 
-$("#save-button").on("click", saveNote);
+$("#save-button").on("click", saveLinkWithNote);
 
 $("#show-help-button").on("click", () => {
     window.open("https://github.com/zadam/trilium/wiki/Web-clipper", '_blank');

utils.js

@@ -8,3 +8,21 @@ function randomString(len) {
 
     return text;
 }
+
+function getBaseUrl() {
+    let output = getPageLocationOrigin() + location.pathname;
+
+    if (output[output.length - 1] !== '/') {
+        output = output.split('/');
+        output.pop();
+        output = output.join('/');
+    }
+
+    return output;
+}
+
+function getPageLocationOrigin() {
+    // location.origin normally returns the protocol + domain + port (eg. https://example.com:8080)
+    // but for file:// protocol this is browser dependant and in particular Firefox returns "null" in this case.
+    return location.protocol === 'file:' ? 'file://' : location.origin;
+}