Chrome Extension In React With NPM Modules: Part 2

Welcome back, this is part 2 of the previous article Chrome Extension In React With NPM Modules: Part 1.

[embed]

Let’s Go

Let’s get the dependencies ready.

npm i @rollup/plugin-typescript --save-dev
npm i @rollup/plugin-node-resolve --save-dev
npm i rollup @types/chrome --save-dev

Our Rollup Config

Add the following piece of code to the root directory of your project. This is the rollup config that will tell our rollup bundler what files to bundle. This is an important piece of code. And, I think it’s best if we can spend some time on it.

[embed]

According to our config file, our bundler takes in content.ts and background.ts and converts them into content.js and background.js. But what’s iife? And what’s nodeResolve in the plugins? Calm down. One at a time.

Firstly there are different ways to format a file using rollup. And one of them happens to be iife.

iife – A self-executing function, suitable for inclusion as a <script> tag. (If you want to create a bundle for your application, you probably want to use this.). "iife" stands for "immediately-invoked Function Expression"

Still don’t get it? Basically, if you have a content.ts file and it is importing certain helper functions from say helper.ts. The imported functions in the helper.ts will all be bundled into one big file. That’s it.

This is where nodeResolve comes in. In our case, what happens if we try to import cowsay.js from the node_modules directory, it will be unable to do so. The nodeResolve plugin allows the rollup to find these npm modules and, with the help of iife, bundles it all up into one giant ball of code. Tada! That’s the secret.

The Barebones

Create a file called type.ts your src directory.

[embed]

Create a folder called chrome in the src directory and place the content.ts file in it.

[embed]

In the same directory create background.ts. We will be using this to handle keyboard shortcuts.

[embed]

You will be getting an exception Cannot find module ../messaging. Add this in the src directory as messaging.ts. This is just a helper function I created to allow for communication with content_script.

[embed]

Wait? What communication? I don’t know if you have noticed this by now but there is a clear boundary for each script. Background script handles some stuff and has access to some stuff. And content script handles and accesses something else as well. All of these scripts work together to make up a chrome extension. And for that, they need to communicate with each other.

Going back to the piece of code in messaging.ts, let’s give you some insight into it so that you can modify it according to you. Since the content script lives in each tab, our background script queries for the active tab and sends the message to the respective content script.

Moving on, let’s update our manifest.json to tell the script where the content and background script are.

[embed]

Also, don’t forget to add && rollup --config rollup.config.js in the build script. The build script will look like the following piece of code.

"build": "INLINE_RUNTIME_CHUNK=false GENERATE_SOURCEMAP=false react-   scripts build && rm -rf dist/* && mv build/* dist && rollup --config             rollup.config.js",

This isn’t the best way to write a script. Well, a better way to write it will be to put this all in a separate file and just run that from there. I just don’t want you to worry about that for now. You can do that later onwards as you start building your own extensions.

After this, just build the code and check if there aren’t any errors during the build process.

It’s time for Part 3

This is the final part where we will complete our extension. If you don’t intend to learn how to integrate our Mooo Module you are good to go. But if you are interested and want to learn a thing or two, do go over part 3 of this series. I will be covering topics like persistent storage that might prove helpful.

Full code is here also check out my portfolio while you’re at it