DEV Community

Cover image for Create a Bare Minimum Chrome Extension App (Taskan)
Kenzy Limon
Kenzy Limon

Posted on

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.

Easily create a Bare Minimum Chrome Extension App (Taskan)

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:

Chrome extension folder

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

Enter fullscreen mode Exit fullscreen mode

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

Flutter project folder

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:

import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
// This call to setState tells the Flutter framework that something has
// changed in this State, which causes it to rerun the build method below
// so that the display can reflect the updated values. If we changed
// _counter without calling setState(), then the build method would not be
// called again, and so nothing would appear to happen.
_counter++;
});
}
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
// Column is also a layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Invoke "debug painting" (press "p" in the console, choose the
// "Toggle Debug Paint" action from the Flutter Inspector in Android
// Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
// to see the wireframe for each widget.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
view raw main.dart hosted with ❤ by GitHub

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.

Top comments (0)