Build chrome extension in flutter

Chrome extensions serve as powerful tools to enhance users’ browsing experiences, offering functionalities ranging from productivity tools to entertainment utilities. With Flutter’s cross-platform capabilities and rich widget library, building Chrome extensions becomes not only feasible but also efficient and enjoyable. Let’s embark on a journey to explore how you can leverage Flutter to create a Chrome extension in flutter.

In today’s blog we are going to learn about how to build chrome extension in flutter.

Before starting with the blog, if you are looking to develop Mobile Apps, You may also check our flutter app development services.

Implementation

First, Create A New Project in flutter and Remove non-supported scripts tags from index.html

Navigate to web/index.html file and remove all the <script>..</script> tags as shown below:

2. Set the extension height and width

For setting height and width for Extension add inside style property of <html> tag :

<html style="height: 700px; width: 400px">

1	<html style="height: 700px; width: 400px">

3. Make changes in the manifest.json file

Navigate to web/manifest.json file and replace the entire content with the following :

{
    "name": "QR Extension demo",
    "description": "QR Extension demo",
    "version": "1.0.0",
    "content_security_policy": {
        "extension_pages": "script-src 'self' ; object-src 'self'"
    },
    "action": {
        "default_popup": "index.html",
        "default_icon": "icons/Icon-192.png"
    },
    "manifest_version": 3
}

{

"name": "QR Extension demo",

"description": "QR Extension demo",

"version": "1.0.0",

"content_security_policy": {

"extension_pages": "script-src 'self' ; object-src 'self'"

"action": {

"default_popup": "index.html",

"default_icon": "icons/Icon-192.png"

"manifest_version": 3

}

4. RUN this command to build the extension for web

Open terminal and run below command to build extension for chrome :

flutter build web --web-renderer html --csp

1	flutter build web --web-renderer html --csp

Create flutter app

Create flutter app and add QR code(qr_flutter: ^4.1.0) generator dependency in pubspec.yaml file and add example code in dart file as below :

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final TextEditingController _textController = TextEditingController();
  String generatedQrCode = '';
  int qrColorIndex = 0;


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text("Chrome extension demo"),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: SizedBox(
            height: MediaQuery.of(context).size.height,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                TextField(
                  controller: _textController,
                  decoration: InputDecoration(
                    hintText: 'Please enter QR code',
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(30),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(30),
                    ),
                  ),
                  onChanged: (value) =>
                      setState(() {
                        generatedQrCode = value;
                      }),
                ),
                const SizedBox(height: 30),
                QrImageView(
                  data: generatedQrCode,
                  padding: const EdgeInsets.all(16),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {

const MyHomePage({super.key});

@override

State<MyHomePage> createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

late final TextEditingController _textController = TextEditingController();

String generatedQrCode = '';

int qrColorIndex = 0;

@override

Widget build(BuildContext context) {

return Scaffold(

backgroundColor: Colors.white,

appBar: AppBar(

title: const Text("Chrome extension demo"),

body: SingleChildScrollView(

child: Padding(

padding: const EdgeInsets.all(20),

child: SizedBox(

height: MediaQuery.of(context).size.height,

child: Column(

crossAxisAlignment: CrossAxisAlignment.start,

mainAxisAlignment: MainAxisAlignment.center,

children: [

TextField(

controller: _textController,

decoration: InputDecoration(

hintText: 'Please enter QR code',

enabledBorder: OutlineInputBorder(

borderRadius: BorderRadius.circular(30),

focusedBorder: OutlineInputBorder(

borderRadius: BorderRadius.circular(30),

onChanged: (value) =>

setState(() {

generatedQrCode = value;

}),

const SizedBox(height: 30),

QrImageView(

data: generatedQrCode,

padding: const EdgeInsets.all(16),

);

}

Installation on chrome

Open chrome and Enable the Developer mode option with toggle present in the top-right corner of the chrome browser.

Install the build extension by clicking on load unpacked option and Select the <flutter_project_dir>/build/web folder.

Output

Chrome extension

Type the text in textfield and QR code generator generate the QR code.

Conclusion

Thanks for reading this article ❤️

I hope this blog will help you to learn about how to build chrome extension in flutter and you will be able to implement it. For more updates, make sure to keep following Mobikul Blogs to learn more about mobile app development.

Happy Learning ✍️

Other blogs you may like…

QR Code Generator in Flutter