I not too long ago rewrote one in every of my tasks — Minimal Theme for Twitter — as a Subsequent.js Chrome extension as a result of I wished to make use of React for the pop-up. Utilizing React would permit me to obviously separate my extension’s pop-up part and its software logic from its content material scripts, that are the CSS and JavaScript information wanted to execute the performance of the extension.

As chances are you’ll know, there are a number of methods to get began with React, from merely including script tags to utilizing a really helpful toolchain like Create React App, Gatsby, or Subsequent.js. There are some speedy advantages you get from Subsequent.js as a React framework, just like the static HTML function you get with subsequent export. Whereas options like preloading JavaScript and built-in routing are nice, my principal aim with rewriting my Chrome extension was higher code group, and that’s actually the place Subsequent.js shines. It offers you essentially the most out-of-the-box for the least quantity of pointless information and configuration. I attempted fiddling round with Create React App and it has a shocking quantity of boilerplate code that I didn’t want.

I believed it is likely to be simple to transform over to a Subsequent.js Chrome extension because it’s doable to export a Subsequent.js software to static HTML. Nonetheless, there are some gotchas concerned, and this text is the place I inform you about them so you possibly can keep away from some errors I made.

First, right here’s the GitHub repo if you wish to skip straight to the code.

New to growing Chrome extensions? Sarah Drasner has a primer to get you began.

Folder construction

next-export is a post-processing step that compiles your Subsequent.js code, so we don’t want to incorporate the precise Subsequent.js or React code within the extension. This enables us to maintain our extension at its lowest doable file dimension, which is what we wish for when the extension is ultimately printed to the Chrome Net Retailer.

So, right here’s how the code for my Subsequent.js Chrome extension is organized. There are two directories — one for the extension’s code, and one containing the Subsequent.js app.

📂 extension
  📄 manifest.json
📂 next-app
  📂 pages
  📂 public
  📂 types
  📄 bundle.json
README.md

The construct script

To make use of subsequent export in a traditional internet venture, you’ll modify the default Subsequent.js construct script in bundle.json to this:

"scripts": {
  "construct": "subsequent construct && subsequent export"
}

Then, operating npm run construct (or yarn construct) generates an out listing.

On this case involving a Chrome extension, nevertheless, we have to export the output to our extension listing as an alternative of out. Plus, we now have to rename any information that start with an underscore (_), as Chrome will fireplace off a warning that “Filenames beginning with “_” are reserved to be used by the system.”

This leads us to have a brand new construct script like this:

"scripts": {
  "construct": "subsequent construct && subsequent export && mv out/_next out/subsequent && sed -i '' -e 's//_next/./subsequent/g' out/**.html && mv out/index.html ../extension && rsync -va --delete-after out/subsequent/ ../extension/subsequent/"
}

sed on works in a different way on MacOS than it does on Linux. MacOS requires the '' -e flag to work appropriately. Should you’re on Linux you possibly can omit that extra flag.

Belongings

In case you are utilizing any belongings within the public folder of your Subsequent.js venture, we have to carry that into our Chrome extension folder as nicely. For group, including a next-assets folder inside public ensures your belongings aren’t output immediately into the extension listing.

The total construct script with belongings is that this, and it’s a giant one:

"scripts": {
  "construct": "subsequent construct && subsequent export && mv out/_next out/subsequent && sed -i '' -e 's//_next/./subsequent/g' out/**.html && mv out/index.html ../extension && rsync -va --delete-after out/subsequent/ ../extension/subsequent/ && rm -rf out && rsync -va --delete-after public/next-assets ../extension/"
}

Chrome Extension Manifest

The commonest sample for activating a Chrome extension is to set off a pop-up when the extension is clicked. We are able to do this in Manifest V3 through the use of the motion key phrase. And in that, we will specify default_popup in order that it factors to an HTML file.

Right here we’re pointing to an index.html from Subsequent.js:

{
  "identify": "Subsequent Chrome",
  "description": "Subsequent.js Chrome Extension starter",
  "model": "0.0.1",
  "manifest_version": 3,
  "motion": {
    "default_title": "Subsequent.js app",
    "default_popup": "index.html"
  }
}

The motion API changed browserAction and pageAction` in Manifest V3.

Subsequent.js options which are unsupported by Chrome extensions

Some Subsequent.js options require a Node.js internet server, so server-related options, like subsequent/picture, are unsupported by a Chrome extension.

Begin growing

Final step is to check the up to date Subsequent.js Chrome extension. Run npm construct (or yarn construct) from the next-app listing, whereas ensuring that the manifest.json file is within the extension listing.

Then, head over to chrome://extensions in a brand new Chrome browser window, allow Developer Mode*,* and click on on the Load Unpacked button. Choose your extension listing, and it’s best to be capable to begin growing!

Wrapping up

That’s it! Like I stated, none of this was instantly apparent to me as I used to be getting began with my Chrome extension rewrite. However hopefully now you see how comparatively simple it’s to get the advantages of Subsequent.js growth for growing a Chrome extension. And I hope it saves you the time it took me to determine it out!