I lately rewrote considered one of my initiatives — 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 you could 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 quick advantages you get from Subsequent.js as a React framework, just like the static HTML characteristic you get with subsequent export. Whereas options like preloading JavaScript and built-in routing are nice, my most important 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 assumed it is likely to be simple to transform over to a Subsequent.js Chrome extension because it’s attainable to export a Subsequent.js software to static HTML. Nevertheless, there are some gotchas concerned, and this text is the place I inform you about them so you may 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 attainable file dimension, which is what we would like for when the extension is ultimately revealed 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
📄 package deal.json
README.md
The construct script
To make use of subsequent export in a traditional net undertaking, you’d modify the default Subsequent.js construct script in package deal.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, nonetheless, we have to export the output to our extension listing as a substitute of out. Plus, we have now to rename any information that start with an underscore (_), as Chrome will hearth off a warning that “Filenames beginning with “_” are reserved to be used by the system.”
What we want is a solution to customise these filenames so Chrome is much less cranky.
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 otherwise on MacOS than it does on Linux. MacOS requires the ” -e flag to work appropriately. In case you’re on Linux you may omit that further flag.
Belongings
If you’re utilizing any property within the public folder of your Subsequent.js undertaking, we have to convey that into our Chrome extension folder as effectively. For group, including a next-assets folder inside public ensures your property aren’t output immediately into the extension listing.
The total construct script with property 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 most typical sample for activating a Chrome extension is to set off a pop-up when the extension is clicked. We will try this in Manifest V3 by utilizing 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:
{
“title”: “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 can be unsupported by Chrome extensions
Some Subsequent.js options require a Node.js net 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 you must be capable of 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!
Useful Ideas for Beginning a Subsequent.js Chrome Extension initially revealed on CSS-Tips. You need to get the publication and turn into a supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!