https://github.com/Screenly/Browser-Extension
Browser extension for Screenly that works with Firefox and Chrome.
https://github.com/Screenly/Browser-Extension
chrome-extension firefox-addon
Last synced: about 1 year ago
JSON representation
Browser extension for Screenly that works with Firefox and Chrome.
- Host: GitHub
- URL: https://github.com/Screenly/Browser-Extension
- Owner: Screenly
- License: apache-2.0
- Created: 2024-11-08T10:15:31.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-04-24T15:42:07.000Z (about 1 year ago)
- Last Synced: 2025-05-01T07:42:21.418Z (about 1 year ago)
- Topics: chrome-extension, firefox-addon
- Language: TypeScript
- Homepage: https://www.screenly.io/tutorials/browser-extensions/
- Size: 1.13 MB
- Stars: 4
- Watchers: 6
- Forks: 2
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Easily add content to your Screenly digital signage displays in a few clicks. :sparkles:
## :white_check_mark: Prerequisites
- Linux or macOS — If you're on Windows, you can use [WSL](https://learn.microsoft.com/en-us/windows/wsl/setup/environment). All of the scripts were written in Bash.
- Docker — The easiest way to get started is to install [Docker Desktop](https://www.docker.com/products/docker-desktop/).
- `jq` — Most of the scripts in the [`bin/`](/bin/) directory use `jq` to parse JSON. Install it from [here](https://jqlang.org/download/).
## :seedling: Install
- Install the extension from the [Chrome Web Store](https://chromewebstore.google.com/detail/save-to-screenly/kcoehkngnbhlmdcgcadliaadlmbjmcln).
- Install the extension from Firefox [Add Ons](https://addons.mozilla.org/en-US/firefox/addon/save-to-screenly/).
## :computer: Develop
The extension is built using [webpack](https://webpack.js.org/). Please check our [contributing guidelines](CONTRIBUTING.md) for detailed information about opening pull requests and releasing new versions.
```bash
$ PLATFORM= \
VERSION= \
./bin/start_development_mode.sh
```
> [!IMPORTANT]
>
> - `VERSION` can be any valid version semver string (`X.Y.Z`),
> where `X`, `Y`, and `Z` are non-negative numbers.
> - `PLATFORM` can be either `chrome` or `firefox`.
Now load the content of the `dist/` folder as an unpacked extension in Chrome. As you make changes to the code, the extension is automatically rebuilt.
### Getting Inside the Docker Container
```bash
$ docker compose exec browser-extension bash
```
### Distribute
```bash
$ VERSION= \
PLATFORM= \
./bin/package_extension.sh
```
The name of the packaged extension will be `screenly--extension-.zip`. For example, `screenly-chrome-extension-0.0.1.zip` or `screenly-firefox-extension-0.0.1.zip`.
### Testing Packaged Extensions
> [!NOTE]
> You can also download the packaged extensions from the [GitHub Releases](https://github.com/Screenly/Browser-Extension/releases) page.
#### Chrome
- Extract the zip file to a folder.
- Open Chrome and navigate to `chrome://extensions/`.
- Click on **Load unpacked** and select the folder you extracted the zip file to.
- The extension should now be loaded and ready to use.
#### Firefox
> [!IMPORTANT]
> Add-ons installed from a `.zip` file will be uninstalled when Firefox is closed.
> This means that you will need to re-install the extension every time you open Firefox.
- Open Firefox and navigate to `about:debugging`.
- Click on **This Firefox** and then **Load Temporary Add-on**.
- You can either select the `manifest.json` file or the zipped extension.
- The extension should now be loaded and ready to use.
## :test_tube: Run Unit Tests
```bash
$ ./bin/run_tests.sh
Randomized with seed
Started
....................
20 specs, 0 failures
Finished in 0.01 seconds
Randomized with seed (jasmine --random=true --seed=)
```
## :sparkles: Run Linter and Formatter
Build the Docker image, which is a one-time operation:
```bash
$ docker compose build
```
### :broom: Run Linter
```bash
$ ./bin/run_eslint.sh
```
This will run ESLint on the codebase and show any style issues or potential problems that need to be fixed.
### :nail_care: Run Formatter
This project uses [Prettier](https://prettier.io/) to format the code.
For more information why the linter and formatter are separate, see [this article about ESLint deprecating formatting rules](https://eslint.org/blog/2023/10/deprecating-formatting-rules/).
To check the code for formatting issues without changing any files, use the `check` mode:
```bash
$ MODE="check" ./bin/run_formatter.sh
```
To format the code and fix formatting issues, use the `write` mode:
```bash
$ MODE="write" ./bin/run_formatter.sh
```