• Stars
    star
    209
  • Rank 188,325 (Top 4 %)
  • Language
    TypeScript
  • License
    BSD 3-Clause "New...
  • Created about 6 years ago
  • Updated about 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Boilerplate code for a Chrome extension using TypeScript, React, and Webpack.

TypeScript / React / Webpack / Chrome Extension Boilerplate

You can use this boilerplate code to start developing a Chrome extension using TypeScript/JS, React for the frontend, and Webpack as the build system.

At Duo Labs, we found ourselves creating Chrome extensions with this stack frequently enough that we thought it would be nice to have a consistent starting point. Getting all the individual pieces configured from scratch can be a pain.

Get started

Clone this repository, and then, in this directory:

  1. npm install
  2. npx webpack

Your unpacked Chrome extension will be compiled into dist/. You can load it into Chrome by enabling developer mode on the "Extensions" page, hitting "Load unpacked", and selecting the dist/ folder. You can pack the extension into a .crx by using the "Pack extension" button on the same page.

Use npx webpack to recompile after editing.

Source layout

The default source layout looks like this:

src
β”œβ”€β”€ app
β”‚Β Β  β”œβ”€β”€ background.ts
β”‚Β Β  └── content.ts
β”œβ”€β”€ styles
β”‚Β Β  └── popup.css
└── ui
    └── popup.tsx
  • background.ts will get loaded as the extension background script, and will run persistently in the background
  • content.ts will be injected into the URLs matched by dist/manifest.json's matches entry (see Match Patterns documentation)
  • popup.tsx will become the extension's "browser action" popup
    • NOTE: popup.tsx compiles into dist/js/popup.js. It is loaded into dist/popup.html by an explicit <script> tag on that page. dist/popup.html is static and is not automatically generated by the build process.
  • popup.css contains styles for the popup. These styles are loaded with style-loader via the import line at the top of popup.tsx (and directly injected into the popup via JavaScript)

Dist layout

dist
β”œβ”€β”€ _locales
β”‚Β Β  └── en
β”‚Β Β      └── messages.json
β”œβ”€β”€ icons
β”‚Β Β  β”œβ”€β”€ icon128.png
β”‚Β Β  β”œβ”€β”€ icon16.png
β”‚Β Β  β”œβ”€β”€ icon19.png
β”‚Β Β  └── icon48.png
β”œβ”€β”€ js
β”‚Β Β  β”œβ”€β”€ background.js
β”‚Β Β  β”œβ”€β”€ content.js
β”‚Β Β  └── popup.js
β”œβ”€β”€ manifest.json
└── popup.html

dist contains the Chrome extension. You can delete js/*, as its contents will be regenerated by webpack, but the rest of the contents of dist will not.

Why these choices?

We wanted a boilerplate from which we could be productive immediately, without including components we wouldn't immediately need.

  • TypeScript: We chose TypeScript because it grants us the safety of a type system while still being accessible to developers who are only familiar with JavaScript. TypeScript is a typed superset of JavaScript, so all valid JavaScript is also valid TypeScript. You can use TypeScript's extra functionality only when you want to.
  • React: Writing UI state transitions can be buggy and tedious. We like that React allows us to declaratively describe our UI without being overly bulky.
  • Webpack: Webpack allows us to define a build pipeline that can be easily extended in the future.

Acknowledgments

This work is inspired by Extensionizr, and the icons in dist/icons remain under the Extensionizr license.

More Repositories

1

cloudmapper

CloudMapper helps you analyze your Amazon Web Services (AWS) environments.
JavaScript
5,990
star
2

parliament

AWS IAM linting library
Python
1,044
star
3

webauthn

WebAuthn (FIDO2) server library written in Go
Go
1,028
star
4

cloudtracker

CloudTracker helps you find over-privileged IAM users and roles by comparing CloudTrail logs with current IAM policies.
Python
885
star
5

py_webauthn

Pythonic WebAuthn 🐍
Python
863
star
6

webauthn.io

The source code for webauthn.io, a demonstration of WebAuthn.
Python
654
star
7

EFIgy

A small client application that uses the Duo Labs EFIgy API to inform you about the state of your Mac EFI firmware
Python
512
star
8

dlint

Dlint is a tool for encouraging best coding practices and helping ensure we're writing secure Python code.
Python
331
star
9

markdown-to-confluence

Syncs Markdown files to Confluence
Python
307
star
10

isthislegit

Dashboard to collect, analyze, and respond to reported phishing emails.
Python
286
star
11

idapython

A collection of IDAPython modules made with πŸ’š by Duo Labs
Python
285
star
12

secret-bridge

Monitors Github for leaked secrets
Python
189
star
13

apple-t2-xpc

Tools to explore the XPC interface of Apple's T2 chip
Python
160
star
14

twitterbots

The code used in the "Don't @ Me: Hunting Twitter Bots at Scale" Black Hat presentation
Python
151
star
15

cloudtrail-partitioner

Python
150
star
16

phish-collect

Python script to hunt phishing kits
Python
137
star
17

phinn

A toolkit to generate an offline Chrome extension to detect phishing attacks using a bespoke convolutional neural network.
JavaScript
130
star
18

xray

X-Ray allows you to scan your Android device for security vulnerabilities that put your device at risk.
Java
121
star
19

android-webauthn-authenticator

A WebAuthn Authenticator for Android leveraging hardware-backed key storage and biometric user verification.
Java
110
star
20

appsec-education

Presentations, training modules, and other education materials from Duo Security's Application Security team.
JavaScript
71
star
21

mysslstrip

CVE-2015-3152 PoC
Python
43
star
22

EFIgy-GUI

A Mac app that uses the Duo Labs EFIgy API to inform you about the state of your EFI firmware.
Objective-C
40
star
23

lookalike-domains

generate lookalike domains using a few simple techniques (homoglyphs, alt TLDs, prefix/suffix)
Python
31
star
24

apk2java

Automatically decompile APK's using Docker
Dockerfile
23
star
25

journal

The boilerplate for a new Journal site
21
star
26

srtgen

Automatic '.srt' subtitle generator
Python
21
star
27

markflow

Make your Markdown sparkle!
Python
20
star
28

neustar2mmdb

Tool to convert Neustar's GeoPoint data to Maxmind's GeoIP database format for ease of use.
Python
19
star
29

narrow

Low-effort reachability analysis for third-party code vulnerabilities.
Python
19
star
30

datasci-ctf

A capture-the-flag exercise based on data analysis challenges
Jupyter Notebook
16
star
31

duo-blog-going-passwordless-with-py-webauthn

Python
15
star
32

tutorials

Python
15
star
33

sharedsignals

Python tools for using OpenID's Shared Signals Framework (including CAEP)
15
star
34

chain-of-fools

A set of tools that allow researchers to experiment with certificate chain validation issues
Python
13
star
35

journal-cli

The command-line client for Journal
Jupyter Notebook
12
star
36

unmasking_data_leaks

The code from the talk "Unmasking Data Leaks: A Guide to Finding, Fixing, and Prevention" given at BSides SATX 2019.
Python
7
star
37

journal-theme

The Hugo theme that powers Journal
HTML
7
star
38

golang-workshop

Source files for a Golang Workshop
Go
5
star
39

vimes

A local DNS proxy based on CoreDNS.
Python
3
star
40

journal-docs

The documentation for Journal
2
star
41

dlint-plugin-example

An example plugin for dlint
Python
2
star
42

twitterbots-wallpapers

Wallpapers created from the crawlers in our "Don't @ Me" technical research paper
1
star
43

holidayhack-2019

Scripts and artifacts used to solve the 2019 SANS Holiday Hack Challenge
Python
1
star