5 files changed, 74 insertions, 39 deletions

diff --git a/.gitignore b/.gitignore
index b42d1dc..4602e8a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@ docs/
 addon/**js
 addon/**css
 !addon/index**
+!addon/background**
 doc-coverage/
 node_modules/
 package-lock.json
diff --git a/addon/background.js b/addon/background.js
new file mode 100644
index 0000000..24771aa
--- /dev/null
+++ b/addon/background.js
@@ -0,0 +1,16 @@
+console.log('background')
+
+browser.contextMenus.create(
+  {
+    id: 'map-inline',
+    title: 'MapInline',
+    contexts: ['page', 'selection'],
+  },
+  () => void browser.runtime.lastError,
+)
+
+browser.contextMenus.onClicked.addListener((info, tab) => {
+  if (info.menuItemId !== 'map-inline') return
+
+  browser.tabs.sendMessage(tab.id, 'map-inline')
+})
diff --git a/addon/index.mjs b/addon/index.mjs
index 5776a18..b9fc349 100644
--- a/addon/index.mjs
+++ b/addon/index.mjs
@@ -1,3 +1,13 @@
+browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  console.log('receive message', message)
+  sendResponse('received')
+  if (message === 'map-inline') {
+    alert('map')
+    return Promise.resolve('done')
+  }
+  return false
+})
+
 const url = new URL(window.location)
 const use = url.searchParams.get('use')
 if (url.host === 'www.ptt.cc') {
@@ -41,6 +51,6 @@ if (!document.querySelector('.Dumby')) {
     addBlocks,
     initialLayout: 'sticky',
     render: simpleRender,
-    autoMap: true,
+    autoMap: false,
   })
 }
diff --git a/addon/manifest.json b/addon/manifest.json
index b95fd4b..c354f65 100644
--- a/addon/manifest.json
+++ b/addon/manifest.json
@@ -27,10 +27,18 @@
     }
   ],
 
+  "background": {
+    "scripts": [
+      "background.js"
+    ],
+    "persistent": false
+  },
+
   "permissions": [
     "activeTab",
     "tabs",
     "scripting",
+    "contextMenus",
     "https://epsg.io/*",
     "https://cdn.jsdelivr.net/*"
   ]
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index 7d24e45..a7b0394 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -530,44 +530,44 @@ export const generateMaps = (container, {
   }
   container.appendChild(menu)
 
-  /** Menu Items for Context Menu */
-  container.oncontextmenu = e => {
-    menu.replaceChildren()
-    menu.style.display = 'block'
-    menu.style.cssText = `left: ${e.clientX - menu.offsetParent.offsetLeft + 10}px; top: ${e.clientY - menu.offsetParent.offsetTop + 5}px;`
-    e.preventDefault()
-
-    // Menu Items for map
-    const map = e.target.closest('.mapclay')
-    if (map?.renderer?.results) {
-      const rect = map.getBoundingClientRect()
-      const [x, y] = [e.x - rect.left, e.y - rect.top]
-      menu.appendChild(menuItem.toggleMapFocus(map))
-      menu.appendChild(menuItem.renderResults(dumbymap, map))
-      menu.appendChild(menuItem.getCoordinatesByPixels(map, [x, y]))
-      menu.appendChild(menuItem.restoreCamera(map))
-    } else {
-      // Toggle block focus
-      const block = e.target.closest('.dumby-block')
-      if (block) {
-        menu.appendChild(menuItem.toggleBlockFocus(block))
-      }
-    }
-
-    // Menu Items for map/block/layout
-    if (!map || map.closest('.Showcase')) {
-      if (dumbymap.utils.renderedMaps().length > 0) {
-        menu.appendChild(menuItem.pickMapItem(dumbymap))
-      }
-      menu.appendChild(menuItem.pickBlockItem(dumbymap))
-      menu.appendChild(menuItem.pickLayoutItem(dumbymap))
-    }
-
-    shiftByWindow(menu)
-
-    return menu
-  }
-
+  // /** Menu Items for Context Menu */
+  // container.oncontextmenu = e => {
+  //   menu.replaceChildren()
+  //   menu.style.display = 'block'
+  //   menu.style.cssText = `left: ${e.clientX - menu.offsetParent.offsetLeft + 10}px; top: ${e.clientY - menu.offsetParent.offsetTop + 5}px;`
+  //   e.preventDefault()
+  //
+  //   // Menu Items for map
+  //   const map = e.target.closest('.mapclay')
+  //   if (map?.renderer?.results) {
+  //     const rect = map.getBoundingClientRect()
+  //     const [x, y] = [e.x - rect.left, e.y - rect.top]
+  //     menu.appendChild(menuItem.toggleMapFocus(map))
+  //     menu.appendChild(menuItem.renderResults(dumbymap, map))
+  //     menu.appendChild(menuItem.getCoordinatesByPixels(map, [x, y]))
+  //     menu.appendChild(menuItem.restoreCamera(map))
+  //   } else {
+  //     // Toggle block focus
+  //     const block = e.target.closest('.dumby-block')
+  //     if (block) {
+  //       menu.appendChild(menuItem.toggleBlockFocus(block))
+  //     }
+  //   }
+  //
+  //   // Menu Items for map/block/layout
+  //   if (!map || map.closest('.Showcase')) {
+  //     if (dumbymap.utils.renderedMaps().length > 0) {
+  //       menu.appendChild(menuItem.pickMapItem(dumbymap))
+  //     }
+  //     menu.appendChild(menuItem.pickBlockItem(dumbymap))
+  //     menu.appendChild(menuItem.pickLayoutItem(dumbymap))
+  //   }
+  //
+  //   shiftByWindow(menu)
+  //
+  //   return menu
+  // }
+  //
   /** Event Handler when clicking outside of Context Manu */
   const actionOutsideMenu = e => {
     if (menu.style.display === 'none') return