Clone daily.dev Using Flutter and Run It as a Chrome Extension

Sahibul Nuzul Firdaus — Mon, 23 May 2022 05:54:38 +0000

Introduction

Lately I've been trying to emulate and create an application similar to the daily.dev application. If you don't know about daily.dev, in short, it's a platform that features news and articles about personalized technology for developers.

The last few years I learned and got used to building apps using Flutter & Dart. In this journey of mine, I was inspired by the daily.dev platform. Therefore I tried to make a Flutter application similar to daily.dev and make the Flutter application run as a Chrome extension application.

...

How do I do that? 🤔

Create your Flutter project or Use an existing Flutter project

You can create a Flutter project from scratch or use a Flutter project that you created earlier. Of course, to build a chrome extension with Flutter, the Flutter project must support the Web platform.

I myself have created a simple Flutter application similar to daily.dev. This Flutter app is made using Flutter 2.0

You can see on the Github repository below,

sahibul-nf / daily

daily.dev Chrome extension clone using Flutter

daily

A new Flutter project.

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

View on GitHub

Setup manifest.json

In the manifest.json file located in the /web folder, I made changes to the file something like the following.

{
  "name": "daily",
  "short_name": "daily",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#0175C2",
  "theme_color": "#0175C2",
  "description": "A new Flutter project.",
  "orientation": "portrait-primary",
  "prefer_related_applications": false,
  "chrome_url_overrides": {
    "newtab": "index.html"
  },
  "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
}

...

Setup index.html

Next in the index.html file, I made some changes namely,

set style height and width in the HTML tag for the size of the application display that appears when the chrome extension is clicked.

<html style="height: 650px; width: 350px;">

Next, inside the body tag I add the following script tag. And comment or delete script tags that are available by default there.

<script src="main.dart.js" type="application/javascript"></script>

More or less the index.html file looks like the following.

<!DOCTYPE html>
<html style="height: 650px; width: 350px;">
<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.
    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.
    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
  <base href="$FLUTTER_BASE_HREF">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="daily">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>daily</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->
  <!-- <script>
    var serviceWorkerVersion = null;
    var scriptLoaded = false;
    function loadMainDartJs() {
      if (scriptLoaded) {
        return;
      }
      scriptLoaded = true;
      var scriptTag = document.createElement('script');
      scriptTag.src = 'main.dart.js';
      scriptTag.type = 'application/javascript';
      document.body.append(scriptTag);
    }
    if ('serviceWorker' in navigator) {
      // Service workers are supported. Use them.
      window.addEventListener('load', function () {
        // Wait for registration to finish before dropping the <script> tag.
        // Otherwise, the browser will load the script multiple times,
        // potentially different versions.
        var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
        navigator.serviceWorker.register(serviceWorkerUrl)
          .then((reg) => {
            function waitForActivation(serviceWorker) {
              serviceWorker.addEventListener('statechange', () => {
                if (serviceWorker.state == 'activated') {
                  console.log('Installed new service worker.');
                  loadMainDartJs();
                }
              });
            }
            if (!reg.active && (reg.installing || reg.waiting)) {
              // No active web worker and we have installed or are installing
              // one for the first time. Simply wait for it to activate.
              waitForActivation(reg.installing || reg.waiting);
            } else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
              // When the app updates the serviceWorkerVersion changes, so we
              // need to ask the service worker to update.
              console.log('New service worker available.');
              reg.update();
              waitForActivation(reg.installing);
            } else {
              // Existing service worker is still good.
              console.log('Loading app from service worker.');
              loadMainDartJs();
            }
          });
        // If service worker doesn't succeed in a reasonable amount of time,
        // fallback to plaint <script> tag.
        setTimeout(() => {
          if (!scriptLoaded) {
            console.warn(
              'Failed to load app from service worker. Falling back to plain <script> tag.',
            );
            loadMainDartJs();
          }
        }, 4000);
      });
    } else {
      // Service workers not supported. Just drop the <script> tag.
      loadMainDartJs();
    }
  </script> -->
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

...

Build an app and let’s get a try! 🚀

After doing some of the steps above, then I build the app with the following command.

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

After the application build is complete, then open Google Chrome and go to chrome://extensions/

And enable Developer mode.

Next, click Load unpacked and select the build/web folder which is the result of the Flutter Web application that has been built. After that, the chrome extension application will appear as shown in the image below.

...

Result

Now I can run Chrome extension apps created using Flutter and it runs fine.
Awesome 🤩

...

Demo App

See a more complete video demo via the following video.

...

Ending

This was a fantastic learning experience for me 🚀.

And finally, I can make an application that is similar to daily.dev by providing chrome extension support in the daily.dev application cloning project that I created using Flutter. Awesome 😁 🤩

daily.dev Clone with Flutter and Appwrite

Sahibul Nuzul Firdaus — Fri, 13 May 2022 22:15:02 +0000

Overview of My Submission

This application is a blog application inspired by the platform daily.dev.

I'm trying to implement Appwrite as backend service and with Flutter as frontend to clone the platform daily.dev

Submission Category:

Mobile Moguls

Link to Code

sahibul-nf / daily

daily.dev Chrome extension clone using Flutter

daily

A new Flutter project.

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

View on GitHub

Working:

There are total 2 parts in the app.

Authentication
Article Feed or Blog Post

So, here Authentication is implemented with Appwrite. It's so easy to integrate Auth & DB in a flutter app using Appwrite.

In the article feed section, here is a list of articles or blog posts taken from RssFeed of several blogs on the internet.

Additional Resources / Info

Demo

Demo Video

Screenshots

Thank you

Thank you so much for checking out my project. It was an awesome learning experience for me. Thank you for your time.

DEV Community: Sahibul Nuzul Firdaus

Clone daily.dev Using Flutter and Run It as a Chrome Extension

Introduction

How do I do that? 🤔

Create your Flutter project or Use an existing Flutter project

sahibul-nf / daily

daily.dev Chrome extension clone using Flutter

daily

Getting Started

Setup manifest.json

Setup index.html

Build an app and let’s get a try! 🚀

Result

Demo App

Ending

daily.dev Clone with Flutter and Appwrite

Overview of My Submission

Submission Category:

Link to Code

sahibul-nf / daily

daily.dev Chrome extension clone using Flutter

daily

Getting Started

Working:

Additional Resources / Info

Demo

Screenshots

Thank you