kmponis / chrome-firefox-extension-kotlin

Simple Chrome/firefox Extension in Kotlin

Getting started sample Google Chrome / Mozilla Firefox extension

Based on Chrome Extension sample from Google's Getting Started guide.

Documentation here.

This version of the code is as rewriting of the original Google example using Kotlin. The API has been extended using Kotlin Coroutines. The extension code has been modified to use coroutines APIs. The API was converted to use Browser Extensions W3C proposed standard. Original comments have been kept at the closest place of the original code.

Previous versions of the extension

• Original version in JavaScript here.
• Initial rewrite in Kotlin here.
• Extension with Kotlin Coroutines only for Chrome here.

Medium articles

Please check this series in Medium that describe this project:

1. Writing a Chrome extension in Kotlin
2. Writing a Chrome extension in Kotlin — Using Coroutines
3. Writing a Chrome extension in Kotlin — Supporting Firefox and Chrome

Building

This project uses gradle. To build it, execute the following:

gradlew clean assemble

Unbundled extension will be generated inside build/extension. This folder can be used to install in Chrome.

Zipped extension will be generated inside build/distributions. The zip generated inside that folder can be used to install in Firefox.

Installing the extension

Google Chrome

1. Go to Extensions
2. Enable "Developer Mode"
3. Click on "Load unpacked extension..."
4. Select the folder ${project}/build/extension and open it.

If changes are made and the extension is recompiled, make sure to update the extension:

1. Go to Extensions
2. Make sure "Developer Mode" is enabled
3. Click on "Update extensions now"

Make sure to check Google documentation for more details.

Mozilla Firefox

The extension needs to be uploaded to Mozilla Add-ons website for the extension to work in Firefox.

Please follow instructions here.

Testing the extension

Upon installation a a new extension is added to Chrome/Firefox with the icon

Clicking the icon will open a small popup that will allow changing active page background color.

Check Google's Getting started guide for more details.