move export_json to popup due to manifest v3 limit

Author: paulcoding810

src/assets/download.svg

@@ -1,6 +1,5 @@
 import colors from 'tailwindcss/colors'
 import { setBadge, setBadgeBackground } from '../utils/badge'
-import { save2Json } from '../utils/file'
 import { getValue, setValue } from '../utils/storage'
 import { createTab, getCurrentWindowTabsInfo } from '../utils/tabs'
 import devDB from './devdb'
@@ -99,20 +98,8 @@ if (!isProd) {
   })
 }
 
-chrome.contextMenus.create(
-  {
-    id: 'export_json',
-    title: 'Export JSON',
-    contexts: ['action'],
-  }
-)
-
 chrome.contextMenus.onClicked.addListener(async (info, tab) => {
   switch (info.menuItemId) {
-    case 'export_json':
-      const data = await getValue()
-      save2Json(data)
-      break
     case 'open_debug_tab':
       const b = import.meta.env.VITE_BROWSER
       const url = chrome.runtime.getURL(

src/background/index.js

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 import colors from 'tailwindcss/colors'
+import downloadIcon from '../assets/download.svg'
 import emptyIcon from '../assets/empty.svg'
 import groupsIcon from '../assets/workspaces.svg'
 import { messages } from '../background/message'
@@ -8,6 +9,7 @@ import Tab from '../components/Tab'
 import Groups from '../groups/Groups'
 import '../tailwind.css'
 import { setBadge, setBadgeBackground } from '../utils/badge'
+import { save2Json } from '../utils/file'
 import { getValue, setValue } from '../utils/storage'
 
 const setStorageAndUpdateBadge = (newTabs) => {
@@ -23,6 +25,10 @@ const setStorageAndUpdateBadge = (newTabs) => {
     })
 }
 
+const exportJson = async () => {
+  save2Json(await getValue(null, {}))
+}
+
 const getReadLaterDatabase = async () => {
   const storage = await getValue('read_later', [])
   return storage
@@ -83,6 +89,14 @@ export function Popup() {
       <div className="flex flex-row items-center h-8 gap-1">
         <SearchBar {...{ query, setQuery }} />
         <button
+          title="Export Data"
+          onClick={exportJson}
+          className="flex items-center justify-center w-8 h-8 p-1 border-2 border-blue-500 rounded hover:bg-blue-200"
+        >
+          <img src={downloadIcon} alt="Download" />
+        </button>
+        <button
+          title="Groups"
           onClick={() => setShowsGroups(!showsGroups)}
           className="flex items-center justify-center w-8 h-8 p-1 border-2 border-blue-500 rounded hover:bg-blue-200"
         >

src/popup/Popup.jsx

@@ -3,15 +3,14 @@
  */
 export function save2Json(data) {
   if (data) {
-    // not working for v3
-    // const blob = new Blob([JSON.stringify(data)], { type: 'text/plain' })
-    // const url = URL.createObjectURL(blob)
+    // for v3, this is not working for service worker context
+    const blob = new Blob([JSON.stringify(data)], { type: 'text/plain' })
+    const url = URL.createObjectURL(blob)
 
-    const url = `data:,${JSON.stringify(data, null, 2)}`
-    chrome.downloads.download({
-      url: url,
-      filename: `read_later_${new Date().toDateString().replaceAll(' ', '_')}.json`,
-      saveAs: true,
-    })
+    const link = document.createElement('a')
+    link.href = url
+    link.download = `read_later_${new Date().toDateString().replaceAll(' ', '_')}.json`
+    link.click()
+    link.remove()
   }
 }