add readinglist

index.html

@@ -82,33 +82,49 @@
  >
  <div class="row">
  <!-- History -->
- <div class="col-4 border rounded-3" style="padding-bottom: 16px">
- <span style="font-size: 20px; margin: 12px">Recent History</span>
- <ul id="historyItemList" class="list-group">
- <!-- HistoryItems -->
- </ul>
+ <div class="col-4">
+ <div class="border rounded-3" style="padding-bottom: 16px">
+ <span style="font-size: 20px; margin: 12px">Recent History</span>
+ <ul id="historyItemList" class="list-group">
+ <!-- HistoryItems -->
+ </ul>
+ </div>
  </div>
  <!-- Bookmark -->
- <div
- id="bookmarks_div"
- class="col-4 border rounded-3"
- style="padding-bottom: 16px"
- >
- <span style="font-size: 20px; margin: 12px">Bookmarks</span>
- <ul id="bookmarkItemList" class="list-group">
- <!-- BookmarkItems -->
- </ul>
+ <div class="col-4">
+ <div
+ id="bookmarks_div"
+ class="border rounded-3"
+ style="padding-bottom: 16px"
+ >
+ <span style="font-size: 20px; margin: 12px">Bookmarks</span>
+ <ul id="bookmarkItemList" class="list-group">
+ <!-- BookmarkItems -->
+ </ul>
+ </div>
  </div>
 
- <div
- id="google_search_div"
- class="col-4 border rounded-3"
- style="padding-bottom: 16px"
- >
- <span style="font-size: 20px; margin: 12px">Search Suggest</span>
- <ul id="searchItemList" class="list-group">
- <!-- SearchSuggestItems -->
- </ul>
+ <div class="col-4">
+ <div
+ class="row-4 border rounded-3"
+ style="padding-bottom: 16px; min-height: 160px"
+ >
+ <span style="font-size: 20px; margin: 12px">Reading List</span>
+ <ul id="readingItemList" class="list-group">
+ <!-- ReadingListItems -->
+ </ul>
+ </div>
+
+ <div
+ id="google_search_div"
+ class="row-4 border rounded-3"
+ style="margin-top: 16px; padding-bottom: 16px; min-height: 160px"
+ >
+ <span style="font-size: 20px; margin: 12px">Search Suggest</span>
+ <ul id="searchItemList" class="list-group">
+ <!-- SearchSuggestItems -->
+ </ul>
+ </div>
  </div>
  </div>
  </div>

manifest.json

@@ -14,7 +14,8 @@
  "storage",
  "tabs",
  "scripting",
- "webNavigation"
+ "webNavigation",
+ "readingList"
  ],
  "options_ui": {
  "page": "options.html",

src/const.js

@@ -11,5 +11,7 @@ export const BOOKMARK_LIST_CLASS = "bookmarkItemList";
 export const BOOKMARK_ITEM_CLASS = "bookmarkItem";
 export const SEARCH_LIST_CLASS = "searchItemList";
 export const SEARCH_ITEM_CLASS = "searchItem";
+export const READING_LIST_CLASS = "readingItemList";
+export const READING_ITEM_CLASS = "readingItem";
 export const MAX_SUGGEST_CANDIDATES = 100;
 export const AUTO_COMPLETE_CLASS = "autoComplete";

src/main.js

@@ -9,6 +9,7 @@ import {
  findAutoCompleteCandidate,
 } from "./autoComplete.js";
 import { fetchSearchSuggestions } from "./suggest.js";
+import { fetchReadingList } from "./readingList.js";
 
 let preSearchWord = "";
 
@@ -68,6 +69,14 @@ async function buildHistoryBookmarkList(searchWord) {
  constant.SEARCH_LIST_CLASS,
  constant.SEARCH_ITEM_CLASS,
  );
+
+ const readingListItems = await fetchReadingList(searchWord);
+ $(util.toId(constant.READING_LIST_CLASS)).empty();
+ buildItemList(
+ readingListItems,
+ constant.READING_LIST_CLASS,
+ constant.READING_ITEM_CLASS,
+ );
 }
 
 function buildItemList(data, elementId, itemClass) {

src/readingList.js

@@ -0,0 +1,29 @@
+import Fuse from "../third-party/fuse.esm.js";
+import * as constant from "./const.js";
+
+export async function fetchReadingList(query) {
+ const items = await chrome.readingList.query({});
+ if (!query) {
+ return items;
+ }
+
+ const fuse = buildFuseObject(items);
+
+ return fuse.search(query ?? "").map((res) => {
+ return { title: res.item.title, url: res.item.url };
+ });
+}
+
+function buildFuseObject(readingItems) {
+ const fuseTarget = readingItems.map((item) => {
+ return { title: item.title, url: item.url };
+ });
+
+ const fuse = new Fuse(fuseTarget, {
+ keys: ["title", "url"],
+ shouldSort: constant.SORT_BY_SCORE,
+ threshold: constant.SCORE_THRESHOLD,
+ });
+
+ return fuse;
+}

src/shortcutObserver.js

@@ -6,6 +6,7 @@ import { removeBookmarkItem } from "./bookmark.js";
 const cycleOrder = [
  constant.HISTORY_ITEM_CLASS,
  constant.BOOKMARK_ITEM_CLASS,
+ constant.READING_ITEM_CLASS,
  constant.SEARCH_ITEM_CLASS,
 ];
 
@@ -39,6 +40,9 @@ export function shortcutObserver(
  if (clazz?.includes(constant.BOOKMARK_ITEM_CLASS)) {
  moveFocus($focused, constant.BOOKMARK_ITEM_CLASS, "plus");
  }
+ if (clazz?.includes(constant.READING_ITEM_CLASS)) {
+ moveFocus($focused, constant.READING_ITEM_CLASS, "plus");
+ }
  if (clazz?.includes(constant.SEARCH_ITEM_CLASS)) {
  moveFocus($focused, constant.SEARCH_ITEM_CLASS, "plus");
  }
@@ -50,6 +54,9 @@ export function shortcutObserver(
  if (clazz?.includes(constant.BOOKMARK_ITEM_CLASS)) {
  moveFocus($focused, constant.BOOKMARK_ITEM_CLASS, "minus");
  }
+ if (clazz?.includes(constant.READING_ITEM_CLASS)) {
+ moveFocus($focused, constant.READING_ITEM_CLASS, "minus");
+ }
  if (clazz?.includes(constant.SEARCH_ITEM_CLASS)) {
  moveFocus($focused, constant.SEARCH_ITEM_CLASS, "minus");
  }