本教學將引導如何開發一個Chrome擴展套件，此套件能自動將新建的書籤按照其域名自動分類到對應的文件夾中。我們會使用background.js來實現這個功能。

前提

擁有基本的JavaScript知識。
已安裝Chrome瀏覽器。

步驟1：創建擴展目錄

首先，在你的電腦上創建一個新的資料夾來存放擴展文件，例如命名為BookmarkOrganizer。

步驟2：撰寫manifest.json

在BookmarkOrganizer資料夾內，創建一個名為manifest.json的文件，並加入以下內容：

1
2
3
4
5
6
7
8
9
10
{
  "manifest_version": 3,
  "name": "自動整理書籤到域名資料夾",
  "version": "1.0",
  "description": "將新建的書籤自動整理到以域名命名的資料夾中。",
  "permissions": ["bookmarks"],
  "background": {
    "service_worker": "background.js"
  }
}

步驟3：撰寫background.js

在BookmarkOrganizer資料夾內，創建一個名為background.js的文件，並將提供的程式碼粘貼到這個文件中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
let folderCreationLocks = {}; // 鎖定正在創建的文件夾
let domainFoldersCache = {}; // 緩存已創建的域名文件夾ID

chrome.bookmarks.onCreated.addListener(function(id, bookmark) {
  if (!bookmark.url) return; // 忽略非URL書簽（即文件夾）

  const mainFolderName = "整理資料夾";
  const url = new URL(bookmark.url);
  const domain = url.hostname;

  ensureMainFolderExists(mainFolderName, function(mainFolderId) {
    if (!mainFolderId) return; // 如果沒有找到或創建主文件夾，則退出

    ensureDomainFolderExists(mainFolderId, domain, function(domainFolderId) {
      if (domainFolderId) {
        // 存在域名文件夾，移動書簽
        chrome.bookmarks.move(id, {parentId: domainFolderId});
      }
    });
  });
});

function ensureMainFolderExists(mainFolderName, callback) {
  // 查找或創建主文件夾
  chrome.bookmarks.search({title: mainFolderName}, function(results) {
    let mainFolder = results.find(result => result.title === mainFolderName && !result.url);
    if (!mainFolder) {
      chrome.bookmarks.create({title: mainFolderName}, function(newFolder) {
        callback(newFolder.id);
      });
    } else {
      callback(mainFolder.id);
    }
  });
}

function ensureDomainFolderExists(mainFolderId, domain, callback) {
  if (folderCreationLocks[domain]) {
    // 如果域名文件夾正在創建中，則稍後重試
    setTimeout(() => ensureDomainFolderExists(mainFolderId, domain, callback), 100);
    return;
  }

  if (domainFoldersCache[domain]) {
    // 如果域名文件夾已存在於緩存中，直接使用
    callback(domainFoldersCache[domain]);
    return;
  }

  // 鎖定域名文件夾創建操作
  folderCreationLocks[domain] = true;

  chrome.bookmarks.getChildren(mainFolderId, function(children) {
    let domainFolder = children.find(child => child.title === domain && !child.url);
    if (!domainFolder) {
      // 創建域名文件夾
      chrome.bookmarks.create({parentId: mainFolderId, title: domain}, function(newFolder) {
        domainFoldersCache[domain] = newFolder.id; // 緩存文件夾ID
        delete folderCreationLocks[domain]; // 解鎖
        callback(newFolder.id);
      });
    } else {
      domainFoldersCache[domain] = domainFolder.id; // 緩存文件夾ID
      delete folderCreationLocks[domain]; // 解鎖
      callback(domainFolder.id);
    }
  });
}

步驟4：加載擴展到Chrome

打開Chrome瀏覽器，進入chrome://extensions/頁面。
開啟開發者模式。
點擊「加載已解壓的擴展」，選擇剛剛建立的BookmarkOrganizer資料夾。

步驟5：測試擴展

現在，當你創建一個包含URL的書籤時，擴展會自動將該書籤移動到一個以該URL的域名命名的資料夾內。如果相應的域名資料夾不存在，擴展會自動創建一個。

解析background.js

監聽書籤創建事件：使用chrome.bookmarks.onCreated.addListener來監聽書籤的創建事件。
確保主資料夾存在：ensureMainFolderExists函數會檢查是否存在一個名為"整理資料夾"的資料夾，如果不存在則創建它。
確保域名資料夾存在：ensureDomainFolderExists函數負責創建和維護以域名命名的資料夾，並將新的書籤移動到相應的資料夾中。

結語

通過上述步驟，成功創建了一個能夠自動整理書籤到域名資料夾的Chrome擴展套件。
會開發這個是因為日漸增加的書籤，書籤已經突破幾萬筆，看起來很亂，想了想有沒有解決方法，找了CHROME套件沒找到能解決這個問題的套件，最後決定寫個chrome套件來解決，其實是第一次開發chrome套件，此文章當作個筆記，沒做到上架的程度，開發中也遇到很多問題，例如一開始寫的時候，書籤一口氣複製進去，域名資料夾重複建立了，發現是異步原因，也發現根目錄資料夾新增刪除移動都沒反應，查文檔是根目錄不能做這些操作。