Skip to content

Latest commit

 

History

History
102 lines (65 loc) · 4.25 KB

README.md

File metadata and controls

102 lines (65 loc) · 4.25 KB
Raw

Seeing Sprouts

A browser extension that uses the WebExtensions API to replace all images on a web page with brussels sprouts photos.

Screenshot of Seeing Sprouts in action aka Carolyn's Twitter but with only photos of brussels sprouts.

Supported Browsers

Working version is built as a Firefox add-on 🦊

Supported Veggies

This project was initially created to celebrate the sprout. But now, thanks to the community, there's support for more vegetables, nutrient-dense fruits and other veggie-like things people enjoy.

Contributing

⚠️ This project has a Code of Conduct that all contributors are expected to follow.

The best way to get involved is by adding a new veggie for the extension to support.

Here are the steps you need to follow:

Add your veggie photos to the images directory

1. Create a new directory within images named after your veggie.

If the name of the veggie is more than one word, please use the camelCase naming convention.

2. Fill this directory with JPG images of your veggie.

Some suggestions of where to find images: Unsplash, Pexels and Pixabay. The images must be available for public use without credit.

For the individual image file names, please use the following convention:

[ARTIST_NAME]-[SITE].jpg

Write some code so the extension recognizes your veggie

Note: All lists are in alphabetical order (except sprouts because they're the best).

1. Modify sproutify.js to include your veggie.

You'll need to declare a new const variable called yourVeggieImagePaths. This should be an array of strings containing the paths to the images:

// Example of the candy corn image paths
const candyCornImagePaths = [
  "images/candyCorn/dane-deaner-unsplash.jpg",
  "images/candyCorn/sheri-silver-unsplash.jpg",
  "images/candyCorn/skeeze-pixabay.jpg",
  "images/candyCorn/wokandapix-pixabay.jpg"
];

Then, add your variable to the map:

const map = {
  sprouts: sproutImagePaths,
  avocados: avocadoImagePaths,
  // other veggies
  yourVeggie: yourVeggieImagePaths
};

2. Finally, add a new option tag to the dropdown in veggie-selector/options.html for your veggie.

Make to set the value attribute as the name of your veggie. The tag content should be an emoji (please use the decimal code) and your veggie's name in lowercase.

<!-- Example of the corn option -->
<option value="corn" class="option">&#127805; corn</option>

🚀 Ship your veggie

Once all of the above is done, open a pull request 💖

Credits

📷 Photos used came from Unsplash, Pexels and Pixabay. You can find the artists in the name of the file.

💡 Inspiration for this extension came from pikachu-everywhere and puglife.

👩‍🎨 Icon was created using make 8-bit art and based on Sprout to be Brussels.

Show your support

If you like this extension, please consider buying me a coffee so that I can continue to make wholesome things!

ko-fi