screenly / chrome-extension

Deployment - screenly/chrome-extension

Screenly is an open-source digital signage platform that allows users to create, manage, and deploy content on various displays. One of the ways to extend Screenly’s functionality is by using Chrome extensions. In this guide, we will focus on deploying and installing a Chrome extension using Screenly and the screenly-chrome-extension library.

Prerequisites

Before proceeding with the deployment and installation process, ensure you have the following prerequisites in place:

  1. A Screenly account: Sign up for a Screenly account if you don’t already have one. You can create an account here.
  2. A Screenly Player: Install a Screenly Player on the device where you want to run the Chrome extension. You can download the Screenly Player here.
  3. Node.js: Install Node.js on your development machine to manage the project dependencies and build the Chrome extension. You can download Node.js here.
  4. Git: Install Git on your development machine to clone the screenly-chrome-extension repository. You can download Git here.
  5. Google Chrome: Install Google Chrome on the development machine and the device where you want to run the Chrome extension.

Setting up the Project

  1. Clone the screenly-chrome-extension repository: Open a terminal or command prompt and run the following command to clone the screenly-chrome-extension repository:
git clone https://github.com/screenlyapp/screenly-chrome-extension.git
  1. Navigate to the project directory: Change the current working directory to the screenly-chrome-extension directory:
cd screenly-chrome-extension
  1. Install project dependencies: Run the following command to install the project dependencies:
npm install

Creating the Chrome Extension

  1. Create a new Chrome extension: Create a new directory for your Chrome extension inside the extensions folder:
mkdir my-chrome-extension
cd my-chrome-extension
  1. Initialize the Chrome extension: Run the following command to initialize a new Chrome extension:
npx create-react-app . --template @screenly/chrome-extension

This command will create a new React project with the necessary files and configurations for a Chrome extension.

  1. Modify the Chrome extension: You can now modify the files inside the my-chrome-extension directory to create your custom Chrome extension.

Building the Chrome Extension

  1. Build the Chrome extension: Navigate back to the screenly-chrome-extension directory and run the following command to build your Chrome extension:
npm run build:chrome

This command will build the Chrome extension and generate the necessary files in the build/chrome directory.

Installing the Chrome Extension on the Development Machine

  1. Load the Chrome extension: Open Google Chrome and load the unpacked extension by navigating to chrome://extensions and clicking on the “Load unpacked” button. Select the build/chrome directory.

  2. Test the Chrome extension: You can now test your Chrome extension inside Google Chrome on your development machine.

Deploying the Chrome Extension to Screenly Player

  1. Prepare the Chrome extension for deployment: Navigate back to the screenly-chrome-extension directory and run the following command to prepare the Chrome extension for deployment:
npm run package:chrome

This command will package the Chrome extension and generate the necessary files in the dist/chrome directory.

  1. Upload the Chrome extension to Screenly: Log in to your Screenly account, go to the “Extensions” tab, and click on “Add Extension”. Upload the manifest.json file from the dist/chrome directory.

  2. Install the Chrome extension on the Screenly Player: Go to the “Displays” tab, select the display where you want to run the Chrome extension, and click on “Add Content”. Select the dist/chrome directory as the content source.

  3. Test the Chrome extension: The Chrome extension should now be installed and running on the Screenly Player. You can check the status of the Chrome extension in the “Extensions” tab of the Screenly dashboard.

For more information about Screenly, Chrome extensions, and the screenly-chrome-extension library, please refer to the following resources: