screenly / chrome-extension

API Endpoints for screenly/chrome-extension

The screenly/chrome-extension codebase primarily interacts with the Screenly API. The routes utilized are generally composed of API endpoints that allow operations such as retrieving, creating, and updating web assets. Below are detailed descriptions and examples of how these routes are employed within the codebase.

API Routes

1. Fetch Existing Web Asset

The route for fetching an existing web asset by its ID is defined as follows:

export function getWebAsset(assetId, user) {
return callApi(
"GET",
`https://api.screenlyapp.com/api/v4/assets/${encodeURIComponent(assetId)}/`,
null,
user.token
);
}
  • Method: GET
  • Route: /api/v4/assets/{assetId}/
  • Description: This route retrieves an asset identified by assetId from the Screenly API. The user.token is passed for authorization.

2. Create a New Web Asset

The route for creating a new web asset is illustrated below:

export function createWebAsset(user, url, title, headers, disableVerification) {
return callApi(
"POST",
"https://api.screenlyapp.com/api/v4/assets/",
{
"source_url": url,
"title": title,
"headers": headers,
"disable_verification": disableVerification,
},
user.token
);
}
  • Method: POST
  • Route: /api/v4/assets/
  • Description: This route is used to create a new asset with details provided in the request body. The parameters include source_url, title, headers, and an optional flag disable_verification.

3. Update Existing Web Asset

Updating an existing web asset is performed by the following route:

export function updateWebAsset(assetId, user, url, title, headers, disableVerification) {
let queryParams = `id=eq.${encodeURIComponent(assetId)}`;
return callApi(
"PATCH",
`https://api.screenlyapp.com/api/v4/assets/?${queryParams}`,
{
"title": title,
"headers": headers,
},
user.token
);
}
  • Method: PATCH
  • Route: /api/v4/assets/?id=eq.{assetId}
  • Description: This route updates an existing asset’s details. The asset to be updated is specified by assetId, and the request body can include updated title and headers.

4. Utility Functions for URL Manipulation

The State class within the codebase provides utilities that might be used to simplify or normalize URLs when interacting with the API:

static normalizeUrl(url) {
return window.normalizeUrl(url, {
removeTrailingSlash: false,
sortQueryParameters: false,
stripWWW: false,
});
}


static simplifyUrl(url) {
return window.normalizeUrl(url, {
removeTrailingSlash: true,
sortQueryParameters: true,
stripHash: true,
stripProtocol: true,
stripWWW: true,
});
}

These methods do not correspond to API routes but can be essential in preparing the URL formats required by the API.

5. Calling the API

The mechanism to call the API is encapsulated within a reusable function:

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;
}
return response.json();
});
}

  • Method: Dynamic (GET, POST, PATCH)
  • Description: This function takes in the HTTP method, URL, data payload, and optional token for authorization, performs the API call, and processes the response.

Conclusion

This document delineates the primary routes and functionalities defined within the screenly/chrome-extension codebase. Each route serves a critical purpose for the manipulation of web assets, showcasing how the extension interfaces with the Screenly backend. These functions provide a clear insight into how data is managed, presenting a robust framework for expert developers to effectively navigate and extend the functionality of the codebase.

Sources: README.md, src/assets/js/main.mjs, eslint.config.mjs, package.json

Sources