Boost Productivity: Create Your Own Chrome Extension for Note-Taking
A Step-by-Step Guide to Developing Your Own Chrome Note-Taking Extension
Chrome extensions make our lives much easier and work simpler than before. If you're doing repetitive tasks or need to interact with websites and internet surfing, then there's a good chance you're using a Chrome extension at some point. Whether it's for learning, productivity, or shopping, there are many Chrome extensions that can make your life easier.
Currently, there are over 176k+ Chrome extensions available in the Chrome Web Store, and the number is increasing daily. Learning how to build a Chrome extension can be very beneficial because of the Chrome browser's market size. Around 3.45 billion users use Chrome as their browser.
In this blog, we will learn how to build a Chrome extension that lets you take notes directly from your browser. The process for creating a Chrome extension is straightforward, allowing you to develop any extension based on your ideas.
Prerequisite
Technology is rapidly evolving and expanding quickly. You can build a Chrome extension using any front-end framework. Most popular frameworks have Chrome libraries available. To ensure that building a Chrome extension is not dependent on a specific framework, we will develop it using HTML, CSS, and JavaScript.
To get the most out of this blog, you should be familiar with the following points:
Code Editor (Preferred VS Code)
Basic knowledge of HTML, CSS & Javascript
Setting-up a project
Setting up a Chrome extension project with HTML, CSS, and JavaScript is straightforward. You'll need a popup.html file to structure the extension, a style.css file to style the extension, and a script.js file to add interactivity to the extension.
You can add more files as needed when you want to introduce additional features. For the purpose of making the process of building a Chrome extension easy to understand in this blog, we will need four files: index.html, style.css, script.js, and manifest.json.
Before we start writing our first line of code for the Chrome extension, Without manifest.json, an extension will not work, and the browser won't recognize your extension as valid. The manifest.json file is a crucial component of a Chrome extension because it provides essential information. Without this file, the browser won't be able to load or activate your extension.
So, let's create the necessary files and get started with the code.
Developing the Code
We have learned which files need to be created and why manifest.json is important for building any Chrome extension. Now, let's start building our first Chrome extension and write some code.
index.html
This HTML code creates a simple web page for a notes-taking app. It includes a header with the title "Notes," an input field for adding tasks, and a list (ul) where tasks will be displayed. The CSS file "style.css" is linked to style the page, and the JavaScript file "script.js" is linked to add interactivity, such as adding tasks to the list.
<!-- File Name:- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Notes - Your notes taking APP</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="header">
<h1>Notes</h1>
</div>
<div class="content">
<div class="input-container">
<input type="text" id="taskInput" placeholder="Add a task..." />
</div>
<ul id="todoList"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
Feel free to copy this CSS or create your own to make your Chrome extension more attractive.
/* Filename: Style.css */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
.header {
background-color: #8B93FF;
color: white;
text-align: center;
padding: 1px;
font-size: 1.5em;
width: 30rem;
}
.content {
padding: 20px;
}
.input-container {
margin-bottom: 15px;
}
input[type="text"] {
width: 100%;
padding: 10px;
box-sizing: border-box;
font-size: 16px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
margin: 10px 0;
display: flex;
align-items: center;
font-size: 1.2em;
}
.completed {
text-decoration: line-through;
color: #999;
}
.checkbox {
margin-right: 10px;
cursor: pointer;
}
script.js
//FileName:- script.js
document.addEventListener('DOMContentLoaded', function () {
// Load tasks from storage
chrome.storage.sync.get(['tasks'], function (result) {
const tasks = result.tasks || [];
updateTodoList(tasks);
});
// Handle checkbox change
document.getElementById('todoList').addEventListener('change',
function (event) {
const checkbox = event.target;
const taskId = checkbox.dataset.id;
// Update task as completed
chrome.storage.sync.get(['tasks'], function (result) {
const tasks = result.tasks || [];
const updatedTasks = tasks.map(task => {
if (task.id === taskId) {
task.completed = checkbox.checked;
}
return task;
});
// Save updated tasks
chrome.storage.sync.set({ 'tasks': updatedTasks });
// Remove completed task after 2 seconds
if (checkbox.checked) {
setTimeout(function () {
const updatedTasks = tasks
.filter(task => task.id !== taskId);
chrome.storage.sync.set({ 'tasks': updatedTasks });
updateTodoList(updatedTasks);
}, 2000);
}
});
});
// Add task on Enter key press
document.addEventListener('keypress', function (event) {
if (event.key === 'Enter') {
const input = document.getElementById('taskInput');
const taskText = input.value.trim();
if (taskText !== '') {
chrome.storage.sync.get(['tasks'], function (result) {
const tasks = result.tasks || [];
const newTask = {
id: Date.now().toString(),
text: taskText, completed: false
};
const updatedTasks = [...tasks, newTask];
chrome.storage.sync.set({ 'tasks': updatedTasks });
updateTodoList(updatedTasks);
input.value = ''; // Clear input field
});
}
}
});
// Update the displayed todo list
function updateTodoList(tasks) {
const todoList = document.getElementById('todoList');
todoList.innerHTML = '';
tasks.forEach(task => {
const listItem = document.createElement('li');
listItem.innerHTML = `
<input type="checkbox" class="checkbox" data-id="${task.id}"
${task.completed ? 'checked' : ''}>
<span class="${task.completed ? 'completed' : ''}">
${task.text}</span>`;
todoList.appendChild(listItem);
});
}
});
This JavaScript code is for a Chrome extension that allows users to create and manage a list of tasks. Here's a breakdown of what it does:
The code waits for the DOMContentLoaded event before executing, ensuring that the DOM elements are fully loaded before any manipulation.
It retrieves the list of tasks from Chrome storage using the Chrome storage API.
It updates the displayed list of tasks based on the retrieved data.
It adds event listeners to handle user interactions:
Checkbox change: Updates the task's completion status in the storage when a checkbox is clicked. If a task is marked as completed, it is removed from the list after 2 seconds.
Keypress (Enter): Adds a new task to the list when the Enter key is pressed. The new task is added to the storage and displayed in the list.
The updateTodoList function is called to update the displayed list of tasks based on the current data in storage.
manifest.json
{
"manifest_version": 3,
"name": "Simple Note Taker",
"version": "1.0",
"description": "A simple note taking app.",
"action": {
"default_title": "Popup",
"default_popup": "index.html"
},
"permissions": [
"storage"
]
}
The manifest.json file is a required file for Chrome extensions. It provides important information about the extension, such as its name, version, description, and what permissions it requires. It also specifies the background scripts, content scripts, and other resources that the extension uses.
Here's a breakdown of the code in the manifest.json file:
"manifest_version": 3: Specifies the version of the manifest file format. Version 3 is the latest version at the time of writing.
"name": "Simple Note Taker": Specifies the name of the extension.
"version": "1.0": Specifies the version of the extension.
"description": "A simple note taking app.": Provides a brief description of the extension.
"action": Specifies the action that triggers the extension. In this case, when the extension icon is clicked, a popup with the title "Popup" and content from "index.html" is displayed.
"permissions": Specifies the permissions required by the extension. In this case, the extension requires storage permission to store and retrieve data using the Chrome storage API.
Testing the Extension
To test our Chrome extension, you need to follow these steps.
Open Chrome and navigate to Extensions, then select Manage Extensions from the browser menu. Once you're on the extensions page, enable Developer Mode.
Now, click on the Load unpacked button and select the project folder containing all the files from your device. After completing this step, you will see your extension appear in your browser. You can also pin the extension in the browser for easy access.
Output
Write your note and press enter to add the note.
After adding a note, it will appear as shown in the image below.
Publishing the Chrome Extension
We have tested our app, and it's working as expected. Publishing a Chrome extension is essential for developers passionate about creating innovative solutions. It offers a platform to present our work to a broader audience and gather valuable feedback. Additionally, publishing extensions enables us to contribute to the developer community, sharing our expertise and improving the browsing experience for users around the world.
Use this official link by Google for a step-by-step guide on how to publish your Chrome extension to the Google Web Store.
Conclusion
In summary, creating a Chrome extension is a valuable skill that opens up numerous possibilities for enhancing your browsing experience and improving productivity. By following the steps outlined in this blog, you can develop a simple yet effective note-taking app directly in your Chrome browser.
This project not only serves as a practical tool for personal use but also acts as a great starting point for diving deeper into the world of Chrome extension development. As the Chrome Web Store continues to grow, there's never been a better time to explore the potential of extensions and share your creations with the world. Whether for personal satisfaction or contributing to the community, developing Chrome extensions can be a rewarding journey.
Thank you for reading my article. Please Follow Me, Feel free to comment and share your suggestions/thoughts 😊