Building and Starting the Project

Prerequisites

Ensure you have Docker installed on your system to build and run the project. You will also need Node.js and npm to manage dependencies.

Step-by-Step Guide

1. Clone the repository
   Navigate to your desired directory and clone the repository:

   git clone https://github.com/screenly/chrome-extension.git
   cd chrome-extension
   

2. Install dependencies
   Run the following command to install project dependencies:

   npm install
   

3. Build the project using Docker
   The extension is built using webpack. Use the following Docker command to build the project:

   docker compose up --build
   

4. Load the unpacked extension in Chrome
   After building, load the content of the dist/ folder as an unpacked extension in Chrome. You can do this by navigating to chrome://extensions/, enabling “Developer mode”, and clicking on “Load unpacked”.

5. Development Workflow
   As you make changes to the code, the extension is automatically rebuilt. You can simply refresh the extensions page in Chrome to see the changes.

Additional Information

• API Call Example
  In src/assets/js/main.mjs, there is a function to call APIs. Here is an example of how it is defined:

  function callApi(method, url, data=undefined, token=undefined) {
      let init = {
          method: method,
          headers: {
              'Content-Type': 'application/json',
              'Prefer': 'return=representation',
          }
      };
  
      if (data !== undefined && data !== null) {
          init.body = JSON.stringify(data);
      }
  
      if (token) {
          init.headers['Authorization'] = `Token ${token}`;
      }
  
      return fetch(url, init)
          .then(response => {
              if (!(response.status >= 200 && response.status < 300)) {
                  throw response;
              }
          });
  }
  

• Popup Initialization
  The popup is initialized in src/assets/js/boot-popup.mjs. Here is the relevant code:

  'use strict';
  
  import {initPopup} from "./popup.mjs";
  
  await initPopup();
  

• Testing
  To run tests, use the following command defined in the package.json:

  npm run test
  

Refer to the README.md for further instructions on deployment and packaging.