Development / Building / Bundling the Extension

First, you must have classic yarn installed.

✨ New: bundle-extension.js now bundles and zips everything. Run yarn && yarn bundle at the root directory and you'll get a bundle directory that looks like this:

📂 bundle
└ 📁 chrome
└ 📁 firefox
└ 📁 safari
└ 📄 chrome.zip
└ 📄 firefox.zip
└ 📄 safari.zip

Popup

cd next-popup

yarn # must run yarn once first before you can build
yarn build # to build and export Next.js app
yarn build:linux # to build and export Next.js app on Linux environment

Content Scripts

We also use parcel to build the content_scripts for the extension.

cd content-scripts

yarn # must run yarn once first before you can build
yarn build # to build the content_scripts
yarn watch # watch for changes and build automatically

After you have built both popup and content-scripts you can bundle the extension for Chrome, Firefox, and Safari:

Bundle Script

cd .. # go back to the root directory

yarn # must run yarn once first before you can bundle
yarn bundle # Runs the `bundle-extension.js` script

Load Extension

Chrome or Edge	Firefox	Safari
Open chrome://extensions or edge://extensions Turn on the Developer mode toggle Click on the Load unpacked button Select the folder css-to-frameworks/bundle/chrome	Open about:debugging#/runtime/this-firefox Click on the Load Temporary Add-on... button Select the file css-to-frameworks/bundle/firefox/manifest.json	Open bundle/safari/Minimal Theme for Twitter/Minimal Theme for Twitter.xcodeproj Click the Play button in Xcode ("start the active scheme") Configure Safari in macOS to run unsigned extensions