Google Chrome is a popular web browser that allows users to customize their browsing experience with extensions. Chrome extensions are small software programs that add functionality to the browser. They can modify and enhance the appearance and functionality of web pages, manage downloads, block ads, and more. In this blog, we will learn how to create a simple Chrome extension that can help users manage their to-do list. We will also add a nice design to the extension using CSS and neo-brutalism design UI.
.
.
.
Step 1: Setting up the Chrome Extension
To create a Chrome extension, we first need to create a new folder and name it whatever we like. In this example, let's name it "todo-extension". Inside this folder, we will create the following files:
- manifest.json
- popup.html
- popup.js
- popup.css . .
The manifest.json file is a configuration file that provides information about the extension, such as the name, version, and permissions. Here is an example of a basic manifest.json file for our to-do list extension:
{
"manifest_version": 3,
"name": "To-do List",
"version": "1.0",
"description": "A simple to-do list extension",
"action": {
"default_popup": "popup.html"
},
"permissions": ["storage"]
}
In the manifest.json file, we specify the name, version, and description of the extension. We also specify the icons that will be used for the extension, and the permissionsrequired to use the extension. In this case, we need permission to access the browser storage.
.
.
Step 2: Creating the UI
In the popup.html file, we will create the UI for the to-do list extension. This file will be displayed when the user clicks on the extension icon in the Chrome toolbar. Here is an example of the code for the popup.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>To-do List</title>
<link rel="stylesheet" type="text/css" href="popup.css" />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div id="container">
<h1>To-do List</h1>
<form id="todo-form">
<input type="text" id="todo-input" placeholder="Add a new todo..." />
<button type="submit" id="add-todo">Add</button>
</form>
<ul id="todo-list"></ul>
</div>
<script src="popup.js"></script>
</body>
</html>
.
.
**
Here's the CSS code which I guess is not relevant to our topic and you must have done this simple designing till now.
**
.
body {
background-color: #262626;
color: #fff;
font-family: "Open Sans", Arial, sans-serif;
font-size: 14px;
margin: 0;
padding: 0;
}
#container {
max-width: 350px;
margin: 20px auto;
padding: 10px;
box-sizing: border-box;
max-height: 400px;
overflow-y: auto;
}
#container::-webkit-scrollbar {
width: 6px;
background-color: #f1f1f1;
}
#container::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 3px;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
form {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
input[type="text"] {
padding: 10px;
font-size: 14px;
border: none;
border-radius: 3px;
outline: none;
box-shadow: none;
background-color: #fff;
color: #000;
margin-bottom: 10px;
}
button[type="submit"] {
padding: 10px;
font-size: 14px;
border: none;
border-radius: 3px;
outline: none;
box-shadow: none;
background-color: #4285f4;
color: #fff;
cursor: pointer;
margin-top: 10px;
}
button[type="submit"]:hover {
background-color: #3367d6;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
padding: 10px;
font-size: 14px;
background-color: #eee;
border-radius: 3px;
margin-bottom: 10px;
color: #000;
}
li:last-child {
margin-bottom: 0;
}
.
.
Step 3: Adding Functionality with JavaScript
Now we will add the functionality to the extension using JavaScript. In the popup.js file, we will write the code that will handle the user input and save the todosto the browser storage.
First, we will get the form and input field using their ids. Then we will add an event listener to the form that will trigger when the user submits the form. In the event listener, we will prevent the default form submission behavior, get the value of the input field, clear the input field, add the todo item to the list, and save the todo to the browser storage. We will also define two helper functions: addTodoToListand saveTodoToStorage. The addTodoToListfunction will add the todo item to the unordered list (ul) in the UI, and the saveTodoToStoragefunction will save the todo item to the browser storage.
// get the form and input field
const form = document.getElementById("todo-form");
const input = document.getElementById("todo-input");
// add event listener to the form
form.addEventListener("submit", function (event) {
// prevent default form submission behavior
event.preventDefault();
// get the value of the input field and clear the field
const todoText = input.value;
input.value = "";
// add the todo item to the list and save it to the browser storage
addTodoToList(todoText);
saveTodoToStorage(todoText);
});
// add a todo item to the list
function addTodoToList(todoText) {
const list = document.getElementById("todo-list");
const item = document.createElement("li");
item.innerText = todoText;
list.appendChild(item);
}
// save a todo item to the browser storage
function saveTodoToStorage(todoText) {
chrome.storage.sync.get(["todos"], function (result) {
const todos = result.todos || [];
todos.push(todoText);
chrome.storage.sync.set({ todos: todos });
});
}
// load todos from the browser storage when the popup is opened
chrome.storage.sync.get(["todos"], function (result) {
const todos = result.todos || [];
for (const todo of todos) {
addTodoToList(todo);
}
});
.
A Simple and In-depth explanation of what the above code does:
__
The first three lines of the code define variables for the input, button, and list elements of the to-do list. These variables are used throughout the code to interact with these elements.
__
The next block of code adds an event listener to the button element that handles adding new to-do items to the list. When the button is clicked, the code gets the text from the input field, checks that it is not empty, creates a new list item element, sets its text content to the input text, adds it to the list, and clears the input field.
__
The next block of code loads any existing to-do items from storage when the popup is opened. This code uses the chrome.storage.sync API to get the "todos" key from storage, which contains an array of to-do items. If the "todos" key exists, the code creates a new list item element for each item in the array and adds it to the list.
__
The final block of code saves the current to-do items to storage when the popup is closed. This code uses the window.beforeunload event to detect when the popup is being closed. It then creates an array of the text content of each list item and saves it to the "todos" key in storage using the chrome.storage.sync API.
Overall, this code handles the creation, display, and storage of to-do items in the to-do list extension.
Step 3:How to load your Chrome extension?:
Open Google Chrome and type chrome://extensions in the address bar. This will take you to the Extensions page.
Click on the toggle switch in the upper right-hand corner to enable Developer Mode.
Click on the "Load unpacked" button in the upper left-hand corner. This will open a file dialog box.
Navigate to the directory where your extension is saved and select the folder.
Click "Select Folder". Your extension will now be loaded and ready to use.
Note: You will need to reload the extension every time you make changes to the code. To do this, go back to the Extensions page and click the "Reload" button next to your extension.
.
.
Before We End...
That's all for now. I hope you've found this helpful
Regards:
Md Mafizuddin
For any queries connect with me:
LinkedIn: @mafizonly
Twitter: @whyknowmee
Github: @pacehut
Instagram: @mafiz._
Top comments (0)