support right menu

manifest.json

@@ -30,6 +30,7 @@
   },
   "permissions": [
     "storage",
-    "clipboardRead"
+    "clipboardRead",
+    "contextMenus"
   ]
 }

src/background/index.ts

@@ -1,7 +1,27 @@
-import type { MessagePayload } from "@/common/types"
+import { EventName, launch_writely } from '@/common/event-name';
+import type { MessagePayload } from '@/common/types';
 
-chrome.runtime.onMessage.addListener(async (message: MessagePayload) => {
-  if (message.type === 'open-options-page') {
-    chrome.runtime.openOptionsPage()
+chrome.runtime.onMessage.addListener(
+  async (message: MessagePayload<EventName.openOptionsPage>) => {
+    if (message.type === 'open-options-page') {
+      chrome.runtime.openOptionsPage();
+    }
   }
-})
+);
+
+chrome.contextMenus.create({
+  title: 'Writely',
+  id: 'writely',
+  contexts: ['selection'],
+  // onclick: (info) => {
+  //   chrome.runtime.sendMessage(launch_writely);
+  // },
+});
+
+chrome.contextMenus.onClicked.addListener((info, tab) => {
+  if (info.menuItemId === 'writely' && tab.id) {
+    chrome.tabs.sendMessage(tab.id, {
+      type: EventName.launchWritely,
+    });
+  }
+});

src/common/event-name.ts

@@ -0,0 +1,6 @@
+export const launch_writely = 'launch-writely';
+
+export enum EventName {
+  launchWritely = 'launch-writely',
+  openOptionsPage = 'open-options-page',
+}

src/common/types.d.ts

@@ -1,3 +1,5 @@
-export type MessagePayload = {
-  type: 'open-options-page'
-}
+import { EventName } from './event-name';
+
+export type MessagePayload<T extends EventName> = {
+  type: T;
+};

src/content/container/ask-writely/result-panel/header.tsx

@@ -10,6 +10,7 @@ import { useView } from '../../store/view';
 import i18next from 'i18next';
 import { useResultPanel } from '../../store/result-panel';
 import type { MessagePayload } from '@/common/types';
+import { EventName } from '@/common/event-name';
 
 export const Header: React.FC = () => {
   const { hide, goToInputPage } = useView();
@@ -52,8 +53,10 @@ export const Header: React.FC = () => {
         />
         <Operation
           onClick={() => {
-            chrome.runtime.sendMessage<MessagePayload>({
-              type: 'open-options-page',
+            chrome.runtime.sendMessage<
+              MessagePayload<EventName.openOptionsPage>
+            >({
+              type: EventName.openOptionsPage,
             });
           }}
           icon={<DashiconsAdminGeneric />}

src/content/container/store/view.ts

@@ -1,3 +1,5 @@
+import { EventName } from '@/common/event-name';
+import { MessagePayload } from '@/common/types';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { createContainer } from 'unstated-next';
 import { useSelectionManager } from './selection';
@@ -70,6 +72,22 @@ const { useContainer: useView, Provider: ViewProvider } = createContainer(
       };
     }, []);
 
+    useEffect(() => {
+      const listener = (message: MessagePayload<EventName.launchWritely>) => {
+        if (message.type !== EventName.launchWritely) {
+          return;
+        }
+
+        if (viewStatusRef.current === 'none') {
+          goToInputPage();
+        }
+      };
+
+      chrome.runtime.onMessage.addListener(listener);
+
+      return () => chrome.runtime.onMessage.removeListener(listener);
+    }, []);
+
     return {
       viewStatus,
       goToInputPage,

src/content/utils/selection/index.ts

@@ -46,8 +46,6 @@ export class SelectionManager {
       this.savedRange = this.selection.getRangeAt(0).cloneRange();
       this.setText();
     } else {
-      // this.restoreRange();
-      this.setText();
       this.textPasted = false;
     }
   }