feat: highlight text selection on tab page

src/background/contextMenu.js

@@ -0,0 +1,58 @@
+/**
+ * @file contextMenu.js
+ * @description Creates context menus
+ * @see {@link https://developer.chrome.com/docs/extensions/reference/api/contextMenus}
+ */
+
+console.log("contextMenu.js");
+
+chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
+    // if loading completed, add context menus
+    if (changeInfo.status === "complete" && tab.status === "complete") {
+        createContextMenus();
+    }
+
+    // create context menus
+    function createContextMenus() {
+        chrome.contextMenus.removeAll();
+
+        // To highlight selected text
+        chrome.contextMenus.create({
+            id: "hm-highlight",
+            title: "Highlight",
+            contexts: ["selection"],
+        });
+
+        // Register listener for context menu click
+        chrome.contextMenus.onClicked.addListener((info, tab) => {
+            // console.log("info", info);
+            // console.log("tab", tab);
+
+            // Handle highlight selected text
+            if (info.menuItemId === "hm-highlight") {
+                chrome.tabs.sendMessage(tab.id, { type: "highlightSelection" }, (response) => {
+                    if (response) {
+                        // const modelInfo = {
+                        //     innerType: "highlightSelection",
+                        //     tabUrl: tab.url,
+                        //     path: response.path,
+                        //     text: response.text,
+                        //     classId: response.classId,
+                        // };
+                        // updateModel(modelInfo);
+                        chrome.runtime.sendMessage(
+                            {
+                                tab: tab,
+                                type: "highlightHistoryMap",
+                                text: response.text,
+                                path: response.path,
+                                classId: response.classId,
+                                picture: null,
+                            }
+                        );
+                    }
+                });
+            }
+        });
+    }
+});

src/content-script/content.js

@@ -1 +1,19 @@
-console.log("content.js loaded");
+console.log("history map content.js loading");
+
+// Copy from old-historymap/src/contentScript/contentScripts.js
+
+const contentScript = function () {
+    const contentScript = {
+        view: {
+        },
+        controller: {
+        }
+    };
+    return contentScript;
+}();
+
+contentScript.controller.contentScriptController = contentScriptController;
+contentScriptController();
+
+contentScript.view.highlight = highlight;
+highlight();

src/content-script/contentScriptsController.js

@@ -0,0 +1,55 @@
+/**
+ * @file contentScriptsController.js
+ * @description Controller for content scripts
+ * Reference: old-historymap/src/contentScript/contentScriptsController.js
+ */
+
+contentScriptController = function () {
+    // Only run after the background page opens. 
+    chrome.runtime.sendMessage({ type: "backgroundOpened" }, function (response) {
+        if (!response) return;
+
+        // If page uses ajax, we don't know when it's actually complete such as google search result page.
+        // Naively wait one more second.
+        // setTimeout(function () {
+        //     loadHighlights(response.url);
+        // }, 2000);
+
+
+        // // Want to know if a link is clicked. Used for detecting page linking relationship.
+        // injectLinks();
+        // completePendingTask();
+        respondExtension();
+    });
+};
+
+function respondExtension() {
+    chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
+        //console.log("controller got a message " + JSON.stringify(request));    
+		// if (request.type === "scrollToElement") {
+        //     scrollTo(request);
+        // } else if (request.type === 'askReferrer') {
+        //     sendResponse(document.referrer);
+        // } else 
+
+        // response to highlightSelection
+        if (request.type === 'highlightSelection') {
+            highlightSelection(sendResponse);
+        }
+
+        // else if (request.type === 'highlightImage') {
+        //     changeHighlightImage(request.srcUrl, request.pageUrl, true, sendResponse);
+        // } else if (request.type === 'removeHighlightImage') {
+        //     changeHighlightImage(request.srcUrl, request.pageUrl, false, sendResponse);
+        // }
+    });
+}
+
+function highlightSelection(sendResponse) {
+    var highlightResponse;
+    var selection = getSelection();
+    if (!selection || selection.type !== "Range") return;
+    highlightResponse = $.highlight(selection);
+    sendResponse(highlightResponse);
+    selection.empty();
+}