Skip to content

README.md

Latest commit

 

History

History
89 lines (73 loc) · 2.44 KB

README.md

File metadata and controls

89 lines (73 loc) · 2.44 KB

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