add import tab to import bookmarks and history

Author: pirate

redesign/background.js

@@ -19,9 +19,9 @@ chrome.action.onClicked.addListener(async (tab) => {
   };
 
   // Save the entry first
-  const { entries = [] } = await chrome.storage.sync.get('entries');
+  const { entries = [] } = await chrome.storage.local.get('entries');
   entries.push(entry);
-  await chrome.storage.sync.set({ entries });
+  await chrome.storage.local.set({ entries });
 
   // Inject scripts - CSS now handled in popup.js
   await chrome.scripting.executeScript({

redesign/manifest.json

@@ -7,7 +7,10 @@
     "storage",
     "scripting",
     "tabs",
-    "activeTab"
+    "activeTab",
+    "history",
+    "bookmarks",
+    "unlimitedStorage"
   ],
   "host_permissions": [
     "<all_urls>"

redesign/options.html

@@ -107,6 +107,9 @@
     <li class="nav-item">
       <a class="nav-link" id="personas-tab" data-bs-toggle="tab" href="#personas" role="tab">Personas</a>
     </li>
+    <li class="nav-item">
+      <a class="nav-link" id="import-tab" data-bs-toggle="tab" href="#import" role="tab">Import</a>
+    </li>
   </ul>
 
   <div class="tab-content">
@@ -229,6 +232,52 @@ <h2>All Tags</h2>
         </div>
       </div>
     </div>
+
+    <!-- Import Tab -->
+    <div class="tab-pane fade" id="import" role="tabpanel">
+      <div class="row mt-4">
+        <div class="col-md-8">
+          <h2>Import from Chrome</h2>
+          
+          <div class="mb-4">
+            <h4>History</h4>
+            <div class="input-group mb-3">
+              <input type="number" class="form-control" id="historyDays" value="7" min="1" max="90">
+              <span class="input-group-text">days of history</span>
+              <button class="btn btn-outline-secondary" type="button" id="loadHistory">Load History</button>
+            </div>
+          </div>
+
+          <div class="mb-4">
+            <h4>Bookmarks</h4>
+            <button class="btn btn-outline-secondary mb-3" type="button" id="loadBookmarks">Load Bookmarks</button>
+          </div>
+
+          <div class="mb-3">
+            <input type="search" class="form-control" id="importFilter" placeholder="Filter URLs...">
+          </div>
+
+          <div class="form-check mb-3">
+            <input class="form-check-input" type="checkbox" id="showOnlyNew">
+            <label class="form-check-label" for="showOnlyNew">
+              Show only URLs not already in ArchiveBox
+            </label>
+          </div>
+
+          <div id="importList" class="list-group mb-3">
+            <!-- Items will be added here dynamically -->
+          </div>
+
+          <div class="d-flex gap-2">
+            <button class="btn btn-primary" id="importSelected" disabled>
+              Import Selected (<span id="selectedCount">0</span>)
+            </button>
+            <button class="btn btn-outline-secondary" id="selectAll">Select All</button>
+            <button class="btn btn-outline-secondary" id="deselectAll">Deselect All</button>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 
   <script src="bootstrap.bundle.min.js"></script>

redesign/options.js

@@ -18,7 +18,7 @@ function filterEntries(entries, filterText) {
 }
 
 async function renderEntries(filterText = '', tagFilter = '') {
-  const { entries = [] } = await chrome.storage.sync.get('entries');
+  const { entries = [] } = await chrome.storage.local.get('entries');
 
   if (!window.location.search.includes(filterText)) {
     window.history.pushState({}, '', `?search=${filterText}`);
@@ -111,7 +111,7 @@ function downloadJson(entries) {
 
 // Add this function near the other event handlers
 async function handleDeleteFiltered(filterText = '') {
-  const { entries = [] } = await chrome.storage.sync.get('entries');
+  const { entries = [] } = await chrome.storage.local.get('entries');
   const filteredEntries = filterEntries(entries, filterText);
 
   if (!filteredEntries.length) {
@@ -132,15 +132,15 @@ async function handleDeleteFiltered(filterText = '') {
   const remainingEntries = entries.filter(e => !idsToDelete.has(e.id));
 
   // Save remaining entries
-  await chrome.storage.sync.set({ entries: remainingEntries });
+  await chrome.storage.local.set({ entries: remainingEntries });
 
   // Refresh the view
   await renderEntries(filterText);
 }
 
 // Add these functions near the top
 async function loadConfig() {
-  const config = await chrome.storage.sync.get([
+  const config = await chrome.storage.local.get([
     'archivebox_server_url', 
     'archivebox_api_key',    // Added this
     'match_urls', 
@@ -181,7 +181,7 @@ function createAutosaveHandler() {
         exclude_urls: document.getElementById('exclude_urls').value || ''
       };
 
-      await chrome.storage.sync.set(config);
+      await chrome.storage.local.set(config);
 
       status_div.textContent = 'Saved.';
       setTimeout(() => {
@@ -319,7 +319,7 @@ async function testApiKey() {
 
 // Add this function near the other utility functions
 async function syncToArchiveBox(entry) {
-  const { archivebox_server_url, archivebox_api_key } = await chrome.storage.sync.get([
+  const { archivebox_server_url, archivebox_api_key } = await chrome.storage.local.get([
     'archivebox_server_url',
     'archivebox_api_key'
   ]);
@@ -358,7 +358,7 @@ async function syncToArchiveBox(entry) {
 
 // Add this function to handle the sync operation
 async function handleSync(filterText = '') {
-  const { entries = [] } = await chrome.storage.sync.get('entries');
+  const { entries = [] } = await chrome.storage.local.get('entries');
   const filteredEntries = filterEntries(entries, filterText);
 
   if (!filteredEntries.length) {
@@ -450,6 +450,123 @@ async function testAdding() {
   }
 }
 
+// Import functionality
+async function loadHistoryItems(days) {
+  const startTime = new Date();
+  startTime.setDate(startTime.getDate() - days);
+  
+  return new Promise((resolve) => {
+    chrome.history.search({
+      text: '',
+      startTime: startTime.getTime(),
+      maxResults: 10000
+    }, resolve);
+  });
+}
+
+async function loadBookmarkItems(bookmarks = []) {
+  const results = [];
+  
+  function processNode(node) {
+    if (node.url) {
+      results.push({
+        url: node.url,
+        title: node.title,
+        dateAdded: node.dateAdded
+      });
+    }
+    if (node.children) {
+      node.children.forEach(processNode);
+    }
+  }
+  
+  return new Promise((resolve) => {
+    chrome.bookmarks.getTree(tree => {
+      tree.forEach(processNode);
+      resolve(results);
+    });
+  });
+}
+
+async function updateImportList(items, filter = '', onlyNew = false) {
+  const { entries = [] } = await chrome.storage.local.get('entries');
+  const existingUrls = new Set(entries.map(e => e.url));
+  
+  // Filter and sort items
+  const filteredItems = items
+    .filter(item => {
+      const matchesFilter = !filter || 
+        item.url.toLowerCase().includes(filter.toLowerCase()) ||
+        (item.title && item.title.toLowerCase().includes(filter.toLowerCase()));
+      const isNew = !existingUrls.has(item.url);
+      return matchesFilter && (!onlyNew || isNew);
+    })
+    .sort((a, b) => (b.lastVisited || b.dateAdded || 0) - (a.lastVisited || a.dateAdded || 0));
+
+  // Update the list
+  const importList = document.getElementById('importList');
+  importList.innerHTML = filteredItems.map(item => `
+    <div class="list-group-item">
+      <div class="form-check">
+        <input class="form-check-input import-check" type="checkbox" value="${item.url}"
+               id="check-${item.url}" ${existingUrls.has(item.url) ? 'disabled' : ''}>
+        <label class="form-check-label" for="check-${item.url}">
+          <div>
+            <strong>${item.title || 'Untitled'}</strong>
+            <small class="text-muted">
+              (${new Date(item.lastVisited || item.dateAdded).toLocaleString()})
+            </small>
+          </div>
+          <small class="text-muted">${item.url}</small>
+        </label>
+      </div>
+    </div>
+  `).join('');
+
+  updateSelectedCount();
+}
+
+function updateSelectedCount() {
+  const count = document.querySelectorAll('.import-check:checked').length;
+  document.getElementById('selectedCount').textContent = count;
+  document.getElementById('importSelected').disabled = count === 0;
+}
+
+async function importSelected() {
+  const selectedUrls = Array.from(document.querySelectorAll('.import-check:checked'))
+    .map(checkbox => ({
+      url: checkbox.value,
+      title: checkbox.closest('.list-group-item').querySelector('strong').textContent
+    }));
+
+  const { entries = [] } = await chrome.storage.local.get('entries');
+  
+  // Create new entries
+  const newEntries = selectedUrls.map(({ url, title }) => ({
+    id: crypto.randomUUID(),
+    url,
+    title,
+    timestamp: new Date().toISOString(),
+    tags: [],
+    notes: ''
+  }));
+
+  // Add to storage
+  await chrome.storage.local.set({
+    entries: [...entries, ...newEntries]
+  });
+
+  // Refresh the list
+  const filter = document.getElementById('importFilter').value;
+  const onlyNew = document.getElementById('showOnlyNew').checked;
+  await updateImportList(window.importItems || [], filter, onlyNew);
+
+  // Update the main entries list if we're on that tab
+  if (document.getElementById('urls-tab').classList.contains('active')) {
+    await renderEntries();
+  }
+}
+
 // Modify the loadOptions function to include config initialization
 async function loadOptions() {
   // Initial render
@@ -471,7 +588,7 @@ async function loadOptions() {
   });
 
   // Collect and display all unique tags
-  const { entries = [] } = await chrome.storage.sync.get('entries');
+  const { entries = [] } = await chrome.storage.local.get('entries');
   const allTags = [...new Set(entries.flatMap(entry => entry.tags))];
   const tagsList = document.getElementById('tagsList');
   tagsList.innerHTML = allTags.map(tag => `
@@ -499,14 +616,14 @@ async function loadOptions() {
 
   downloadBtn.addEventListener('click', async () => {
     const filterInput = document.getElementById('filterInput');
-    const { entries = [] } = await chrome.storage.sync.get('entries');
+    const { entries = [] } = await chrome.storage.local.get('entries');
     const filteredEntries = filterEntries(entries, filterInput.value);
     downloadCsv(filteredEntries);
   });
 
   downloadJsonBtn.addEventListener('click', async () => {
     const filterInput = document.getElementById('filterInput');
-    const { entries = [] } = await chrome.storage.sync.get('entries');
+    const { entries = [] } = await chrome.storage.local.get('entries');
     const filteredEntries = filterEntries(entries, filterInput.value);
     downloadJson(filteredEntries);
   });
@@ -611,6 +728,54 @@ async function loadOptions() {
 
   // Add test adding button handler
   document.getElementById('testAdding').addEventListener('click', testAdding);
+
+  // Import tab handlers
+  let importItems = [];
+  
+  document.getElementById('loadHistory').addEventListener('click', async () => {
+    const days = parseInt(document.getElementById('historyDays').value, 10);
+    window.importItems = await loadHistoryItems(days);
+    const filter = document.getElementById('importFilter').value;
+    const onlyNew = document.getElementById('showOnlyNew').checked;
+    await updateImportList(window.importItems, filter, onlyNew);
+  });
+
+  document.getElementById('loadBookmarks').addEventListener('click', async () => {
+    window.importItems = await loadBookmarkItems();
+    const filter = document.getElementById('importFilter').value;
+    const onlyNew = document.getElementById('showOnlyNew').checked;
+    await updateImportList(window.importItems, filter, onlyNew);
+  });
+
+  document.getElementById('importFilter').addEventListener('input', async (e) => {
+    const filter = e.target.value;
+    const onlyNew = document.getElementById('showOnlyNew').checked;
+    await updateImportList(window.importItems || [], filter, onlyNew);
+  });
+
+  document.getElementById('showOnlyNew').addEventListener('change', async (e) => {
+    const filter = document.getElementById('importFilter').value;
+    const onlyNew = e.target.checked;
+    await updateImportList(window.importItems || [], filter, onlyNew);
+  });
+
+  document.getElementById('importList').addEventListener('change', updateSelectedCount);
+
+  document.getElementById('selectAll').addEventListener('click', () => {
+    document.querySelectorAll('.import-check:not(:disabled)').forEach(checkbox => {
+      checkbox.checked = true;
+    });
+    updateSelectedCount();
+  });
+
+  document.getElementById('deselectAll').addEventListener('click', () => {
+    document.querySelectorAll('.import-check').forEach(checkbox => {
+      checkbox.checked = false;
+    });
+    updateSelectedCount();
+  });
+
+  document.getElementById('importSelected').addEventListener('click', importSelected);
 }
 
 document.addEventListener('DOMContentLoaded', loadOptions);