adro.codes

Posted on Jun 12, 2019 • Edited on Jan 11, 2022 • Originally published at myweekinjs.com

Creating a Chrome Extension with React

#react #javascript #tutorial #webdev

Recently I set out to create a chrome extension and utilise JavaScript and React to inject a component into a website. The result is a beautiful combination of Mutation Observers and JavaScript goodness!

The code can be found on Github

Lets get ready!

To start, I downloaded a starter for a chrome extension from the Chrome Developer website. If you want to learn the basics of extension development, I definitely recommend looking at the website. I immediately deleted the options.js, options.html, and popup.js files. In the manifest.json file I removed the options_page key as well as the storage value from the permissions array. Next, you want to add https://www.myweekinjs.com/ to the permissions array.

I will be referencing myweekinjs a few times, this could be any website that you wish to inject a React component into.

Next, I created an app.js with a simple console.log to test that the script works, and updated the background.js to;

chrome.runtime.onInstalled.addListener(function() {
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {
          hostEquals: 'www.myweekinjs.com',
          schemes: ['https', 'http'],
          pathContains: 'inject-me'
        },
        css: ['div']
      })],
      actions: [
        new chrome.declarativeContent.RequestContentScript({
          js: ['app.js']
        })
      ]
    }]);
  });
});

Alright! That was a lot! The background.js script will do the following;

Listen for page/tab changes
Check if the current page is (http|https)://www.myweekinjs.com/inject-me
If it is, it will load our app.js file

Follow these steps to load your extension for testing purposes.

Let's get scripting!

Next step is to create our webpack.config.js file to compile our React and Javascript. At this point, I'd recommend creating a dist folder with the current files (minus the app.js), and unpacking that folder as our extension. This way you can compile into this dist folder and won't include your node_modules into the extension.

We'll use this awesome resource to generate our webpack and .babelrc files createapp.dev

Open the resource ^
Check React, Babel. Uncheck React hot loader
Run npm init -y and install the packages outlined by the resource
Copy the webpack.config.js and .babelrc files into your project
Copy the scripts from the package.json

There are a couple of small tweaks that we need to make. For the webpack.config.js change the entry and output settings;

var config = {
  entry: './app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  },
  ...
}

Change the build-dev script to;

"dev": "webpack -d --mode development --watch"

You might have some syntax issues with the .babelrc, they should be easy to fix though, mainly issues about using double quotes.

Running the build-prod script will compile the app.js file. After a unpack and reload, you should be greeted with the same console.log as before. A long process to get where we were, but now things get interesting!

Let's get appy!

We want our app to do a few things;

Wait for the page to load completely
Watch for mutations on a target container
Insert our React root
Render a React component

We'll start with the following structure. It adds a listener to the window on load and contains our main callback function which I called app.

window.addEventListener('load', function() {})

const app = () => {}

Step 1 is done! Onwards!

Next, we'll be adding a Mutation Observer which gives us the superpower to watch for changes in the DOM tree. It is pretty sweet. For our project, we are going to be observing the target-test div on our test page (The test page is on my personal blog). The following code is added to the load callback.

// Specifies the element we want to watch
const watch = document.getElementById('target-test')

// Creates a new Mutation Observer
const observer = new MutationObserver((mutationList, observer) => {

})

// Starts observing the child list of the element
observer.observe(watch, {
  childList: true
})

Next, we want to loop through the mutations and call our app method if we can find the element we are looking for.

const observer = new MutationObserver((mutationList, observer) => {
  // Loops through the mutations
  for (const mutation of mutationList) {
    // Checks if it is a change to the child elements
    if (mutation.type === 'childList') {
      // Attempts to find the p tag
      const target = watch.querySelector('p')
      if (target) {
        // Calls our app method
        app(observer, target)
      }
    }
  }
})

// Update the callback to accept those arguements
const app = (observer, target) => {}

Almost there! Now we want to create a root for our React component and insert it before our target element.

const app = (observer, target) => {
  // Disconnects from the observer to stop any additional watching
  observer.disconnect()

  // Checks if the element doesn't exist
  if (!document.getElementById('react-root-test')) {
    // Create and inserts the element before the target
    const parent = target.parentNode
    const root = document.createElement('div')
    root.setAttribute('id', 'react-root-test')

    parent.insertBefore(root, target)
  }
}

Lets get reacting!

Now that we have our React root we can finally create and render our component. I will just be creating a simple React component in the same file. However, you can create any component you choose to, it is up to you! Once you've added your component, unpack your extension and reload the test page and you should see the component appear!

import React from 'react'
import ReactDOM from 'react-dom'

const TestComponent = () => (
  <h1>I am dynamically added!</h1>
)

const app = () => {
  //...
  parent.insertBefore(root, target)

  ReactDOM.render(<TestComponent />, document.getElementById('react-root-test'))
}

BOOM!

We did it! This is only scratching the surface of what you are able to do with chrome extensions and using React. Using the same technique, you'll be able to add features to websites. Similar to extensions like Grammarly or LastPass. The possibilities are almost endless!

Wrapping up

This was a pretty cool project I think. I definitely didn't think something like this was possible with chrome extensions. Using the Mutation Observer for this example may be overkill. However, when you encounter a website that dynamically renders content, being able to wait until the content you need is ready is super cool! If you have any questions about the code or process please reach out to me over Twitter, I'd love to keep talking about this and improving my code.

Thank you for reading my article, it really means a lot! ❤️ Please provide any feedback or comments, I'm always looking to improve and having meaningful discussions. This article was written as part of my #myweekinjs challenge, I have other interesting articles there if you are interested in learning more.