#### popup.js ```js // popup.js - Handles the extension popup UI interactions const statusDiv = document.getElementById('status'); const postsListDiv = document.getElementById('postsList'); let loadedPosts = []; let currentCursor = null; let isAutoLoading = false; function showStatus(message, type = 'info') { statusDiv.textContent = message; statusDiv.className = type; } // Helper function to send messages with error handling async function sendMessageToTab(tabId, message) { try { // Try sending the message directly first const response = await chrome.tabs.sendMessage(tabId, message); return response; } catch (error) { // If that fails, try injecting the content script try { await chrome.scripting.executeScript({ target: { tabId: tabId }, files: ['content.js'] }); // Wait a bit for the script to initialize await new Promise(resolve => setTimeout(resolve, 200)); // Try sending the message again const response = await chrome.tabs.sendMessage(tabId, message); return response; } catch (retryError) { throw new Error(`Failed to communicate with page. Try refreshing the Facebook tab.`); } } } // Extract story IDs from the GraphQL response function extractPosts(response) { try { console.log('Extracting posts from response:', response); // Navigate the response structure - posts are at data.node.activity_log_stories.edges const edges = response?.data?.node?.activity_log_stories?.edges || []; console.log('Found edges:', edges.length); const posts = edges.map(edge => ({ storyId: edge.node?.id, text: edge.node?.message?.text || edge.node?.title?.text || 'No text', timestamp: edge.node?.creation_time })); console.log('Extracted posts:', posts); return posts; } catch (error) { console.error('Error extracting posts:', error); return []; } } // Extract pagination cursor from response function extractCursor(response) { try { return response?.data?.node?.activity_log_stories?.page_info?.end_cursor || null; } catch (error) { return null; } } // Display posts in the UI function displayPosts(posts) { if (posts.length === 0) { postsListDiv.innerHTML = '

No posts found

'; postsListDiv.style.display = 'block'; return; } postsListDiv.innerHTML = posts.map((post, index) => `

${post.text.substring(0, 100)}${post.text.length > 100 ? '...' : ''} ${post.timestamp ? `(${new Date(post.timestamp * 1000).toLocaleDateString()})` : ''}

`).join(''); postsListDiv.style.display = 'block'; document.getElementById('deleteSelected').disabled = false; document.getElementById('selectAll').disabled = false; document.getElementById('deselectAll').disabled = false; } // Test if we can get the required tokens from Facebook document.getElementById('testConnection').addEventListener('click', async () => { showStatus('Testing connection...', 'info'); try { const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); if (!tab.url.includes('facebook.com')) { showStatus('Please navigate to Facebook first', 'error'); return; } const response = await sendMessageToTab(tab.id, { action: 'getTokens' }); if (response.success) { showStatus(`✓ Connected! User ID: ${response.tokens.userId}`, 'success'); } else { showStatus('✗ Could not find auth tokens. Make sure you\'re logged in.', 'error'); } } catch (error) { showStatus(`Error: ${error.message}`, 'error'); } }); // Load posts document.getElementById('loadPosts').addEventListener('click', async () => { showStatus('Loading posts...', 'info'); currentCursor = null; try { const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); if (!tab.url.includes('facebook.com')) { showStatus('Please navigate to Facebook first', 'error'); return; } const year = document.getElementById('year').value || null; const count = parseInt(document.getElementById('count').value); const response = await sendMessageToTab(tab.id, { action: 'loadPosts', year: year ? parseInt(year) : null, count: count, cursor: null }); if (response.success) { loadedPosts = extractPosts(response.result); currentCursor = extractCursor(response.result); displayPosts(loadedPosts); showStatus(`✓ Loaded ${loadedPosts.length} posts`, 'success'); document.getElementById('loadMore').disabled = !currentCursor; document.getElementById('loadAllPosts').disabled = !currentCursor; } else { showStatus(`✗ Failed: ${response.error}`, 'error'); } } catch (error) { showStatus(`Error: ${error.message}`, 'error'); } }); // Load more posts (pagination) document.getElementById('loadMore').addEventListener('click', async () => { if (!currentCursor) return; showStatus('Loading more posts...', 'info'); try { const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); const year = document.getElementById('year').value || null; const count = parseInt(document.getElementById('count').value); const response = await sendMessageToTab(tab.id, { action: 'loadPosts', year: year ? parseInt(year) : null, count: count, cursor: currentCursor }); if (response.success) { const newPosts = extractPosts(response.result); loadedPosts = [...loadedPosts, ...newPosts]; currentCursor = extractCursor(response.result); displayPosts(loadedPosts); showStatus(`✓ Loaded ${loadedPosts.length} total posts`, 'success'); document.getElementById('loadMore').disabled = !currentCursor; document.getElementById('loadAllPosts').disabled = !currentCursor; } else { showStatus(`✗ Failed: ${response.error}`, 'error'); } } catch (error) { showStatus(`Error: ${error.message}`, 'error'); } }); // Delete selected posts document.getElementById('deleteSelected').addEventListener('click', async () => { const checkboxes = postsListDiv.querySelectorAll('input[type="checkbox"]:checked'); const storyIds = Array.from(checkboxes).map(cb => cb.dataset.storyId); if (storyIds.length === 0) { showStatus('No posts selected', 'error'); return; } if (!confirm(`Are you sure you want to delete ${storyIds.length} post(s)?`)) { return; } try { const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); // Facebook allows max 250 posts per delete request, so batch them const BATCH_SIZE = 250; const batches = []; for (let i = 0; i < storyIds.length; i += BATCH_SIZE) { batches.push(storyIds.slice(i, i + BATCH_SIZE)); } let totalDeleted = 0; for (let i = 0; i < batches.length; i++) { const batch = batches[i]; showStatus(`Deleting batch ${i + 1}/${batches.length} (${batch.length} posts)...`, 'info'); const response = await sendMessageToTab(tab.id, { action: 'deleteActivity', storyIds: batch, categoryKey: 'MANAGEPOSTSPHOTOSANDVIDEOS' }); if (response.success) { totalDeleted += batch.length; // Small delay between batches to avoid rate limiting if (i < batches.length - 1) { await new Promise(resolve => setTimeout(resolve, 500)); } } else { showStatus(`✗ Failed at batch ${i + 1}: ${response.error}`, 'error'); break; } } if (totalDeleted > 0) { showStatus(`✓ Successfully deleted ${totalDeleted} post(s)`, 'success'); // Remove deleted posts from the display loadedPosts = loadedPosts.filter(post => !storyIds.includes(post.storyId)); displayPosts(loadedPosts); } } catch (error) { showStatus(`Error: ${error.message}`, 'error'); } }); // Select all posts document.getElementById('selectAll').addEventListener('click', () => { const checkboxes = postsListDiv.querySelectorAll('input[type="checkbox"]'); checkboxes.forEach(cb => cb.checked = true); showStatus(`Selected ${checkboxes.length} posts`, 'info'); }); // Deselect all posts document.getElementById('deselectAll').addEventListener('click', () => { const checkboxes = postsListDiv.querySelectorAll('input[type="checkbox"]'); checkboxes.forEach(cb => cb.checked = false); showStatus('Deselected all posts', 'info'); }); // Load all posts automatically document.getElementById('loadAllPosts').addEventListener('click', async () => { if (!currentCursor || isAutoLoading) return; isAutoLoading = true; document.getElementById('loadAllPosts').disabled = true; document.getElementById('loadPosts').disabled = true; document.getElementById('loadMore').disabled = true; const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); const year = document.getElementById('year').value || null; const count = parseInt(document.getElementById('count').value); let batchCount = 0; let errorCount = 0; const MAX_ERRORS = 3; // Stop after 3 consecutive errors try { while (currentCursor && isAutoLoading && errorCount < MAX_ERRORS) { batchCount++; showStatus(`Auto-loading batch ${batchCount}... (${loadedPosts.length} posts so far)`, 'info'); try { const response = await sendMessageToTab(tab.id, { action: 'loadPosts', year: year ? parseInt(year) : null, count: count, cursor: currentCursor }); if (response.success) { const newPosts = extractPosts(response.result); // Reset error count on success errorCount = 0; // Stop if we got fewer posts than requested (reached the end) if (newPosts.length < count) { loadedPosts = [...loadedPosts, ...newPosts]; currentCursor = null; displayPosts(loadedPosts); showStatus(`✓ Finished! Loaded all ${loadedPosts.length} posts`, 'success'); break; } loadedPosts = [...loadedPosts, ...newPosts]; currentCursor = extractCursor(response.result); displayPosts(loadedPosts); // Small delay to avoid rate limiting await new Promise(resolve => setTimeout(resolve, 500)); } else { errorCount++; console.error(`Batch ${batchCount} failed:`, response.error); if (errorCount >= MAX_ERRORS) { showStatus(`⚠ Stopped after ${MAX_ERRORS} errors. Loaded ${loadedPosts.length} posts. Error: ${response.error}`, 'error'); } else { showStatus(`⚠ Error in batch ${batchCount}, retrying... (${errorCount}/${MAX_ERRORS})`, 'info'); await new Promise(resolve => setTimeout(resolve, 1000)); } } } catch (error) { errorCount++; console.error(`Batch ${batchCount} exception:`, error); if (errorCount >= MAX_ERRORS) { showStatus(`⚠ Stopped after ${MAX_ERRORS} errors. Loaded ${loadedPosts.length} posts. You can still use these posts.`, 'error'); } else { showStatus(`⚠ Error in batch ${batchCount}, retrying... (${errorCount}/${MAX_ERRORS})`, 'info'); await new Promise(resolve => setTimeout(resolve, 1000)); } } } } finally { isAutoLoading = false; document.getElementById('loadPosts').disabled = false; document.getElementById('loadMore').disabled = !currentCursor; document.getElementById('loadAllPosts').disabled = !currentCursor; // Make sure UI is updated with whatever we got if (loadedPosts.length > 0) { displayPosts(loadedPosts); } } }); ```

What Happened to the Frontend

Facebook Activity Log Trasher

Hiding Scrollbars