🔍 No bookmarks match your search. Try changing the filters or keywords.
Edit Bookmark
Delete bookmark
Are you sure you want to delete this bookmark? This action cannot be undone. Removing the bookmark from FavBox
will also delete it from your browser.
Cancel
Delete
Take a screenshot
The browser extension will open a new tab, wait for the page to load, then capture a screenshot and save the
current preview.
Cancel
Ok
Delete bookmark
Are you sure you want to delete this bookmark? This action cannot be undone. Removing the bookmark from FavBox will also delete it from your browser.
Cancel
Delete
✅ Looks like there are no broken bookmarks in your browser.
Delete bookmark
Are you sure you want to delete this bookmark? This action cannot be undone. Removing the bookmark from FavBox
will also delete it from your browser.
Cancel
Delete
================================================
FILE: src/ext/browser/views/NotesView.vue
================================================
🗂️ Your local storage is currently empty. Please pin bookmarks to get started.
📌 Select a bookmark to start editing.
================================================
FILE: src/ext/popup/components/BookmarkForm.vue
================================================
================================================
FILE: src/ext/popup/index.html
================================================
Vite App
================================================
FILE: src/ext/popup/main.js
================================================
import { createApp } from 'vue';
import App from './App.vue';
import '@/assets/app.css';
import '@zanmato/vue3-treeselect/dist/vue3-treeselect.min.css';
import '@fontsource/sn-pro';
createApp(App).mount('#app');
================================================
FILE: src/ext/sw/index.js
================================================
import BookmarkStorage from '@/storage/bookmark';
import AttributeStorage from '@/storage/attribute';
import MetadataParser from '@/parser/metadata';
import { fetchUrl } from '@/services/httpClient';
import { extractTitle, extractTags } from '@/services/tags';
import { getFoldersMap, getBookmarksFromNode } from '@/services/browserBookmarks';
import sync from './sync';
import ping from './ping';
const bookmarkStorage = new BookmarkStorage();
const attributeStorage = new AttributeStorage();
// https://developer.chrome.com/docs/extensions/develop/migrate/to-service-workers
const waitUntil = async (promise) => {
const keepAlive = setInterval(browser.runtime.getPlatformInfo, 25 * 1000);
try {
await promise;
} finally {
clearInterval(keepAlive);
}
};
browser.runtime.onInstalled.addListener(async () => {
browser.contextMenus.create({ id: 'openPopup', title: 'Bookmark this page', contexts: ['all'] });
await browser.alarms.create('healthcheck', { periodInMinutes: 0.5 });
await browser.storage.session.set({ nativeImport: false });
waitUntil(sync());
});
browser.runtime.onStartup.addListener(async () => {
console.warn('Wake up..');
await browser.storage.session.set({ nativeImport: false });
const alarm = await browser.alarms.get('healthcheck');
if (!alarm) {
await browser.alarms.create('healthcheck', { periodInMinutes: 0.5 });
}
waitUntil(sync());
});
browser.alarms.onAlarm.addListener(async (alarm) => {
if (alarm.name === 'healthcheck') {
console.log('health check');
await browser.storage.local.set({ lastHealthCheck: Date.now() });
}
});
browser.contextMenus.onClicked.addListener((info) => {
if (info.menuItemId === 'openPopup') {
browser.action.openPopup();
}
});
// https:// developer.browser.com/docs/extensions/reference/bookmarks/#event-onCreated
browser.bookmarks.onCreated.addListener(async (id, bookmark) => {
const { nativeImport } = await browser.storage.session.get('nativeImport');
if (nativeImport === true) {
return;
}
console.time(`bookmark-created-${id}`);
console.warn('🎉 Handle bookmark create..', id, bookmark);
if (bookmark.url === undefined) {
console.warn('bad bookmark data', bookmark);
return;
}
let response = null;
let activeTab = null;
// fetch HTML from active tab (content script)
[activeTab] = await browser.tabs.query({ active: true });
try {
console.warn('activeTab', activeTab);
console.warn('requesting html from tab', activeTab);
const content = await browser.tabs.sendMessage(activeTab.id, { action: 'getHTML' });
response = { html: content?.html, error: 0 };
console.warn('response from tab', response);
} catch (e) {
console.error('No tabs. It is weird. Fetching data from internet.. 🌎', e);
response = await fetchUrl(bookmark.url, 15000);
}
try {
if (response === null) {
throw new Error('No page data: response is null');
}
const foldersMap = await getFoldersMap();
const entity = await (new MetadataParser(bookmark, response, foldersMap)).getFavboxBookmark();
if (entity.image === null && activeTab) {
try {
console.warn('📸 No image, take a screenshot', activeTab);
const screenshot = await browser.tabs.captureVisibleTab(activeTab.windowId, { format: 'jpeg', quality: 10 });
entity.image = screenshot;
} catch (e) {
console.error('📸', e);
}
}
console.log('🔖 Entity', entity);
await bookmarkStorage.create(entity);
await attributeStorage.create(entity);
refreshUserInterface();
console.log('🎉 Bookmark has been created..');
} catch (e) {
console.error('🎉', e, id, bookmark);
} finally {
response = null;
activeTab = null;
}
console.timeEnd(`bookmark-created-${id}`);
});
// https://developer.chrome.com/docs/extensions/reference/bookmarks/#event-onChanged
browser.bookmarks.onChanged.addListener(async (id, changeInfo) => {
console.time(`bookmark-changed-${id}`);
try {
const [bookmark] = await browser.bookmarks.get(id);
// folder
if (!bookmark.url) {
// Only update if title actually changed
if (changeInfo.title !== undefined) {
await bookmarkStorage.updateBookmarksFolderName(bookmark.id, changeInfo.title);
console.log('🔄 Folder has been updated..', id, changeInfo);
}
}
// bookmark
if (bookmark.url) {
const oldBookmark = await bookmarkStorage.getById(id);
// Only update if title actually changed (changeInfo.title contains new value)
if (changeInfo.title !== undefined) {
await bookmarkStorage.update(id, {
title: extractTitle(changeInfo.title),
tags: extractTags(changeInfo.title),
url: bookmark.url,
updatedAt: new Date().toISOString(),
});
const newBookmark = await bookmarkStorage.getById(id);
if (oldBookmark && newBookmark) {
await attributeStorage.update(newBookmark, oldBookmark);
}
} else {
// Title didn't change, but url or other fields might have - update only url
await bookmarkStorage.update(id, {
url: bookmark.url,
updatedAt: new Date().toISOString(),
});
}
console.log('🔄 Bookmark has been updated..', id, changeInfo);
}
} catch (e) {
console.error('🔄', e, id, changeInfo);
}
refreshUserInterface();
console.timeEnd(`bookmark-changed-${id}`);
});
// https://developer.chrome.com/docs/extensions/reference/bookmarks/#event-onMoved
browser.bookmarks.onMoved.addListener(async (id, moveInfo) => {
console.time(`bookmark-moved-${id}`);
try {
const [item] = await browser.bookmarks.get(id);
// Only process bookmarks (with url), not folders
if (item.url) {
const [folder] = await browser.bookmarks.get(moveInfo.parentId);
console.log('🗂 Bookmark has been moved..', id, moveInfo, folder);
await bookmarkStorage.update(id, {
folderName: folder.title,
folderId: folder.id,
updatedAt: new Date().toISOString(),
});
refreshUserInterface();
} else {
// Folder moved - update folderName for all bookmarks in this folder
console.log('🗂 Folder has been moved..', id, moveInfo);
await bookmarkStorage.updateBookmarksFolderName(id, item.title);
refreshUserInterface();
}
} catch (e) {
console.error('🗂', e, id, moveInfo);
}
console.timeEnd(`bookmark-moved-${id}`);
});
// https://developer.chrome.com/docs/extensions/reference/bookmarks/#event-onRemoved
browser.bookmarks.onRemoved.addListener(async (id, removeInfo) => {
console.time(`bookmark-removed-${id}`);
console.log('🗑️ Handle remove bookmark..', id, removeInfo);
// folder has been deleted..
if (removeInfo.node.children !== undefined) {
try {
const items = getBookmarksFromNode(removeInfo.node);
const bookmarksToRemove = items.map((bookmark) => bookmark.id);
if (bookmarksToRemove.length) {
await bookmarkStorage.removeByIds(bookmarksToRemove);
// Full refresh after folder deletion
const [domains, tags, keywords] = await Promise.all([
bookmarkStorage.aggregateDomains(),
bookmarkStorage.aggregateTags(),
bookmarkStorage.aggregateKeywords(),
]);
await attributeStorage.refreshFromAggregated(domains, tags, keywords, true);
console.log('🗑️ Folder has been removed..', bookmarksToRemove.length, id, removeInfo);
}
refreshUserInterface();
} catch (e) {
console.error('🗑️ Remove err', e);
}
return;
}
// single bookmark has been deleted..
try {
const bookmark = await bookmarkStorage.getById(id);
if (!bookmark) {
// Bookmark not found in storage - might have been deleted already or never synced
console.warn(`Bookmark with ID ${id} not found in storage, skipping removal.`);
return;
}
await bookmarkStorage.removeById(id);
await attributeStorage.remove(bookmark);
console.log('🗑️ Bookmark has been removed..', id, removeInfo);
} catch (e) {
console.error('🗑️', e);
}
console.timeEnd(`bookmark-removed-${id}`);
});
// https://developer.chrome.com/docs/extensions/reference/api/bookmarks#event-onImportBegan
browser.bookmarks.onImportBegan.addListener(async () => {
console.log('📄 Import bookmarks started');
await browser.storage.session.set({ nativeImport: true });
await browser.storage.session.set({ status: false });
});
// https://developer.chrome.com/docs/extensions/reference/api/bookmarks#event-onImportEnded
browser.bookmarks.onImportEnded.addListener(async () => {
console.log('📄 Import bookmarks ended');
await browser.storage.session.set({ nativeImport: false });
waitUntil(sync());
});
function refreshUserInterface() {
try {
browser.runtime.sendMessage({ action: 'refresh' });
} catch (e) {
console.error('Refresh UI listener not available', e);
}
}
ping();
================================================
FILE: src/ext/sw/ping.js
================================================
const ping = () => {
const onMessage = (msg, port) => {
console.log('received', msg, 'from', port.sender);
};
const deleteTimer = (port) => {
if (port.timer) {
clearTimeout(port.timer);
delete port.timer;
}
};
const forceReconnect = (port) => {
console.warn('Reconnect...');
deleteTimer(port);
port.disconnect();
};
// https://bugs.chromium.org/p/chromium/issues/detail?id=1152255
// https://bugs.chromium.org/p/chromium/issues/detail?id=1189678
browser.runtime.onConnect.addListener((port) => {
if (port.name !== 'favbox') return;
port.onMessage.addListener(onMessage);
port.onDisconnect.addListener(deleteTimer);
port.timer = setTimeout(forceReconnect, 30000, port);
});
};
export default ping;
================================================
FILE: src/ext/sw/sync.js
================================================
import { fetchUrl } from '@/services/httpClient';
import BookmarkStorage from '@/storage/bookmark';
import AttributeStorage from '@/storage/attribute';
import MetadataParser from '@/parser/metadata';
import { getBookmarksCount, getFoldersMap, getBookmarksIterator } from '@/services/browserBookmarks';
import hashCode from '@/services/hash';
const MAX_CONCURRENT = 50;
const BATCH_SIZE = 100;
const PROGRESS_UPDATE_INTERVAL = 3000;
const bookmarkStorage = new BookmarkStorage();
const attributeStorage = new AttributeStorage();
const sendProgress = (progress, savedCount) => {
browser.storage.session.set({ progress });
browser.runtime.sendMessage({ action: 'sync', data: { progress, savedCount } }).catch(() => {});
};
const fetchPageMetadata = async (bookmark, foldersMap) => {
const response = await fetchUrl(bookmark.url);
return (new MetadataParser(bookmark, response, foldersMap)).getFavboxBookmark();
};
const toAttribute = (key, { value, count }) => ({
key,
value: String(value).trim(),
id: hashCode(key, String(value).trim()),
count,
});
export const refreshAttributes = async () => {
console.time('refreshAttributes');
await attributeStorage.clear();
const [domains, tags, keywords] = await Promise.all([
bookmarkStorage.aggregateDomains(),
bookmarkStorage.aggregateTags(),
bookmarkStorage.aggregateKeywords(),
]);
const attributes = [
...domains.map((r) => toAttribute('domain', r)),
...tags.map((r) => toAttribute('tag', r)),
...keywords.map((r) => toAttribute('keyword', r)),
];
await attributeStorage.saveMany(attributes);
console.timeEnd('refreshAttributes');
};
const sync = async () => {
console.time('Sync time');
const browserTotal = await getBookmarksCount();
const idbTotal = await bookmarkStorage.total();
const { status } = await browser.storage.session.get('status');
await browser.storage.session.set({ browserTotal, idbTotal });
console.log(`Browser: ${browserTotal}, IDB: ${idbTotal}, Status: ${status}`);
if (browserTotal === idbTotal || status) {
await browser.storage.session.set({ status: true });
console.log('Already in sync');
return;
}
await browser.storage.session.set({ status: false });
const [foldersMap, existingIds] = await Promise.all([
getFoldersMap(),
bookmarkStorage.getAllIds().then((ids) => new Set(ids)),
]);
const browserIds = new Set();
const batch = [];
let processed = 0;
let savedCount = 0;
let lastProgressUpdate = Date.now();
const bookmarksToProcess = [];
for await (const bookmark of getBookmarksIterator()) {
browserIds.add(bookmark.id);
if (!existingIds.has(bookmark.id)) {
bookmarksToProcess.push(bookmark);
}
}
bookmarksToProcess.sort((a, b) => String(a.id).localeCompare(String(b.id)));
console.log(`To process: ${bookmarksToProcess.length}`);
const active = new Set();
const handleBookmark = async (bookmark) => {
try {
const result = await fetchPageMetadata(bookmark, foldersMap);
batch.push(result);
processed++;
const now = Date.now();
if (now - lastProgressUpdate > PROGRESS_UPDATE_INTERVAL) {
const progress = Math.round((processed / bookmarksToProcess.length) * 100);
sendProgress(progress, savedCount);
lastProgressUpdate = now;
}
} catch (error) {
console.error(`Error processing ${bookmark.url}:`, error.message);
}
};
for (const bookmark of bookmarksToProcess) {
const promise = handleBookmark(bookmark);
active.add(promise);
promise.finally(() => active.delete(promise));
if (active.size >= MAX_CONCURRENT) {
await Promise.race(active);
}
if (batch.length >= BATCH_SIZE) {
const itemsToSave = batch.splice(0, batch.length);
await bookmarkStorage.createMany(itemsToSave);
savedCount += itemsToSave.length;
console.log(`Saved batch: ${itemsToSave.length}, total: ${savedCount}`);
}
}
await Promise.all(active);
if (batch.length > 0) {
await bookmarkStorage.createMany(batch);
savedCount += batch.length;
console.log(`Saved final batch: ${batch.length}, total: ${savedCount}`);
}
const idbIds = await bookmarkStorage.getAllIds();
const toDelete = idbIds.filter((id) => !browserIds.has(id));
if (toDelete.length > 0) {
console.log(`Removing ${toDelete.length} outdated bookmarks`);
await bookmarkStorage.removeByIds(toDelete);
}
await refreshAttributes();
await browser.storage.session.set({ status: true });
sendProgress(100, savedCount);
console.timeEnd('Sync time');
console.log(`Saved: ${savedCount}`);
};
export default sync;
================================================
FILE: src/index.html
================================================
FavBox
FavBox
================================================
FILE: src/parser/metadata.js
================================================
import { parseHTML } from 'linkedom';
import { extractTitle, extractTags } from '@/services/tags';
/**
* Class for parsing bookmark metadata from HTML documents.
*/
export default class MetadataParser {
#bookmark;
#httpResponse;
#dom;
#folders;
/**
* Creates an instance of MetadataParser.
* @param {object} bookmark - The bookmark object from browser.
* @param {object} httpResponse - The HTTP response object containing HTML.
* @param {Map} [folders] - Cache map of folder IDs to names.
*/
constructor(bookmark, httpResponse, folders = new Map()) {
const { document } = parseHTML(httpResponse.html);
this.#bookmark = bookmark;
this.#dom = document;
this.#httpResponse = httpResponse;
this.#folders = folders;
}
/**
* Retrieves the title from various sources in the HTML document.
* @returns {string} The document title, or an empty string if not found.
*/
getTitle() {
// Check if bookmark title is empty or whitespace
if (!this.#bookmark.title?.trim()) {
// Try document title first
if (this.#dom.title) {
return this.#dom.title;
}
const metaSelectors = [
'meta[property="og:title"]',
'meta[name="twitter:title"]',
];
for (const selector of metaSelectors) {
const element = this.#dom.querySelector(selector);
if (element?.getAttribute('content')) {
return element.getAttribute('content');
}
}
const headingSelectors = ['h1', 'h2'];
for (const selector of headingSelectors) {
const element = this.#dom.querySelector(selector);
if (element?.textContent?.trim()) {
return element.textContent.trim();
}
}
return '';
}
return this.#bookmark.title;
}
/**
* Retrieves the description from various meta tags in the HTML document.
* @returns {string|null} The document description, or null if not found.
*/
getDescription() {
const selectors = [
'meta[property="og:description"]',
'meta[name="twitter:description"]',
'meta[name="description"]',
];
for (const selector of selectors) {
const element = this.#dom.querySelector(selector);
if (element) {
return element.getAttribute('content') ?? null;
}
}
return null;
}
/**
* Searches for preview image on the page.
* @returns {string|null} The image URL, or null if not found.
* @private
*/
#searchPagePreview() {
const htmlElem = this.#dom.querySelector([
'img[class*="hero"]',
'img[class*="banner"]',
'img[class*="cover"]',
'img[class*="featured"]',
'img[class*="preview"]',
'img[id*="post-image"]',
'article img:first-of-type',
'main img:first-of-type',
'.content img:first-of-type',
].join(','));
const src = (htmlElem?.getAttribute('content') || htmlElem?.getAttribute('href') || htmlElem?.getAttribute('src')) ?? null;
return src;
}
/**
* Retrieves the Open Graph/Meta image URL from the HTML document.
* @returns {string|null} The URL of the Open Graph image, or null if not found.
* @private
*/
#getImageFromMeta() {
const selectors = [
'meta[property="og:image"]',
'meta[property="og:image:url"]',
'meta[property="og:image:secure_url"]',
'meta[name="twitter:image"]',
'meta[name="twitter:image:src"]',
'meta[name="image"]',
'meta[name="og:image"]',
'link[rel="image_src"]',
'link[rel="preload"][as="image"]',
'meta[property="forem:logo"]',
];
for (const selector of selectors) {
const element = this.#dom.querySelector(selector);
if (element) {
const imageUrl = element.getAttribute('content') || element.getAttribute('href') || element.getAttribute('src') || null;
if (imageUrl) {
return imageUrl;
}
}
}
return null;
}
/**
* Extracts YouTube video ID from URL.
* @returns {string|null} The video ID, or null if not found.
* @private
*/
#getYouTubeVideoId() {
const { url } = this.#bookmark;
if (!url) return null;
// Match various YouTube URL formats
const patterns = [
/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/|youtube\.com\/v\/)([^&\n?#]+)/,
];
for (const pattern of patterns) {
const match = url.match(pattern);
if (match?.[1]) {
return match[1];
}
}
return null;
}
/**
* Retrieves the main image URL from the HTML document.
* @returns {string|null} The URL of the main image, or null if not found.
*/
getImage() {
const videoId = this.#getYouTubeVideoId();
if (videoId) {
return `https://img.youtube.com/vi/${videoId}/mqdefault.jpg`;
}
const metaImage = this.#getImageFromMeta();
if (metaImage) {
return new URL(metaImage, this.#bookmark.url).href;
}
const src = this.#searchPagePreview();
return src ? new URL(src, this.#bookmark.url).href : null;
}
/**
* Retrieves the domain from the bookmark URL.
* @returns {string} The domain of the bookmark URL.
*/
getDomain() {
return new URL(this.#bookmark.url).hostname.replace(/^www\./, '');
}
/**
* Retrieves the favicon URL from the HTML document.
* @returns {string} The URL of the favicon or a default favicon URL if not found.
*/
getFavicon() {
let link = this.#dom.querySelector('link[rel="icon"][type="image/svg+xml"]')?.getAttribute('href');
if (!link) {
link = this.#dom.querySelector('link[rel="shortcut icon"], link[rel="icon"]')?.getAttribute('href');
}
return link ? new URL(link, this.#bookmark.url).href : `https://${this.getDomain()}/favicon.ico`;
}
/**
* Retrieves the URL of the bookmark.
* @returns {string} The URL of the bookmark.
*/
getUrl() {
return this.#bookmark.url;
}
/**
* Retrieves the keywords from the HTML document's meta tags.
* @returns {string[]} An array of keywords or an empty array if no keywords are found.
*/
getKeywords() {
const keywords = this.#dom.querySelector('meta[name="keywords"]')?.getAttribute('content');
if (!keywords) return [];
return keywords.split(',').map((keyword) => keyword.trim().toLowerCase()).filter((keyword) => keyword.length > 0);
}
/**
* Gets folder name from cache instead of making API call.
* @returns {string} The folder name or 'Unknown' if not found.
* @private
*/
#getFolderName() {
return this.#folders.get(this.#bookmark.parentId.toString()) || 'Unknown';
}
/**
* Builds a bookmark entity for Favbox.
* @returns {Promise
