Citeck Browser Extension

A browser extension for the Citeck platform, designed for developers and administrators. Implemented as a Chrome extension (Manifest V3), it adds three entry points: a popup panel, a context menu, and a DevTools tab.

Installation

Install the extension from the Chrome Web Store or load it manually via the Chrome extensions management page:

  1. Open chrome://extensions/

  2. Enable Developer mode.

  3. Click Load unpacked and select the extension folder.

Smart Search Bar

Opened with Ctrl+Shift+E or by clicking the extension icon.

  • Search across all available actions with fuzzy text matching.

  • Cyrillic support: automatic keyboard layout transliteration (й→q, ц→w, …).

  • Navigate with ↑↓ arrow keys, select with Enter.

  • Displays up to 10 items at a time.

  • Only active on pages where the Citeck object is available.

Actions

All actions implement a unified interface and are accessible via the search bar or context menu.

BrowseRecord

Opens a dialog with full record information:

  • System attributes: _id, _created, _modified, _status, _type, _parent.

  • Model attribute values.

  • Assigned roles.

  • For an Alfresco workspace nodeRef — opens Node Browser.

SetStatus

Loads the list of statuses from _type.model.statuses, shows the current status, and allows selecting a new one.

CopyRecordId

Copies the full record identifier to the clipboard.

Example: emodel/person@admin

CopyLocalRecordId

Copies only the local part of the identifier (the substring after @).

Example: admin

ClaimTask

  • Fetches active workflow tasks for the current record (sourceId: eproc/wftask).

  • Displays each task with a Claim button.

  • The Claim all option assigns all tasks to the current user at once.

DeleteProcessInstance

Note

Available to administrators only.

  • Finds active process instances for the current record.

  • Confirmation dialog with a mandatory comment field.

  • Options: skip custom listeners / IO mapping.

  • Optional record status change (default: rejected).

  • Writes an event to the history (task.delete).

ShowFormComponentsKeys

Overlays attribute name labels on top of form fields as <sup> tags. Selects elements with the control-label class and extracts names from name or for attributes. Useful during form development and debugging.

HostOptions

Per-domain settings stored in chrome.storage.sync.

Allows setting the site header color (.ecos-header) for visual environment differentiation. Preset palette: primary, warning, success, danger, purple, pink, teal, and others. Applied on every page load via chrome.tabs.onUpdated.

AdminPageSection

Note

Available to administrators only.

  • Fetches all admin panel sections (sourceId: uiserv/admin-page-section).

  • Bilingual search (RU / EN).

  • Opens /v2/admin with the required type and journalId.

OpenCardInOldUi

Opens an Alfresco workspace nodeRef card in the legacy Share interface.

URL: {origin}/share/page/card-details?forceOld=true&nodeRef={nodeRef}

InjectCiteckUtils

Automatically injects the $ and $$ objects into the page context on every load. Does not add an entry to the search bar — works only as a background hook. See also: console helpers.

Impersonate

User impersonation via Keycloak OAuth.

  • Saves a history of the last 10 users (chrome.storage.sync).

  • Secrets (tokens) are stored in chrome.storage.session.

Keycloak endpoints:

  • /ecos-idp/auth/realms/master/protocol/openid-connect/token — token retrieval.

  • /ecos-idp/auth/admin/realms/ecos-app/users?username=... — user lookup.

Context Menu

Actions are available via right-click on links containing recordRef or nodeRef:

Menu item

Action

Browse Record

Open record attributes

Copy Record Id

Copy full ID

Copy Local Record Id

Copy local ID

Open Card in Old UI

Open in legacy Alfresco interface

DevTools Panel

The Citeck tab in DevTools for monitoring and debugging the Records API.

Request Interception

Intercepts all requests to /gateway/api/records/* via chrome.devtools.network.onRequestFinished. Stores up to 300 entries in memory.

Color coding by operation type:

Type

Color

records

blue

query

green

mutate

yellow

delete

red

Details View

Four tabs for each request:

Tab

Content

Request

Formatted JSON of the request body

Response

Formatted JSON of the response

Script

Auto-generated executable script

Raw

Raw HTTP data (headers, body, timings)

Script Generation

Automatically generates ready-to-run code for the browser console.

For Records.get:

var result = await Records.get(['emodel/person@admin']).load({ name: 'cm:name' })
result

For Records.query:

var result = await Records.query(
    { sourceId: 'emodel/person', ... },
    { name: 'cm:name' }
).then(r => r.records)
result

Attribute Key Expansion

Numeric keys from the optimized API response are converted back to human-readable attribute names.

Edit & Retry

  • Edit the request JSON body directly in the panel.

  • Re-send via chrome.devtools.inspectedWindow.eval.

  • Dual-path: interception via network listener (primary) + eval callback (fallback).

Recording Controls

  • Pause (⏸) — pause capture of new requests.

  • Clear (🗑) — clear the list.

  • Filter — filter the list by text.

  • Find (F3) — search by text within the detail view.

Themes

Automatically syncs with the DevTools theme (light / dark) via chrome.devtools.panels.themeName.

Console Helpers $ and $$

Injected automatically on every Citeck page via InjectCiteckUtils.

Loading and Saving Attributes

// Загрузка атрибутов произвольной записи
await $.load('emodel/person@admin', { name: 'cm:name', email: 'email' })

// Сохранение атрибутов
await $.save('emodel/person@admin', { 'cm:name': 'New Name' })

// Загрузка атрибутов текущей страницы
await $$.load({ name: 'cm:name' })

// Сохранение атрибутов текущей страницы
await $$.save({ 'cm:name': 'New Name' })

Queries with Predicates

// Простой запрос
await $.query('emodel/person', $.eq('cm:name', 'admin'), { name: 'cm:name' })

// Сложный предикат
await $.query(
    'emodel/person',
    $.and($.contains('cm:name', 'admin'), $.not($.empty('email'))),
    { name: 'cm:name', email: 'email' }
)

// Запрос через sourceId
await $.sourceId['emodel/person'].query($.eq('cm:name', 'admin'), { name: 'cm:name' })

Predicate Builders

Function

Description

$.eq(att, val)

Equality

$.contains(att, val)

Contains substring

$.in(att, [...])

In list

$.gt(att, val)

Greater than

$.ge(att, val)

Greater than or equal

$.lt(att, val)

Less than

$.le(att, val)

Less than or equal

$.empty(att)

Empty value

$.and(...predicates)

Logical AND

$.or(...predicates)

Logical OR

$.not(predicate)

Logical NOT

Extension Permissions

Permission

Purpose

contextMenus

Context menu item registration

clipboardWrite

Writing to the clipboard

scripting

Script injection into the page context (MAIN world)

activeTab

Access to the current tab

storage

Chrome storage (sync and session)

Host permissions: http://* and https://* (all hosts).