ブックマークを日付順に一覧表示するブラウザの拡張機能を作ってみる。その２ - プログラミングを学習中の私が、アウトプットするためのサイト

このページではソースコードの一部分を簡単な解説をしています。

Chromeブラウザをお使いの方はコチラから拡張機能をインストール出来ます
Edgeブラウザをお使いの方はコチラから拡張機能をインストール出来ます
ソースコードはgithubにあります

前回作成した拡張機能に機能を追加
ブックマークフォルダを取得する
フォルダ内のブックマークを一覧表示する
ブックマーク消す機能を追加

前回作成した拡張機能に機能を追加

前回作成した拡張機能にフォルダ別でブックマークを表示する機能とブックマークから消す機能を追加しました。

ブックマークフォルダを取得する

// ブックマークをすべて取得
function getTreeNodes() {
  chrome.bookmarks.getTree(function (bookmarkTreeNodes) {
    const TreeNodes = bookmarkTreeNodes;
    getNode(TreeNodes);
  });
}
//フォルダだけを取得する
function getNode(bookmarkTreeNodes) {
  const fragment = document.createDocumentFragment();
  const template = document.getElementById("template");
  for (let i = 0; i < bookmarkTreeNodes.length; i++) {
    const node = bookmarkTreeNodes[i];
    const clone = template.content.cloneNode(true);

    if (node.children) {
      if (node.dateGroupModified) {
        clone.querySelector(".time").textContent = time(node.dateGroupModified); // フォルダが作成された時間
        clone.querySelector(".title").textContent = node.title;                  // フォルダ名
        clone.querySelector(".title").id = node.id;                              // フォルダID
        clone.querySelector(".title").onclick = function () {                    // フォルダ名がクリックされた時の処理
          chrome.tabs.create({
            url: `../html/main.html?id=${this.id}&title=${this.textContent}`,
          });
        };
      }

      getNode(node.children);
    }
    fragment.appendChild(clone);
  }
  document.querySelector("ul").appendChild(fragment);
}
getTreeNodes();

// ブックマークをすべて取得

function getTreeNodes() {

chrome.bookmarks.getTree(function (bookmarkTreeNodes) {

const TreeNodes = bookmarkTreeNodes;

getNode(TreeNodes);

});

}

//フォルダだけを取得する

function getNode(bookmarkTreeNodes) {

const fragment = document.createDocumentFragment();

const template = document.getElementById("template");

for (let i = 0; i < bookmarkTreeNodes.length; i++) {

const node = bookmarkTreeNodes[i];

const clone = template.content.cloneNode(true);

if (node.children) {

if (node.dateGroupModified) {

clone.querySelector(".time").textContent = time(node.dateGroupModified); // フォルダが作成された時間

clone.querySelector(".title").textContent = node.title; // フォルダ名

clone.querySelector(".title").id = node.id; // フォルダID

clone.querySelector(".title").onclick = function () { // フォルダ名がクリックされた時の処理

chrome.tabs.create({

url: `../html/main.html?id=${this.id}&title=${this.textContent}`,

});

};

}

getNode(node.children);

}

fragment.appendChild(clone);

}

document.querySelector("ul").appendChild(fragment);

}

getTreeNodes();

chrome.bookmarksAPIのgetTreeメソッドを使用して一度すべてのブックマークを取得した後、フォルダ名を抜き出しています。フォルダ名をクリックすると21行目の関数が実行され、GETパラメーターでフォルダ名とフォルダのIDが送信され新しいタブが開かれます。

フォルダ内のブックマークを一覧表示する

// GETパラメーターで送られてきたフォルダ名とIDを取得する
const url = new URL(window.location.href);
const params = url.searchParams;
const title = params.get("title");
// フォルダ別のブックマーク一覧を表示する
if (params.get("id")) {
  const id = params.get("id");
  document.querySelector("h1").textContent = title;
  chrome.bookmarks.getChildren(id, function (subTree) {
    getNode(subTree);
  });
}

// GETパラメーターで送られてきたフォルダ名とIDを取得する

const url = new URL(window.location.href);

const params = url.searchParams;

const title = params.get("title");

// フォルダ別のブックマーク一覧を表示する

if (params.get("id")) {

const id = params.get("id");

document.querySelector("h1").textContent = title;

chrome.bookmarks.getChildren(id, function (subTree) {

getNode(subTree);

});

}

chrome.bookmarksAPIのgetChildrenメソッドを使用してフォルダ内にあるブックマークを取得します。第一引数にはファルダのID、第二引数には取得したブックマークが返り値で返ってくるので、コールバック関数で処理します。

ブックマーク消す機能を追加

//ブックマーク一覧取得して表示する
function getNode(bookmarkTreeNodes) {
  const fragment = document.createDocumentFragment();
  const template = document.getElementById("template");

  bookmarkTreeNodes.forEach(function (node) {
    const clone = template.content.cloneNode(true);
    clone.querySelector("a").href = node.url;
    clone.querySelector("a").textContent = node.title;
    clone.querySelector(".time").textContent = time(node.dateAdded);
    clone.querySelector(".remove").id = node.id;
    clone.querySelector(".remove").title = node.title;
    //ブックマークを削除する
    clone.querySelector(".remove").onclick = function () {
      const result = confirm(`${this.title}を削除してもよろしいですか？`);
      if (result) {
        chrome.bookmarks.remove(this.id);
        this.parentNode.remove();
      }
    };

    fragment.appendChild(clone);
  });
  document.querySelector("ul").appendChild(fragment);
}

//ブックマーク一覧取得して表示する

function getNode(bookmarkTreeNodes) {

const fragment = document.createDocumentFragment();

const template = document.getElementById("template");

bookmarkTreeNodes.forEach(function (node) {

const clone = template.content.cloneNode(true);

clone.querySelector("a").href = node.url;

clone.querySelector("a").textContent = node.title;

clone.querySelector(".time").textContent = time(node.dateAdded);

clone.querySelector(".remove").id = node.id;

clone.querySelector(".remove").title = node.title;

//ブックマークを削除する

clone.querySelector(".remove").onclick = function () {

const result = confirm(`${this.title}を削除してもよろしいですか？`);

if (result) {

chrome.bookmarks.remove(this.id);

this.parentNode.remove();

}

};

fragment.appendChild(clone);

});

document.querySelector("ul").appendChild(fragment);

}

14行目のonclickに登録されている関数でブックマークを消しています。ブックマークを消すには chrome.bookmarksAPIのremoveメソッドを使用します。引数にはブックマークのidを渡す必要があります。javascriptのparentNode.removeメソッドで表示画面からも消しています。

最後までお読みいただきありがとうございました。