DEV Community: Louis Bayard

Create Chrome Extension in React

Louis Bayard — Thu, 19 Mar 2020 11:56:41 +0000

When I moved to Edge weeks ago, I found there's no built-in strong password generator in Edge. Then I decide write one for it.

Most of the extensions on marketplace are write many years ago, and they were written in raw HTML, CSS and JavaScript. But we have React and UI component libraries now, life should be easier.

The problem I soon found is there's almost no tutorial for a React extension anywhere. That's why I decide to share everything here.

The source code is origin from my side project 10converters.com.
Repo on Github strong password generator.
Edge Extension Addons Store: Strong Password Generator.

Star the repo on Github or leave a review on Edge Addons Store are both welcome!

Features of the extension

It generates a 15 characters long password with lowercased letters, uppercased letters, numbers and symbols.

But it won't like Chrome built-in password manager, it doesn't:

copy to clipboard automatically
fill in the password/confirm field in web page
manage/backup your password somewhere, not in cloud, not even do it locally

It does:

keep everything running in client side, that means no server at all
manual copy to clipboard

I tried to make it as simple as a one-day-job. Anyone who follows this tutorial could submit your own extension to Chrome Web Store or Microsoft Edge Extension Addons(what a long name) in a single day(but from my experience, Microsoft need 2-3 days to approve your submission).

Extension Basic

Before dive into the details, I want to explain a little the basic structure of an extension of chromium based browser.

This extension structure works on Chrome, Edge and Brave, and maybe other Chromium based browsers I don't know.

There're several key parts of an extension:

manifest

manifest describes what's in the source package. It specified where browser could find background, content script, popup and option pages. As well as it describes permissions required by the extension.

background

A piece of code which is launched when the extension launched, and won't be terminated until extension removed or browser shutdown.

Background code has access to all chrome APIs, other parts are limited. But background doesn't have an UI and can not access DOM.

popup

The UI which is popped up while user click on 'browser action' which is your extension icon button right to the browser address bar.

Most extensions need a popup as entry.

options

It's an optional part of the extension. Not all extensions has an options page. It is used as a configuration UI for the extension. Your extension has to provide an entry for it.

If you have some something complicated to be configured, you need this.

content script

Content script is a piece of JavaScript which runs in a tab with specific URL. the URL pattern is defined in manifest.json. If the URL matched with which is specified in manifest.json, browser will launch the content script. It will be terminated while the URL changed, or tab closed.

If you want to manipulate DOM, you need content script.

So you should already have idea of what these parts are doing now.

Which parts involved in Strong Password Generator extension

Background, not in this tutorial, but there's an empty background.js in repo, just for future use.

Popup, yes. That's the focus of this article. I will show you how to write a Popup in React + Material.

Options, no.

Content script, no.

Start from scratch

Here're 5 steps to create an extension in React from scratch.

Step 1: create a react app

$npx create-react-app extension

This will create a regular react app. Everything else are growing from this seed app.

Step 2: Modify public/manifest.json

You've already had a public/manifest.json after CRA(create-react-app). Change the file as below:

{
    "name": "Strong Password Generator",
    "version": "1.0.0",
    "manifest_version": 2,
    "description": "Strong password generator",
    "icons": {
        "512": "logo512.png"
    },
    "browser_action": {
        "default_icon": "logo512.png",
        "default_popup": "popup.html"
    }
}

Step 3: Create a build script(script/build.sh)

#!/bin/bash

build() {
    echo 'building react'

    rm -rf dist/*

    export INLINE_RUNTIME_CHUNK=false
    export GENERATE_SOURCEMAP=false

    react-scripts build

    mkdir -p dist
    cp -r build/* dist

    mv dist/index.html dist/popup.html
}

build

There're 2 things did in this script:

build react app with some specific environment variables set
renamed index.html into popup.html

INLINE_RUNTIME_CHUNK=false disabled webpack generating inline JavaScript in HTML. Normally webpack will put its own runtime into HTML inline script. But inline script is not allowed by browser extension.

Rename index.html into popup.html because it is required to be popup.html in manifest.json.

After create script/build.sh, don't forget add x permission:

chmod +x script/build.sh

Step 4: Modify package.json

modify scripts like below:

"scripts": {
    "start": "react-scripts start",
    "build": "./script/build.sh",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

Step 5: Build and load into Chrome(or Edge)

$npm run build

Then you will get a 'dist' directory. Load it as unpacked extension in Chrome or Edge. You would see:

The React extension is running.

To be continue

There're still pending issues for a serious extension, like:

How to handle Options page? It's another page rather than Popup, but CRA created a SPA.
Is there any performance issue to write extension in React?
My content script is going to inject some UI component into host pages, can React be applied in this scenario?

And maybe some other topics not related to React too much but still important for a serious extension:

How to obfuscate source code, especially background.js
I'm going to introduce Firebase in my extension, any tips?

All the above will be discussed in the next post if someone interests into these questions. Leave a comment below if you have any other questions, suggestions, any feedback are welcome.

Grade Calculator: Next.js Static HTML App

Louis Bayard — Thu, 12 Mar 2020 07:33:06 +0000

I worked on 10converters.com as my React practice in past month. After some research I found next.js static HTML app is the best way for the project. Hope the sharing could help someone here.

Why Static HTML

Static HTML is the best way for small websites, like blogs and online tools. The benefits of serverless includes:

easy to deploy, static HTML + cloud functions(if necessary)
cloud vendors manages scaling
benefit global CDN of hosting vendor
SEO friendly

But also I found some problems of it, I will mention that later.

Why Next.js

I started this project from simply React + Material UI components. Soon I found search engines doesn't like this pure React because most search engine bots can't handle JavaScripts.

Then I turned into static HTML, tried several solutions like react-snap, react-snapshot. None of them could render every page correctly, until I found Next.js.

Next.js is not limited to SSR(server-side-rendering), it also could 'export' the whole site into static HTML, and it works perfect for all my pages.

What you have to do is just write your app follows Next.js instruction, and then run:

next export

Then you get everything you want. I assume you already know something about Next.js. Now, let's dive into only the part of static HTML exporting stuff.

getInitialProps

Next.js use getInitialProps() to generate dehydrate data. I will show you that it is not mandatory for static HTML apps.

in SSR mode, getInitialProps() will be called in case of:

in server side, if the app is not loaded by browser yet(a new request to your app)
in client side, if the app is already loaded, and navigating to a new page via next/Link component

in static HTML mode, getInitialProps() will be called in case of:

while 'next export' is executing, that's also server side rendering, but not in runtime, but during transpiling.
in client side, if the app is already loaded, and navigating to a new page via next/Link component

For SSR, getInitialProps() works perfect, but not in static HTML mode.

The reason is in static HTML mode, getInitialProps() is called during transpiling, and then dehydrate data are generated before deploy.

If your page renders depends on URL parameters or depends on something related to realtime stuff, like timestamp, user properties, getInitialProps() won't help.

It could be executed in client side, but only if the app is already loaded and navigating to new page via next/Link component.

Links

Never forget that we have static HTML apps for better search engine bot experience, not for better user experience.

Links are essential feature of web, only <a> tag could be recognized by bots.

For example, if you want to put a button which will navigate to another page, do like this:

<Link href="/to-another-page" passHref>
    <Button component="a">Another Page</Button>
</Link>

make sure replace default <div> tag as <a> tag.

Even for bots which could handle JavaScript, they won't 'CLICK' on your page, they just do rendering. If your link is not a <a> tag and depends on for example JavaScript history API, bots won't know them.

next/Link vs Material-UI Link

For links in my Grade Calculator page the links below is just rendered by Material-UI link:

import Link from '@material-ui/core/Link';

<Link href="/calculators/final-grade-calculator">
    Final Grade Calculator
</Link>

next/Link is generally implemented by a push history API, as we mentioned above, search engines doesn't like it.

Using @material-ui/core/Link components lost some of the benefits of Single Page App. for next/Link, relevant pages will be packed together, but if it's a @material-ui/core/Link used in Next.js app, linked pages(JavaScript sources) won't be packed together.

The con using @material-ui/core/Link is all resources have to be reloaded each time user navigate to a new page. Pro is the size of single page is smaller.

As this grade calculator is a small online tool, I assume people will not navigate to other pages. That's why I simply employed Link from Material-UI.

If you are in other cases, try to find some other better solutions.

Error Page

Next.js has a /page/_error.js for error page handling. It works in server side rendering well. _error.js could get HTTP state code via getInitialProps().

In static HTML mode, like we said above in getInitialProps(), _error.js doesn't know what exact error is, is it a 404 or something else. But fortunately, because the app is static HTML, the only possible error is 404.

So always render 404 in _error.js is fine.

NoSSR

If some part of your app really depends on runtime user requests, like URL parameter. use NoSSR for the page or for components on the page.

There're many NoSSR components available, I'm using Material-UI, so I use the NoSSR component comes with Material-UI.

At The End

Even it is a very basic practice, I'd like to share the whole journey later about not only programming, but also deployment and many others.

Enjoy.