Create Todo app on Chrome Extension with React

Have you ever wanted to spam yourself with annoying and invasive notifications? Or remind yourself that our work plan for today is coming whenever the web?

Wow, not far away.

The Chrome Extension can do all of this, and the best part is that you can’t exit the app by reloading the page. Plus, not everyone knows how to turn off these annoying things.

In this article, we will try to create a Todo application and deploy it under Local as a Chrome extension with React. Actually this is not necessary, but try crazy a little it awakens creativity a bit.

Prerequisites:

• Introductory knowledge about React
• A little familiarity with custom React Hooks

Clone the Repo:

Clone: https://gitlab.com/sk3pt1cc/react-starter

Run cmd npm install & npm run start

Open localhost:3000 to try and run the application.

Create Todo App

There are 3 parts: App Component, Component form to create Todos, and useTodos Hook. We will go into each part in detail

<CreateTodoForm />

A simple form to enter the Label and a button to save information. When it receives a function createNewTodo prop.

useTodos

This is the most important part so we will analyze it little by little.

First getTodos , a function to get Todos data from under local storage. If the todos does not exist we will return an empty array. Otherwise we will return a javascript object as a string.

const [todos, setTodos] = React.useState(getTodos());

We will use State to re-render every time the todos change the value. The initial value will be called from getTodos .

A function updates the new todos under local storage and sets them in State. We need to use JSON.stringify in newTodos because local storage only stores strings.

A function to mark Todos is complete. First, we need to retrieve data from the todos array in State. Next, we will use the array spread syntax to copy the array into a new field so that it doesn’t convert its value. Finally, we update completed and call updateTodos to update the new array.

A function to add a todo to-do list. We need to create a new todo objec via <CreateTodoForm /> . We also set the value to completed = false and use the uuid() library to create a unique id for the new todo. and call updateTodos to append newTodo to the current todos network.

The last part returns the todos array and refers to two functions: addTodos and setTodoCompleted .

<App /> Component

App Component will bring it all together. We will append the items in the todos and render each item a label and a checkbox. They will perform todos markup completion validation with the onChange event calling the setTodoCompleted function in setTodoCompleted .

Let’s beautify the application form with the following basic styles:

App.css

Everything is ready, we will run the application to check it.

Deploying as a Chrome Extension

Open public/manifest.json and configure the information for the application as follows:

The browser_action.default_popop attribute will highlight the main page index, the common case would be index.html . Next we will build the application with the npm run build from the app’s root directory.

Open Chrome and enter chrome://extensions . Turn on Developer Mode at the top right of the browser window and click on Load Unpacked on the left.

Navigate to the build/ directory and select select. Soon your extension will appear in the list.

Note: The application may not work. Google Chrome policy prevents extensions from being executed inline. To solve this problem, we need to add this line to manifest.json :

If your extension encounters an error, return to chrome://extensions and click on Errors to see the words Refused to execute inline script... Rebuild the application and reload it inside the chrome Load unpacked library Load unpacked .

Let’s see the results offline:

And now we can create a Google Chrome extension. The world is in your hands, let’s develop good technology applications. Thanks for watching this article. All contributions will be noted and noted for the following articles.

Thanks and Best Regards

References

https://medium.com/javascript-in-plain-english/creating-a-todo-chrome-extension-with-react-custom-hooks-and-local-storage-f8f8d8910ee