Pop-a-loon documentation
Last updated
Last updated
Clone the repository:
Install the dependencies:
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.
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.
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.
To build for Chrome with a remote server:
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.
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.
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.
The extension can be loaded in the browser by following the steps below:
Don't forget to enable Developer mode in the top right corner.
Click the Load unpacked button and select the dist/ 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.
The extension can be loaded in the browser by following the steps below:
Click the Extensions tab on the left.
Click the Manage your extensions button.
Click the Debug Add-ons button.
Click the Load Temporary Add-on button and select the manifest.json file in the dist/ 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.
Open the project in Visual Studio Code.
Go to the Run view (Ctrl+Shift+D).
Select Launch Chrome or Launch Firefox from 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.
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.
To build for Chrome:
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.
To build for Firefox:
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.
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.
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.
(>= v21.1.0)
(>= v10.3.0)
[!TIP] See the and sections for instructions on how to load the extension in the browser.
[!IMPORTANT] This will call the script.
[!IMPORTANT] This will connect to a server which is expected to be running on http://localhost:3000.
[!IMPORTANT] This will call the script.
[!IMPORTANT] This will connect to a server which is expected to be running on http://localhost:3000.
Open the Extension Management page by navigating to .
Open the Add-ons page by navigating to .
This will build the extension in production for all browsers and include a .
Refer to for instructions on how to add a new balloon to the extension.
[!NOTE] Read the document for a more detailed explanation of the architecture.