If you're a Firefox user who loves bookmarks but wants a more visual way to manage them, you're in the right place. In this blog post, we'll guide you through the process of building a Firefox extension that allows you to manage bookmarks using a sleek card-based interface. You'll be able to view, add, edit, and delete bookmarks with ease.
Before we dive into the development process, make sure you have the following:
Mozilla Firefox installed on your computer.
A text editor or integrated development environment (IDE) for writing code.
Basic knowledge of HTML, CSS, and JavaScript.Let's break down the steps to create this extension:
Start by creating a project folder with a meaningful name, like "BookmarkManager."
A Firefox extension begins with a manifest file that describes the extension's details and permissions. Here's a basic manifest.json:
json
{
"manifest_version": 3,
"name": "Bookmark Manager",
"version": "1.0",
"description": "An extension to manage bookmarks with a card-based interface.",
"permissions": ["bookmarks", "activeTab"],
"icons": {
"48": "icon.png"
},
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icon.png",
"48": "icon.png",
"128": "icon.png"
}
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
]
}Customize the above information to match your extension's name and description.
Design your popup page where bookmarks will be displayed as cards:
html
<!DOCTYPE html>
<html>
<head>
<title>Bookmark Manager</title>
<style>
/* Add your CSS styles for the card-based view here */
</style>
</head>
<body>
<h1>My Bookmarks</h1>
<div id="bookmarkContainer">
<!-- Bookmark cards will be displayed here -->
</div>
<script src="popup.js"></script>
</body>
</html>Add JavaScript code to display, add, edit, and delete bookmarks:
javascript
// Function to display bookmarks as cards
function displayBookmarks() {
browser.bookmarks.getTree().then((tree) => {
const bookmarkContainer = document.getElementById("bookmarkContainer");
bookmarkContainer.innerHTML = ""; // Clear the container
// Helper function to traverse bookmarks
function traverseBookmarks(bookmarkNode) {
if (bookmarkNode.children) {
for (let child of bookmarkNode.children) {
if (child.url) {
// Create a card for the bookmark
const card = document.createElement("div");
card.classList.add("bookmark-card");
card.innerHTML = `
<a href="${child.url}" target="_blank">${child.title}</a>
<button class="delete-button">Delete</button>
<button class="edit-button">Edit</button>
`;
// Add a delete button to the card
const deleteButton = card.querySelector(".delete-button");
deleteButton.addEventListener("click", () => {
browser.bookmarks.remove(child.id);
card.remove();
});
// Add an edit button to the card
const editButton = card.querySelector(".edit-button");
editButton.addEventListener("click", () => {
const newTitle = prompt("Enter a new title for the bookmark:", child.title);
if (newTitle !== null) {
browser.bookmarks.update(child.id, { title: newTitle });
card.querySelector("a").textContent = newTitle;
}
});
bookmarkContainer.appendChild(card);
}
if (child.children) {
traverseBookmarks(child);
}
}
}
}
traverseBookmarks(tree[0]); // Start with bookmarks in the "Other Bookmarks" folder
});
}
// Function to add a new bookmark
function addBookmark() {
const url = prompt("Enter the URL of the new bookmark:");
if (url) {
const title = prompt("Enter the title for the bookmark:");
if (title) {
browser.bookmarks.create({ title, url });
displayBookmarks(); // Refresh bookmark display after adding
}
}
}
// Add an event listener for the "Add Bookmark" button
const addButton = document.getElementById("add-button");
addButton.addEventListener("click", addBookmark);
// Add an event listener for when the popup is opened
document.addEventListener("DOMContentLoaded", displayBookmarks);Apply CSS styles to achieve the desired card-based look:
css
/* Styles for the card container */
#bookmarkContainer {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* Styles for the bookmark card */
.bookmark-card {
border: 1px solid #ccc;
padding: 10px;
width: 200px;
background-color: #f9f9f9;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.bookmark-card a {
text-decoration: none;
color: #333;
}
.delete-button, .edit-button {
background-color: #ff6347;
color: #fff;
border: none;
cursor: pointer;
padding: 5px 10px;
margin-top: 5px;
}To test your extension locally:
Disable other extensions in Firefox that might interfere with development.
Open Firefox.
Go to the menu (three horizontal lines in the top right corner) and click "Add-ons."
In the Add-ons window, click "Extensions" in the left sidebar.
Click the gear icon in the top-right of the window and choose "Debug Add-ons."
Click "Load Temporary Add-on."
Navigate to the folder containing your extension files and select the manifest.json file.Your extension will load, and you should see the extension icon in the Firefox toolbar. Clicking on it will open the popup page, where you can manage bookmarks with the card-based interface.
Congratulations! You've built a Firefox extension for managing bookmarks using a card-based user interface. You can further enhance this extension by adding more features, such as organizing bookmarks into folders or syncing with Firefox's native bookmark system. Feel free to explore the Mozilla Developer Network (MDN) for more information on extending and improving your Firefox extensions.
Happy bookmarking!