Extensions#

The "Extensions" section is designed for managing browser extensions in Afina. Here you can add extensions by URL or via a .zip file, enable or disable them, pin them in the browser, update them from the Chrome Web Store, and delete them from the list.

Location: the "Extensions" section is available in the left navigation panel.

Available actions:

• view the list of added extensions
• add extensions by URL
• add extensions via a .zip file
• pin or unpin extensions in the browser
• enable or disable extensions
• update extensions from the Chrome Web Store
• delete extensions from the list
• refresh the list of extensions on the page

"Add Extension" tile#

The "Add Extension" tile is located first in the section's workspace and contains a ➕ icon. It opens the "Add Extension" modal window, where you can choose how to add a new extension.

Upon clicking, a modal window opens with the modes "Add by URL" and "Upload as file (.zip)". After successful saving, the extension is added to the list of cards.

"Add Extension" modal window#

The "Add Extension" modal window is used to add an extension from the Chrome Web Store or from a local .zip archive. In the right part of the header, there is a ✖️ icon to close the window without saving.

In the "Add by URL" mode, paste the link into the "Extension link" field and click Save. In the "Upload as file (.zip)" mode, click Upload extension file, select the archive via the system window, and click Save.

The Cancel button closes the window without adding the extension. The Save button applies the selected addition method; if the link is not specified or the file is not selected, saving is disabled.

Extension card#

The Extension card displays basic information about the added extension: icon, name, version, description, provider, and available management actions. On the right side of the card are the enable and pin toggles, and at the bottom are the update and delete icons.

If the extension was added from the Chrome Web Store, the "Provider" row displays the value "Chrome Web Store". If the extension was added via a .zip file, it is displayed as a locally loaded extension.

Enable toggle#

The Enable toggle is located on the right side of the card next to the power icon. It is used to enable or disable the extension.

After changing the state, the "Confirm enable/disable" modal window opens. Click Confirm to apply the change, or Cancel to close the window without changes.

Pin toggle#

The Pin toggle is located on the right side of the card next to the pin icon. It is used to pin or unpin the extension in the browser.

After changing the state, the "Confirm pin/unpin" modal window opens. Click Confirm to apply the change, or Cancel to close the window without changes.

"Update extension" icon#

The "Update extension" icon is located at the bottom of the extension card. It triggers a check and update of the extension to the current version from the Chrome Web Store.

After clicking, Afina processes the update. Upon successful completion, a pop-up message about the result is displayed, and the extension card shows the updated data.

"Delete extension" icon#

The "Delete extension" icon is located at the bottom of the extension card and opens the "Confirm deletion" modal window.

In the window, you must enter "delete" in the confirmation field "Enter 'delete' to confirm". After that, the Confirm button becomes available. Clicking Confirm removes the extension from the Afina list, and clicking Cancel closes the window without changes.

"Refresh" icon#

The "Refresh" icon is located next to the "Extensions" heading and reloads the list of extensions on the page.

After clicking, Afina reloads the list and displays the current extension cards, their statuses, provider, and version if available.

List pagination#

List pagination is located at the bottom of the page. It shows the range of displayed cards, the total number of extensions, buttons to navigate between pages, and control over the number of items per page.

After changing the page or the number of items, Afina updates the visible set of extension cards.

Workflow Scenario#