Pop-a-loon documentation
Table of Contents
Getting Started
Requirements
Installation
Clone the repository:
Install the dependencies:
Development
Building for development can be done with the dev:{browser} script. Replace {browser} with the browser you want to build for. The available options are chrome and firefox.
[!TIP] See the Load the extension to chrome and Load the extension to firefox sections for instructions on how to load the extension in the browser.
dev:chrome
[!IMPORTANT] This will call the dev:chrome:noremote script.
To build for Chrome:
This will build the extension in development mode for chrome. You can also include the --watch flag to automatically rebuild the extension when files change.
dev:chrome:noremote
To build for Chrome without a remote :
This will build the extension in development mode for chrome without a remote server. You can also include the --watch flag to automatically rebuild the extension when files change.
dev:chrome:remote
[!IMPORTANT] This will connect to a pop-a-loon-backend server which is expected to be running on
http://localhost:3000.
To build for Chrome with a remote server:
dev:firefox
[!IMPORTANT] This will call the dev:firefox:noremote script.
To build for Firefox:
This will build the extension in development mode for firefox. You can also include the --watch flag to automatically rebuild the extension when files change.
dev:firefox:noremote
To build for Firefox without a remote :
This will build the extension in development mode for firefox without a remote server. You can also include the --watch flag to automatically rebuild the extension when files change.
dev:firefox:remote
[!IMPORTANT] This will connect to a pop-a-loon-backend server which is expected to be running on
http://localhost:3000.
To build for Firefox with a remote server:
This will build the extension in development mode for firefox with a remote server. You can also include the --watch flag to automatically rebuild the extension when files change.
Load the extension to chrome
The extension can be loaded in the browser by following the steps below:
Open the Extension Management page by navigating to
chrome://extensions.Don't forget to enable Developer mode in the top right corner.
Click the
Load unpackedbutton and select thedist/directory.The extension should now be loaded and you can see the icon in the browser toolbar.
Pin the extension to the toolbar for easy access.
Load the extension to firefox
The extension can be loaded in the browser by following the steps below:
Open the Add-ons page by navigating to
about:addons.Click the
Extensionstab on the left.Click the
Manage your extensionsbutton.Click the
Debug Add-onsbutton.Click the
Load Temporary Add-onbutton and select themanifest.jsonfile in thedist/directory.The extension should now be loaded and you can see the icon in the browser toolbar.
Pin the extension to the toolbar for easy access.
Debugging in Visual Studio Code
Open the project in Visual Studio Code.
Go to the Run view (Ctrl+Shift+D).
Select
Launch ChromeorLaunch Firefoxfrom the dropdown at the top of the Run view.Press the Start Debugging button (F5).
This will start the development server (if it's not already running) and open a new browser instance with debugging enabled.
Deployment
To build the extension for production, use the build:{browser} script. Replace {browser} with the browser you want to build for. The available options are chrome and firefox. You can also include :zip to create a zip file of the extension.
build:chrome
To build for Chrome:
build:chrome:zip
This will build the extension in production mode for chrome. You can also include the :zip flag to create a zip file of the extension.
The zip file will be created in the build/ directory.
build:firefox
To build for Firefox:
build:firefox:zip
This will build the extension in production mode for firefox. You can also include the :zip flag to create a zip file of the extension.
build:all:zip
This will build the extension in production for all browsers and include a zip file of the source code.
zip:source
This will create a zip file of the source code. The zip file will be created in the build/ directory with the name source-v{version}.zip.
The zip file will be created in the build/ directory.
Adding a balloon
Refer to adding a balloon for instructions on how to add a new balloon to the extension.
Architecture
[!NOTE] Read the Architecture document for a more detailed explanation of the architecture.
Balloon spawn chances
Inheritance Tree
Abstract balloon class
The abstract balloon class is the base class for all balloons.
The class serves as a base class for each balloon in pop-a-loon, providing essential functionality that must operate from this class.
[!IMPORTANT] The class has the following abstract properties and methods:
name: The name of the balloon. Should be the same as the name of the class, but in lowercase.
build(): Is called when the balloon should be built. In this method the class should for example add the styling and balloon image to the balloon element.
These properties and methods must be implemented in the child classes.
[!IMPORTANT] The
elementis the html element that will be added to the DOM after the balloon is built.
Last updated