Chrome bookmark extension 개발기 (1)

chrome.bookmarks API를 사용하여 Extension을 개발하는 프로젝트에 참여하게 되었다.

나는 찐따라 가장 쉬운 부분을 요청했고, 맡았다 ㅎㅎ

extension을 개발한다는 것 자체가 생각도 못해본 일이라 해나가면서 시행착오와 삽질 및 기록용 문서를 작성해나가보려 한다. 또한, 모든 공식 문서가 영어이기도 하고 영어공부를 한다는 느낌으로 내용은 되도록이면 영어로 정리한다.

사용하는 스택은 React +Tailwind CSS 이다.

 

Chrome extension 개발을 위해서는 manifest를 조작해서 사용한다.

이에 대한 자세한 내용은 생략하고 공식문서를 참조한다.

 

 

---

Try creating bookmark

---

🏷 Chrome bookmark API?

• Create, Organize, Manipulate bookmarks

 

 

Add Manifest permission

{
  "name": "My extension",
  ...
  "permissions": [
    "bookmarks"
  ],
  ...
}

 

Object / Properties

• Bookmarks are organized in a tree
• Each node is either a bookmark or a folder(group)

 

Example: Create

Whether the URL parameter exists or not, bookmark or bookmark folder is added.

 

Bookmark Folder

• chrome.bookmarks.create(bookmark: CreateDetails, callback: function)
• CreateDetails { index?, parentID?, title?, url? }

chrome.bookmarks.create(
  {
    'parentId': bookmarkBar.id,
    'title': 'Bookmark Extension project'
  },
  function(newFolder) {
    console.log("added folder: " + newFolder.title);
  },
);

Bookmark

chrome.bookmarks.create({
  'parentId': extensionProjFolderId,
  'title': 'RIDIT repo',
  'url': 'https://github.com/Febase/RIDIT',
});