feat: open link brings the note-id so can jump to note also

src/content-scripts/main.ts

@@ -5,10 +5,11 @@ import "element-plus/theme-chalk/index.css";
 import { ClickOutside } from "@element-plus/directives";
 
 import { Note } from "@/types/note";
+import { Query } from "@/types/dom";
 import { get } from "@/utils/storage";
 import mitt, { sendEmitAndWait } from "@/utils/mitt";
 import { StorageKeys } from "@/utils/constant";
-import { removeUrlPostfix } from "@/utils/utils";
+import { getUrlQuery, removeUrlPostfix } from "@/utils/utils";
 import Popup from "./renderer/popup/index.vue";
 import { parseRectsAndTextFromSelection } from "./parser/selection-meta";
 import { getFormattedTextFromTextList } from "./parser/text-list";
@@ -94,8 +95,16 @@ async function renderNoteHighlightRects() {
   });
 }
 
-delHighlightRects();
-renderNoteHighlightRects();
+async function initializeExtension() {
+  const { noteId = '' } = getUrlQuery(window.location.href) as Query;
+  delHighlightRects();
+  await renderNoteHighlightRects();
+  if (noteId) {
+    await sendEmitAndWait("select-note", noteId);
+    (vm as any).visible = true;
+  }
+}
+initializeExtension();
 
 // listen url change to redraw rects
 // !NOTE: need `setTimeout` to work correctly
@@ -110,8 +119,6 @@ setTimeout(() => {
   }).observe(document, { subtree: true, childList: true });
 
   function onUrlChange() {
-    console.log('url update');
-    delHighlightRects();
-    renderNoteHighlightRects();
+    initializeExtension();
   }
 });

src/content-scripts/renderer/popup/note-book/note-list.vue

@@ -5,6 +5,7 @@
       @onChange="handle"
       placeholder="search your notes.."
       class="note-list-search"
+      size="mini"
     >
       <template #prefix>
         <i class="el-input__icon el-icon-search"></i>

src/content-scripts/renderer/popup/note-book/note.vue

@@ -6,21 +6,7 @@
     @click="handleClickNote"
   >
     <!-- website link -->
-    <el-tooltip placement="left">
-      <div :id="`link-${note.id}`" class="note-link">{{ note.link }}</div>
-      <template #content>
-        {{ note.link }}
-        <div class="note-link-opers">
-          <span
-            class="note-link-oper"
-            v-clipboard:copy="note.link"
-            v-clipboard:success="handleCopy"
-            >Copy</span
-          >
-          <span class="note-link-oper" @click="handleOpenLink(note.link)">Open</span>
-        </div>
-      </template>
-    </el-tooltip>
+    <div :id="`link-${note.id}`" class="note-link"><span @click="handleOpenLink(note)" class="note-link-content">{{ note.link }}</span></div>
     <!-- opers area -->
     <div class="note-opers">
       <!-- delete icon -->
@@ -97,8 +83,10 @@ import { Note } from "@/types/note";
 import { Tag } from "@/types/tag";
 import { Storage } from "@/types/storage";
 import { Coor } from "@/types/common";
+import { Query } from "@/types/dom";
 import mitt from "@/utils/mitt";
 import TagBook from "../tag-book/index.vue";
+import { wrapUrlWithQuery } from '@/utils/utils';
 
 export default {
   components: {
@@ -132,8 +120,12 @@ export default {
     const handleCopy = () => {
       ElMessage.success("Copied");
     };
-    const handleOpenLink = (link: string) => {
-      window.open(link);
+    const handleOpenLink = (note: Note) => {
+      const query: Query = {
+        noteId: note.id
+      }
+      const url = wrapUrlWithQuery(note.link, query)
+      window.open(url);
     };
 
     /// is note selected or not
@@ -282,6 +274,8 @@ export default {
     overflow: hidden;
     width: 400px;
     color: #409eff;
+  }
+  .note-link-content {
     cursor: pointer;
   }
 

src/types/dom.ts

@@ -0,0 +1,3 @@
+export interface Query {
+    noteId: string;
+}

src/utils/utils.ts

@@ -6,6 +6,24 @@ export const getObjectType = (obj: any) => Object.prototype.toString.call(obj);
 
 export const removeUrlPostfix = (url: string) => {
   let res = url.split("?")?.[0] ?? "";
-  res = url.split("#")?.[0] ?? "";
+  res = res.split("#")?.[0] ?? "";
   return res;
 };
+
+export const getUrlQuery = (url: string) => {
+  const queryStr = url.split("?")?.[1] ?? "";
+  const res = Object.fromEntries(
+    queryStr.split("&").map((part) => {
+      return part.split("=");
+    })
+  );
+  return res;
+};
+
+export const wrapUrlWithQuery = (
+  url: string,
+  query: { [key: string]: any }
+) => {
+  if (!query || Object.keys(query).length === 0) return url;
+  return `${url}?${Object.entries(query).map(e => e.join('=')).join('&')}`;
+};

todo.md

@@ -4,7 +4,9 @@
 - [x] show the rects at initial state if this page has
 - [x] delete note
 - [x] url change clear the highlights
-- [ ] more precise rects selection rather than coor (select the real dom by text)
-- [ ] open link brings the note-id so can jump to note also
+- [x] open link brings the note-id so can jump to note also
 - [x] delete the tag while deleting a note who is the only one that owns this tag
-- [x] searching notes
+- [x] searching notes
+- [ ] more precise rects selection rather than coor (select the real dom by text)
+- [ ] screenshot features
+  - https://javascript.plainenglish.io/a-better-alternative-to-html2canvas-in-vuejs-3-e0686755d56e