Support Chrome bookmarks sync changes

https://developer.chrome.com/blog/bookmarks-sync-changes

Bugfix for latest Firefox

Update UI for flat mode (without subfolders in Bookmarks Bar)

Author: mathio

README.md

@@ -1,4 +1,4 @@
-#  ![icon](https://raw.githubusercontent.com/mathio/chrome-new-tab-page-bookmarks/main/src/icon32.png) New Tab Page Bookmarks
+# ![icon](https://raw.githubusercontent.com/mathio/chrome-new-tab-page-bookmarks/main/src/icon32.png) New Tab Page Bookmarks
 
 Displays your bookmarks in multiple columns for quick access from the new tab page.
 
@@ -9,55 +9,59 @@ Works in both Chrome and Firefox browsers.
 ### Chrome
 
 From Chrome Web Store:
+
 1. go to [Chrome Web Store](https://chrome.google.com/webstore/detail/new-tab-page-bookmarks/nenadkoihofnhlaokenacmknknmlgdcm)
 2. Click `Add to Chrome` button
 
 Manually:
+
 1. [Download latest Chrome release from Github](https://github.com/mathio/chrome-new-tab-page-bookmarks/releases/download/latest/chrome-extension.zip)
 2. Unpack contents of the zip file to a directory (eg. `chrome-extension/`)
-3. Go to Chrome menu `⋮` -> `More Tools` -> `Extensions` and enable `Developer mode` in the top right corner.
+3. Go to Chrome menu `⋮` -> `Extensions` -> `Manage Extensions` and enable `Developer mode` in the top right corner.
 4. Click on `Load unpacked` button and point to `chrome-extension/` directory.
 5. Open new browser tab to see the extension!
 
 ### Firefox
 
 From Firefox Add-ons:
+
 1. go to [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/new-tab-page-bookmarks/)
 2. click `Add to Firefox` button
 
 Manually:
+
 1. [Download latest Firefox release from Github](https://github.com/mathio/chrome-new-tab-page-bookmarks/releases/download/latest/firefox-extension.zip)
-2. Go to Firefox menu `☰` -> `Add-ons and themes`
+2. Go to Firefox menu `☰` -> `Extensions and themes`
 3. Click gear icon `⚙` -> `Debug add-ons`
-4. Click `Load temporary add-on` button
+4. Expand `Temporary Extensions`, then click `Load temporary add-on` button
 5. Select `firefox-extension.zip`
 6. Open new browser tab to see the extension!
 
 ## Preview
 
-![Chrome Screenshot](https://raw.githubusercontent.com/mathio/chrome-new-tab-page-bookmarks/main/store/chrome_screenshot_1280x800.png "Chrome Screenshot")
+![Chrome Screenshot](https://raw.githubusercontent.com/mathio/chrome-new-tab-page-bookmarks/main/store/chrome_screenshot_1280x800.png 'Chrome Screenshot')
 
 ## Description
 
+- displays bookmars from Bookmarks Bar
 - does NOT manage your bookmarks, use the built-in bookmarks manager for that:
-    - Chrome: `CMD+ALT+B` / `CTRL+SHIFT+O`
-    - Firefox: `CMD+SHIFT+O` / `CTRL+SHIFT+O`
+  - Chrome: `CMD+ALT+B` / `CTRL+SHIFT+O`
+  - Firefox: `CMD+SHIFT+O` / `CTRL+SHIFT+O`
 - does NOT sync your bookmarks, your browser already does that
-    - [Sync in Chrome](https://support.google.com/chrome/answer/185277)
-    - [Firefox Sync](https://www.mozilla.org/en-US/firefox/sync/)
+  - [Sync in Chrome](https://support.google.com/chrome/answer/185277)
+  - [Firefox Sync](https://www.mozilla.org/en-US/firefox/sync/)
 - there are NO settings, deal with it
 - just displays your bookmarks in multiple columns for quick access from the new tab page
+- organize your bookmarks in folders under Bookmarks Bar to display in columns (or don't)
 - displays favicons for your bookmarks (via Google API)
 - displays small "show" / "hide" toggle in bottom right corner to hide all your bookmarks (for when you are sharing your screen or someone is looking over your shoulder)
 - when you hide bookmarks [a random photo](https://unsplash.com/documentation#get-a-random-photo) from [wallpaper topic on Unsplash](https://unsplash.com/t/wallpapers?utm_source=chrome-new-tab-page-bookmarks&utm_medium=referral) is displayed once every 15 minutes
 
-
 ## Privacy and permission justification
 
 Extension requires [permissions to access your bookmarks](https://developer.chrome.com/docs/extensions/reference/bookmarks/) to display them on the new tab page. Your bookmarks do not leave your device. It loads favicons via Google API ([using t2.gstatic.com/faviconV2 like this](https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://github.com&size=16)) and might disclose domains & subdomains (not full URLs) from your bookmarks to Google.
 
-Wallpaper images from Unsplash API are loaded via proxy. All requests are anonymous and rate-limited via IP address hash. Image is loaded directly from Unsplash CDN and is [tracked by Unsplash](https://unsplash.com/documentation#hotlinking). 
-
+Wallpaper images from Unsplash API are loaded via proxy. All requests are anonymous and rate-limited via IP address hash. Image is loaded directly from Unsplash CDN and is [tracked by Unsplash](https://unsplash.com/documentation#hotlinking).
 
 ## Development
 

chrome/src/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "New Tab Page Bookmarks",
   "description": "Displays your bookmarks in multiple columns for quick access from the new tab page",
-  "version": "1.7",
+  "version": "1.8",
   "manifest_version": 3,
   "author": "https://github.com/mathio",
   "chrome_url_overrides": {

firefox/src/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "New Tab Page Bookmarks",
   "description": "Displays your bookmarks in multiple columns for quick access from the new tab page",
-  "version": "1.7",
+  "version": "1.8",
   "manifest_version": 2,
   "author": "https://github.com/mathio",
   "chrome_url_overrides": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrome-new-tab-page-bookmarks",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "main": "index.js",
   "license": "MIT",
   "author": "",

src/index.css

@@ -1,89 +1,96 @@
 * {
-	margin: 0;
-	padding: 0;
+  margin: 0;
+  padding: 0;
 }
-html, body {
-	height: 100%;
+html,
+body {
+  height: 100%;
 }
 body {
-	font-size: 13px;
-	font-family: sans-serif;
+  font-size: 13px;
+  font-family: sans-serif;
 }
 ul#root {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: nowrap;
-	margin-left: 20px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  margin-left: 20px;
+}
+ul#root.flat-bookmark-structure {
+  flex-direction: column;
+  flex-wrap: wrap;
+  width: fit-content;
+  height: 100%;
 }
 ul#root > li {
-	margin-right: 20px;
+  margin-right: 20px;
 }
 ul#root h3 {
-	margin-top: 15px;
-	font-size: 18px;
+  margin-top: 15px;
+  font-size: 18px;
 }
 ul {
-	list-style: none;
-	padding: 10px 0 10px 6px;
+  list-style: none;
+  padding: 10px 0 10px 6px;
 }
 ul#root li {
-	margin-bottom: 4px;
+  margin-bottom: 4px;
 }
 ul#root a {
-	display: block;
-	color: black;
-	text-decoration: none;
-	padding: 3px;
-	line-height: 22px;
+  display: block;
+  color: black;
+  text-decoration: none;
+  padding: 3px;
+  line-height: 22px;
 }
 ul#root a:hover {
-	background: #eee;
+  background: #eee;
 }
 ul#root a > img {
-	margin-right: 4px;
-	width: 16px;
-	height: 16px;
-	vertical-align: text-bottom;
+  margin-right: 4px;
+  width: 16px;
+  height: 16px;
+  vertical-align: text-bottom;
 }
 a#toggle {
-	color: #000;
-	font-size: 10px;
-	cursor: pointer;
-	position: fixed;
-	bottom: 10px;
-	right: 10px;
-	padding: 5px;
-	background: rgba(255,255,255,0.75);
-	z-index: 9;
+  color: #000;
+  font-size: 10px;
+  cursor: pointer;
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  padding: 5px;
+  background: rgba(255, 255, 255, 0.75);
+  z-index: 9;
 }
 a#toggle:hover {
-	background: rgba(255,255,255,0.9);
+  background: rgba(255, 255, 255, 0.9);
 }
 p#image-attribution {
-	font-size: 10px;
-	position: fixed;
-	bottom: 10px;
-	left: 10px;
-	padding: 5px;
-	background: rgba(255,255,255,0.75);
-	color: #000;
-	z-index: 9;
+  font-size: 10px;
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  padding: 5px;
+  background: rgba(255, 255, 255, 0.75);
+  color: #000;
+  z-index: 9;
 }
 p#image-attribution a {
-	color: #000;
+  color: #000;
 }
 #canvas {
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	z-index: -1;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: -1;
 }
 #bg-image {
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	z-index: 1;
-	background-size: cover;
-	background-repeat: no-repeat;
-	background-position: center;
-}
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 1;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}

src/index.js

@@ -29,6 +29,11 @@ const renderNode =
       const ul = addElm(li, 'ul')
       children.forEach(renderNode(ul))
     } else if (href) {
+      const parentUl = li.closest('ul')
+      if (parentUl?.id === 'root') {
+        parentUl.className = 'flat-bookmark-structure'
+      }
+
       const icon = `<img src="${iconUrl(href)}" alt="${title.substring(
         0,
         1
@@ -38,11 +43,28 @@ const renderNode =
     }
   }
 
-const renderBookmarksBar = (bookmarksBarId) => {
-  chrome.bookmarks.getSubTree(bookmarksBarId, function ([rootNode]) {
-    const root = document.querySelector('#root')
-    rootNode.children.forEach(renderNode(root))
-  })
+const renderBookmarksBar = async () => {
+  const currentBrowser = typeof browser !== 'undefined' ? browser : chrome
+  const domRoot = document.querySelector('#root')
+
+  const [rootNode] = await currentBrowser.bookmarks.getTree()
+
+  if (!rootNode?.children) {
+    throw new Error('Unable to retrieve bookmarks')
+  }
+
+  //
+  rootNode.children
+    .filter(
+      (item) =>
+        item.folderType === 'bookmarks-bar' || // chrome: find using folderType, there can be more than one (https://developer.chrome.com/blog/bookmarks-sync-changes)
+        item.id === 'toolbar_____' // firefox: find using ID
+    )
+    .forEach((bar) => {
+      bar.children.forEach(renderNode(domRoot))
+    })
+
+  console.log(rootNode)
 }
 
 const TOGGLE_KEY_NAME = 'hideBookmarksBar'
@@ -150,8 +172,7 @@ const showImage = ({ url, attribution, blurhash }) => {
 }
 
 window.addEventListener('load', () => {
-  const bookmarksBarId = !!chrome ? '1' : 'toolbar_____'
-  renderBookmarksBar(bookmarksBarId)
+  renderBookmarksBar()
   renderToggleLink()
   initImage()
 })