Create a Bare Minimum Chrome Extension App (Taskan)

There is a chance an extension might be a viable solution to that native code integration limitation your having on your web platform.

All about Chrome Extension

Chrome Extensions are software programs, built on web technologies (such as HTML, JavaScript, CSS, and some resource Assets) that enable users to customize the Chrome browsing experience.

Some benefits of Chrome Extensions 🎅🏾

Chrome Extensions have the advantage of benefiting from JavaScript APIs that the browser provides. Their access to Chrome APIs makes them more potent than a web app. The following are just a few examples of what extensions can do:

• Change the functionality or behavior of a website.
• Allow users to collect and organize information across websites.
• Add features to Chrome DevTools.
• Change website design (layout, style, and appearance of websites).
• Some have the ability to block or filter Ads.
• Enhance Security.

What are Chrome Extension files.? 🤔

When building a chrome extension there are a few things and guidelines you need to take into thought before you start development.

Chrome Extensions contain different files, depending on the functionality provided. The following are some of the most frequently used files:

Manifest file: This file should be named strictly as manifest.json and has to be located in the root directory. This file is also responsible for recording important metadata, defining resources, and permission declarations, and indicating which files to run in the background.

Service worker: This file handles and listens for browser events. There are many events, such as navigating to a new page, removing a bookmark, or closing a tab. It can use all the Chrome APIs.

Content scripts: This file executes Javascript in the context of a web page. They can also read and modify the DOM of the pages they're injected into. Content Scripts can only use a subset of the Chrome APIs but can indirectly access the rest by exchanging messages with the extension service worker.

Let's start the development

The Tech Stack of this project was based on a number of factors that lead to Flutter as the preferred framework.

Quick Introduction to Flutter 📽️

Flutter is a simple and high-performance multiplatform framework based on Dart language, which provides high performance with a native look and feel. you can find a brief introduction to flutter, an easy computer setup guide, and some of its features that make it the ninja of all platforms right below this Dot.

Flutter is a cross-platform UI toolkit designed to allow code reusing across multiple platforms such as iOS, Android, Web, and Desktop.

Lets get Technical 🕹️

We will start by creating a new Flutter project
using the flutter create command. use your preferred cli and input the following commands.

flutter create taskan

The main.dart file is the one we will be focusing on, that's where our logic and view will be.

Don't get worried when folder structures don't match, just make sure you have the necessary ones ( lib, web, and pubspec.yaml ) and the rest we won't be needing in our coverage.

Your lib/main.dart should look like this:

Part 2 Coming next...

Follow us as we get to cover and learn interesting topic about api / websocket with race conditions, distributed systems, machine learning and ai development.