CODEWITHSUNDEEP
directorybookmarksfirefox-addon-webextensions
Robinhoets
Robinhoets

Reputation: 56

How to create a bookmarks folder with javascript?

I'm looking at the MDN Javascript API example for bookmarks.create(). I'm trying to implement the example they have to learn how to make a folder:

function onBookmarkAdded(bookmarkItem) {
  console.log("Bookmark added with ID: " + bookmarkItem.id);
}

chrome.bookmarks.create({
  title: "bookmarks.create() on MDN",
  url: "https://developer.mozilla.org/Add-ons/WebExtensions/API/bookmarks/create"
}, onBookmarkAdded);

This does nothing as far as I can tell. Any help or other examples of how to make a folder for bookmarks would be greatly appreciated.

Upvotes: 3

Views: 3025

Answers (1)

Makyen
Makyen

Reputation: 33336

Assuming you have added "bookmaks" to the permissions in your manifest.json file, then your code works as written to create a bookmark. Because your manifest.json file is not included in the question, we can not determine if that is the problem.

To create a bookmark folder, you either omit the url property or provide url:null in the object that you pass to bookmark.create()

Below is the complete, tested (on FF48.0.2 and Developer Edition, FF50.0a2), extension. It is wrapped in code that allows creating the bookmark when a browser_action button is clicked. I find it easier for testing to have things execute when a browser_action button is clicked rather than just on install/Firefox run. It will:

  1. Create a bookmark titled and linked: bookmarks.create() on MDN
  2. Create a bookmark folder My Bookmark Folder A
  3. Create a bookmark folder My Bookmark Folder B
  4. Create a bookmark folder My Bookmark Folder B.1 within My Bookmark Folder B

All of these are created under "Other Bookmarks" because no parentId is provided when calling bookmark.create() for any of them which are not children of a bookmark folder this extension creates.

background.js:

//* For testing, open the Browser Console
try{
    //alert() is not supported in Firefox. This forces the Browser Console open.
    //  This abuse of a misfeature works in FF49.0b+, not in FF48
    alert('Open the Browser Console.');
}catch(e){
    //alert() throws an error in Firefox versions below 49
    console.log('Alert() threw an error. Probably Firefox version below 49.');
}
//*

chrome.browserAction.onClicked.addListener(function(tab) {
    doBrowserAction();
});

function doBrowserAction(){
    console.log('Background: Doing action');
    createABookmark();
    createABookmarkFolder();
    createABookmarkFolderWithinABookmarkFolder();
}

function onBookmarkAdded(bookmarkItem) {
  console.log("Bookmark added with ID: " + bookmarkItem.id, bookmarkItem);
}

function createABookmark(){
    chrome.bookmarks.create({
      title: "bookmarks.create() on MDN",
      url: "https://developer.mozilla.org/Add-ons/WebExtensions/API/bookmarks/create"
    }, onBookmarkAdded);
}

function createABookmarkFolder(){
    chrome.bookmarks.create({
      title: "My Bookmark Folder A",
      url: null
    }, onBookmarkAdded);
}

function createABookmarkFolderWithinABookmarkFolder(){
    chrome.bookmarks.create({
      title: "My Bookmark Folder B",
      url: null
    }, bookmarkItem => {
        onBookmarkAdded(bookmarkItem);
        chrome.bookmarks.create({
          title: "My Bookmark Folder B.1",
          url: null,
          parentId: bookmarkItem.id
        },onBookmarkAdded 
        );
    });
}

manifest.json:

{
    "description": "Create a bookmark on browser_action button click",
    "manifest_version": 2,
    "name": "Demo: Create Bookmark",
    "version": "0.1",

    "applications": {
        "gecko": {
            //Firefox: must define id to use some features (e.g. option_ui)
            "id": "[email protected]",
            "strict_min_version": "48.0"
        }
    },

    "permissions": [
        "bookmarks"
    ],

    "background": {
        "scripts": [
            "background.js"
        ]
    },

    "browser_action": {
        "default_icon": {
            "32": "myIcon.png"
        },
        "default_title": "Do Action",
        "browser_style": true
    }
}

Obviously, if you are going to use the various functions for more than a demo, you will want to make them more general purpose (i.e. passing callbacks, bookmark properties, etc.).

Note: Please see the section titled "General notes on testing and development of WebExtensions in Firefox" of this answer. Your statement, "This does nothing as far as I can tell", implies that you are not looking at the Browser Console for error messages or console logs.

Upvotes: 5

Related Questions