Update docs for Opera (#109)

* Update dev instructions for Opera

Since there is still a tiny difference in the installation process
compared to Chrome, I thought it would be worth mentioning it.

* Add settings instructions for Opera

For the sake of consistency, also add a screenshot and some instructions
on how to find the advanced options in the Opera extension.

* Add Opera installation docs

Add separate installation instructions for Opera.

closes #82

* Compress images

Reduce the file size for the Opera docs images -> to save the planet <3

OPERA.md

@@ -0,0 +1,16 @@
+# Opera
+
+[Opera](https://www.opera.com) is no longer accepting extensions for their own [add-ons](https://addons.opera.com/en/extensions/) platform. Users can instead install add-ons via the [Chrome Web Store](https://chrome.google.com/webstore), with the [Install Chrome Extensions](https://addons.opera.com/en-gb/extensions/details/install-chrome-extensions/) add on by the Opera team bridging the gap.
+
+## Install TicketyTick
+
+1. Open Opera
+    ![open opera](./screenshots/opera/step1.png)
+1. Install the [Install Chrome Extensions](https://addons.opera.com/en-gb/extensions/details/install-chrome-extensions/) add-on
+    ![install chrome add-on](./screenshots/opera/step2.png)
+1. Add the `TicketyTick` add-on via the [Chrome Web Store](https://chrome.google.com/webstore/detail/tickety-tick/ciakolhgmfijpjbpcofoalfjiladihbg)
+    ![add tickety-tick](./screenshots/opera/step3.png)
+1. Install the add-on
+    ![install tickety-tick](./screenshots/opera/step4.png)
+1. Celebrate 🎉
+    ![tickety-tick](./screenshots/opera/step5.png)

README.md

@@ -41,7 +41,7 @@ Tickety-Tick is available for every major browser:
 
 - [Chrome/Chromium](https://chrome.google.com/webstore/detail/ciakolhgmfijpjbpcofoalfjiladihbg)
 - [Firefox](https://addons.mozilla.org/firefox/addon/tickety-tick/)
-- [Opera](https://addons.opera.com/extensions/details/tickety-tick/)
+- [Opera](./OPERA.md)
 - For Safari, you need to build it yourself ([see below](#safari))
 
 ## Keyboard Shortcuts
@@ -88,7 +88,7 @@ If you want to install this addon permanently, go to [about:addons](//about:addo
 
 ### Opera
 
-Same process as in [Chrome](#chrome).
+Navigate to the [opera://extensions](//opera://extensions) page, enable "Developer mode" and press "Load unpacked extension". Point it to the `dist/chrome` directory. Done.
 
 ### Safari
 
@@ -177,6 +177,10 @@ In Chrome, open [chrome://extensions/](//chrome://extensions), click the "Detail
 
 ![Chrome preferences](./screenshots/chrome-preferences.png)
 
+In Opera, open [opera://extensions/](//opera://extensions), click the "Options" button on the Tickety-Tick tile.
+
+![Opera preferences](./screenshots/opera-preferences.png)
+
 In Safari, open "Preferences" (`cmd + ,`), then select "Extensions".
 
 ![Safari preferences](./screenshots/safari-preferences.png)