add index.html

yuriten · Aug 16, 2023 · 2ada003 · 2ada003
1 parent 962c69d
commit 2ada003
Showing 1 changed file with 97 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,97 @@
+<html lang="en-US">
+  <body style="display: flex; flex-direction: column">
+    <div style="padding-bottom: 10px; border-bottom: 2px solid black">
+      <h3>Step1: Click the file picker, choose StorableSidebar.json</h3>
+      <input type="file" id="file" />
+    </div>
+
+    <div style="padding-bottom: 10px; border-bottom: 2px solid black">
+      <div style="display: flex; flex-direction: column; width: 300px">
+        <h3>Step2: Click download button</h3>
+        <textarea id="result" rows="10" cols="30"></textarea>
+        <button id="download" style="margin-top: 10px">download</button>
+      </div>
+    </div>
+
+    <div style="padding-bottom: 10px; border-bottom: 2px solid black">
+      <h3>Step3: Import to Chrome</h3>
+      Select the file you just downloaded in Chrome's Import Bookmarks feature
+    </div>
+
+    <script>
+      const formatItems = (items) => {
+        const bookmarks = []
+
+        items.forEach((item) => {
+          if (typeof item !== 'string') {
+            const { data } = item.value
+            if (data?.tab) {
+              const { savedTitle, savedURL, timeLastActiveAt } = data.tab
+              bookmarks.push(
+                `<DT><A HREF="${savedURL}" ADD_DATE="${Math.floor(
+                  timeLastActiveAt,
+                )}">${savedTitle}</A></DT>`,
+              )
+            } else {
+              // 书签的层级结构，忽略掉
+            }
+          }
+        })
+
+        const html = `<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
+      <TITLE>Bookmarks</TITLE>
+      <H1>Bookmarks</H1>
+      <DL><p>
+      ${bookmarks.join('\n')}
+      </DL><p>`
+        document.querySelector('#result').value = html
+      }
+
+      const readFile = () => {
+        var selectedFile = document.querySelector('#file').files[0]
+
+        var reader = new FileReader()
+        reader.readAsText(selectedFile)
+
+        reader.onload = () => {
+          let json = JSON.parse(reader.result)
+          // let items = json.sidebar.containers.[1].items // maybe it's work, not sure
+          let items = json.sidebarSyncState.items
+          formatItems(items)
+        }
+      }
+
+      const downloadFile = () => {
+        const textarea = document.querySelector('#result')
+        const quicklyDownload = (content, filename) => {
+          var eleLink = document.createElement('a')
+          eleLink.download = filename
+          eleLink.style.display = 'none'
+          var blob = new Blob([content])
+          eleLink.href = URL.createObjectURL(blob)
+          document.body.appendChild(eleLink)
+          eleLink.click()
+          document.body.removeChild(eleLink)
+        }
+        quicklyDownload(textarea.value, 'bookmarks.html')
+      }
+
+      const bindFileReader = () => {
+        const inputElement = document.querySelector('#file')
+        inputElement.addEventListener('change', readFile, false)
+      }
+
+      const bindDownload = () => {
+        const downloadButton = document.querySelector('#download')
+        downloadButton.addEventListener('click', downloadFile)
+      }
+
+      const __main = () => {
+        bindFileReader()
+        bindDownload()
+      }
+
+      __main()
+    </script>
+  </body>
+</html>