feat: support bookmark separators for firefox

Support horizontal bookmark separators for Firefox. Other browser such as Chrome and Safari do not support separators/dividers with bookmarks. For these browsers we skip any defined separators. After some experimentation we decided not to implement workarounds due to their bad UX.
frederikb · Feb 11, 2024 · 374ce6f · 374ce6f
1 parent 9c2ede8
commit 374ce6f
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 1 deletion.
diff --git a/readme.md b/readme.md
@@ -49,6 +49,41 @@ Access the extension's options and provide:
 
 Then make your bookmarks available at the source path in your repository to watch the magic happen.
 
+## 📄 Bookmark Collection JSON Format
+
+Structure your JSON file for bookmarks as per the schema defined at [https://frederikb.github.io/bookmarksync/schemas/bookmarks.1-0-0.schema.json](https://frederikb.github.io/bookmarksync/schemas/bookmarks.1-0-0.schema.json).
+
+### Top-Level Structure
+
+| Field       | Type   | Required | Description                       |
+|-------------|--------|----------|-----------------------------------|
+| `$schema`   | URI    | No       | Schema identifier.                |
+| `name`      | String | Yes      | Name of the bookmark collection.  |
+| `bookmarks` | Array  | Yes      | Array of bookmark items.          |
+
+### Bookmark Item Types
+
+#### Bookmark
+| Field   | Type   | Required | Description           |
+|---------|--------|----------|-----------------------|
+| `title` | String | Yes      | Title of the bookmark.|
+| `url`   | URI    | Yes      | URL of the bookmark.  |
+| `type`  | String | No       | Set to "bookmark".    |
+
+#### Folder
+| Field      | Type   | Required | Description                         |
+|------------|--------|----------|-------------------------------------|
+| `title`    | String | Yes      | Title of the folder.                |
+| `children` | Array  | Yes      | Array of nested bookmark items.     |
+| `type`     | String | No       | Set to "folder".                    |
+
+#### Separator
+| Field | Type   | Required | Description        |
+|-------|--------|----------|--------------------|
+| `type`| String | Yes      | Set to "separator".|
+
+### Example
+
 <details>
   <summary>Example Bookmark JSON (Click to expand)</summary>
 
@@ -70,6 +105,9 @@ Then make your bookmarks available at the source path in your repository to watc
               "title": "Specs",
               "url": "https://specs.example.com"
             },
+						{
+							"type": "separator"
+						},
             {
               "title": "Reports",
               "url": "https://reports.example.com"
@@ -83,6 +121,7 @@ Then make your bookmarks available at the source path in your repository to watc
 ```
 </details>
 
+
 ## 📸 Screenshots
 
 ![Options Page](docs/screenshot-options.png)

diff --git a/src/utils/bookmarksync.js b/src/utils/bookmarksync.js
@@ -80,17 +80,29 @@ async function syncBookmarksRootNode(parentId, node, existingBookmarksAndFolders
 
 async function createBookmarks(parentId, bookmarks) {
 	const createPromises = bookmarks.map(item => {
-		if (item.children) {
+		if (item.type === 'folder' || item.children) {
 			return browser.bookmarks.create({parentId, title: item.title})
 				.then(newFolder => createBookmarks(newFolder.id, item.children));
 		}
 
+		if (item.type === 'separator') {
+			if (import.meta.env.FIREFOX) {
+				return createSeparator(parentId);
+			}
+
+			return;
+		}
+
 		return browser.bookmarks.create({parentId, title: item.title, url: item.url});
 	});
 
 	return Promise.all(createPromises);
 }
 
+async function createSeparator(parentId) {
+	return browser.bookmarks.create({parentId, type: 'separator'});
+}
+
 async function notify(title, message, type = 'basic') {
 	const id = `sync-bookmarks-notification-${Date.now()}`;
 	return browser.notifications.create(id, {