This week: Chrome Extensions!
I love browser extensions. The web browser mediates the majority of our experience online, and so it feels like such a superpower to be able to hook into the browser itself and bend it to your will. (I've written so many Greasemonkey Scripts over the years.)
The problem with writing browser extensions has, traditionally, been the problem of webdevelopment itself - how do you manage changes, build templates, architect your data etc.
Well, it turns out, you can write Chrome extensions in React! And it's beautiful.
This week I want to give you a few pointers on how you can start writing your own Chrome extensions in React. We'll start by sharing a video tutorial by Tyler Shaddix, who talks about building Redux-based Chrome extensions. Then I'll share boilerplates and tools for starting you own, and finally a few example extensions that can show you real-world examples.
Be sure to checkout the code for redux-devtools-extension - it's a super handy utility if you use redux and it shows the power of what's possible.
Enjoy (and send me your favorite React Chrome extensions!!)
--Nate
Code
Building Chrome Extensions in React+Redux
This is a talk by Tyler Shaddix, the author of react-chrome-redux (below), where he teaches you how to create Chrome extensions with React. There's also a repo of example code from the talk.
react-chrome-redux
This project is a set of utilities for building Google Chrome Extensions with React+Redux. The idea is that it adds a proxy store that mediates between redux and Chrome UI components.
github.com
react-chrome-extension-boilerplate
Getting everything setup for a new Chrome extension can be daunting, but this project makes it easy. You can use this project as a boilerplate for your React + Chrome extensions.
github.com
chrome-fast-tab-switcher
Here's another example React-based extension. This one lets you quickly switch to other open Chrome tabs with just your keyboard.
github.com
redux-devtools-extension
This extension is a fantastic devtool for writing redux applications. By using it you can inspect your state, use it remotely on mobile, and even debug your production apps! Not only is this tool super handy, it's also a great example of how to write a killer Chrome extension.
github.com
chrome-react-perf
Here's an advanced extension that is also super useful: It creates a new Chrome pane to show the results of react-addons-perf. It's another great example of how to build devtools in Chrome
About
Fullstack React: The Book
Learn React the right way with Fullstack React: The Complete Guide to ReactJS and Friends
fullstackreact.com
Like what you've been reading from Fullstack React? You can help us spread the word. Please forward this email to you friends (and let them know they can subscribe here).
Follow us on Twitter
Curated with love by Nate Murray and the Fullstack.io team.
Suggestions are welcome, just reply to this email - we'd love to hear from you.