Building Chrome Extensions with React and Webpack

Silicon Valley Code Camp 2017

Guy Vider

Site: TravelingTechGuy.com

Github: github.com/TravelingTechGuy

LinkedIn: linkedin.com/in/gvider

Twitter: @TravelTechGuy

Slides: https://travelingtechguy.github.io/svcc-chrome-extension/

Code: https://github.com/TravelingTechGuy/svcc-chrome-extension

In this session we'll cover:

1. What are Chrome extensions and why should you care? (3 minutes)
2. How to create a basic Chrome extension (10 minutes)
3. How to add React to the view parts, and how to use Webpack to package the extension (20 minutes)
4. Tie it all togather into a functional extension (10 minutes)
5. Q&A (time permitting)

To build and use the extensions in this repo, you'll need:

1. A console application of your choosing
2. git - clone this repo:
   git clone https://github.com/TravelingTechGuy/svcc-chrome-extension
   Or you could just download the full zip at
   https://github.com/TravelingTechGuy/svcc-chrome-extension/archive/master.zip
3. NodeJS and NPM - install from the NodeJS site
4. Install Webpack globally using NPM:
   npm i -g webpack

What are extensions?

Extensions are small software programs that can modify and enhance the functionality of the Chrome browser. You write them using web technologies such as HTML, JavaScript, and CSS. ... You can distribute your extension through the Chrome Web Store.

Google

Simply put, extesnions are apps for your browser

Some examples:

• uBlock Origin

  Blocks ads and unwanted trackers
  Alters page content and DOM

• HTTPS Everywhere

  Attempts to switch to an HTTPS version of every site
  Alters page url

• User Agent Switcher

  Allows your Chrome to pass for other browsers/crawlers
  Alters HTTP request header

• Shrtr

  Shortens urls, using several shortening services
  Copies url, changes nothing

And many more at the Chrome web store... all free!

Setup

1. In Chrome, go to Menu > More Tools > Extensions
   Alternatively, type chrome://extensions in the address bar
2. Check the Developer mode box
3. You can now load unpacked extensions

Basic extension

• A basic extension is a folder containing a manifest file, some messages and some icons.
• The extension can accsess only the files in its folder.
• Icons are not strictly mandatory, Chrome will just provide a generic icon.
• To load your extension into Chrome, click the Load unpacked extension button, and point it to the folder containing the manifest file.

Folder structure

        
          manifest.json*
          background.html
          background.js
          options.html
          popup.html
          --|_locales*
            --|messages.json
          --|icons
            --|icon16.png
            --|icon19.png
            --|icon48.png
            --|icon128.png
        
      

Files marked with * are mandatory.

Extension parts:

1. Manifest - tells Chrome all the essentials about the extension, assigns the various components and icons, and sets permissions and security.
2. Messages - contains the extension's name and description. Provide I18N support.
3. Icons - holds all icons and images the extension needs.
4. Popup page - will be shown when the extension icon is clicked [Not mandatory].
5. Options page - allows settings management for the extension [Not mandatory].
6. Background page - an HTML/Javascript file that runs constantly in the background [Not mandatory].
   Useful for carrying out async tasks, network operations and monitoring, and provide access to Chrome API.

The manifest.json file

        {
          "name": "Basic",
          "version": "1.0.0",
          "manifest_version": 2,
          "description": "Basic extension",
          "homepage_url": "http://www.TravelingTechGuy.com",
          "icons": {
            "16": "icons/icon16.png",
            "19": "icons/icon19.png",
            "48": "icons/icon48.png",
            "128": "icons/icon128.png"
          },
          "default_locale": "en",
          "background": {
            "page": "background.html",
            "persistent": true
          },
          "options_page": "options.html",
          "browser_action": {
            "default_icon": "icons/icon19.png",
            "default_title": "Basic Extension",
            "default_popup": "popup.html"
          },
          "permissions": [
          ],
          "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
        }
      

• List of available permissions
• What is Content Security Policy?

Once the extension loaded:

• We can see the manifest info.
• While developing, check Collect errors (note that writing to the console will be grabbed as well).
• From here we can launch the options view (if available).
• We can also inspect our background view.
• Finally, we can remove the extension from Chrome.

Why use React in a Chrome extension?

• It provides an easier way to to express our view logic, by using componenets.
• Since we have potentially more than one view, it allows code reuse.
• It provides an easy way to encapsulate logic and design
  where each component will have its own js and css files.
• Note: React can easily be replaced with Preact for the same results, with a smaller code footprint.

Reactive extension setup

• Install all NPM dependencies (let's look at package.json).
• Create our webpack.config.js file
• Support building for development and building for production.
• Support multiple entry points - as needed by the extension.
• Add support for ESLint to prevent basic errors and maintain style (also .eslintrc file).
• Add support for Babel for the latest ES6/7 syntax.
• Add support for UglifyJS ans zipping for production.
• Add NPM scripts to build for development and production
  Now we can run npm run build or npm run dist to build the extension.

Our new folder structure:

        
          package.json        //NPM modules, and build scripts
          webpack.config.js   //Webpack configuration files
          +build          //folder containing he built extension (created)
          +dist           //folder containing the packed extension (created)
          +src            //source root folder for Webpack to process
          --|manifest.json*
          --|background.html  //only needed if we want access to clipboard
          --|options.html
          --|popup.html
          --|scripts          //All logic goes here
            --|background.js  //background logic
            --|popup.js       //React DOM render - can be embedded in HTML
            --|options.js     //React DOM render - can be embedded in HTML
            --|components     //React components folder
              --|popup.js     //component logic
              --|popup.css    //component stylesheet
              --|options.js
              --|options.css
              --|...
          --|_locales*
            --|messages.json
          --|icons
            --|icon16.png
            --|icon19.png
            --|icon48.png
            --|icon128.png 
        
      

Extension logic

• This extesnion demonstrates:

  • Popup view with actions
  • Extension icon manipulation
  • Popup and options views communicate with background page
  • Background logic persists data to local storage, and shares data with options view

• Key concepts:

  • Communication between views: chrome.runtime.sendMessage and chrome.runtime.onMessage.addListener
  • Local storage access: localStorage.setItem and localStorage.getItem
  • Badge manipulation: chrome.browserAction.setTitle .setBadgeText .setBadgeBackgroundColor

Utilizing local storage in an extension

1. Don't forget to add "storage" to the manifest's permissions!

2. window.localStorage

   Pros:
   • Synchronous, and thus easier to work with
   • Has support in Dev Tools (Resources > Local Storage to view and modify)
   Cons:
   • Only stores strings, therefore you need to serialize data yourself (JSON.stringify)
   • Is not accessible from content scripts, so you need to rely on Messaging to pass values

3. chrome.storage.local

   Pros:
   • Can store non-strings with no additional boilerplate
   • Available within Content Scripts
   • Supports events that notify about changes (chrome.storage.onChanged)
   • Has a built-in mechanism for default values
   • Specifying "unlimitedStorage" permission in your manifest allows storing more than the HTML5 localStorage 5MB limit
   Cons:
   • Asynchronous, therefore a bit harder to work with
   • Not accessible from Dev Tools

4. chrome.storage.sync

   Same as chrome.storage.local, but synced between signed-in Chrome instances.

Lets put all we know together into StockQuote

• The user will use the Options view to provide 2 groups of settings:
  1. a list of stock symbols
  2. frequency and time zone
• The background page will scrape stock quotes based on the schedule
  1. It runs in a loop and updates the quotes
  2. It uses async functions to get the scraped data from Google
  3. It persists the results to loacl storage, so they're available for the Popup view
• The Popup view will present the results

A bonus extension: changes the content of an HTML page ☺

Questions?

Github: github.com/TravelingTechGuy

LinkedIn: linkedin.com/in/gvider

Twitter: @TravelTechGuy