Skip to content

adobe/helix-sidekick-extension

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

AEM Sidekick Extension

Browser extension for authoring AEM sites

Status

codecov CircleCI GitHub license GitHub issues LGTM Code Quality Grade: JavaScript semantic-release

Installation

Installing the Chrome extension

  1. Go to the Chrome Web Store
  2. Click Add to Chrome
  3. Confirm by clicking Add extension
  4. Click the extensions icon next to Chrome's address bar to see a list of all extensions:
    Extensions icon
  5. Verify that there's an icon like this:
    Sidekick extension icon
  6. Click the pin button next to it to make sure it always stays visible.
Adding projects to the Chrome extension
  1. Right-click the extension's icon and select Options:
    Extension box
    On this page, you can add projects by either pasting a share URL* or a GitHub URL in the respective fields and clicking Add. This page will also allow you to view, edit and delete existing projects.
    1. Alternatively, you can also navigate to a share URL* or a GitHub project, click the extension's icon and select Add project.
  2. Navigate to your project's homepage and click on the extension's icon to toggle the Sidekick.

* Share URLs start with https://www.hlx.live/tools/sidekick/...

Usage

Refer to the Sidekick documentation to learn more about its features.

Development

Build

$ npm install
$ npm run build

Test

$ npm test

Lint

$ npm run lint

Local testing

Testing a local Chrome extension

  1. Run npm run build:chrome
  2. Open Chrome and navigate to chrome://extensions
  3. Turn on Developer mode at the top right of the header bar
    Developer mode
  4. Click the Load unpacked button in the action bar
    Load unpacked
  5. Navigate to the dist > chrome folder and click Select to install and activate the Sidekick extension.
  6. Verify that your Extensions page displays a box like this:
    Extension box
  7. Configurations are not automatically migrated to the Unpacked extension. Either follow the steps under Adding projects to the extension or Export/Import the other plugin's configuration.
  8. If you do not see the Sidekick JavaScript files in the browser debug window, check that they are not being ignored. Ensure "Content scripts injected by extensions" is unchecked:
    Framework ignore list

Testing a local project config

If you want to test a config file before deploying it to your project:

  1. Run hlx up on your local checkout of the project repository
  2. Add your project to the sidekick extension
  3. Enable local project configruation:
    1. Right-click the extension's icon and select Options
    2. Click Advanced on the left
    3. Click Edit on the project configuration you want to test locally
    4. Tick the Test project configuration locally checkbox
    5. Click Save
  4. Navigate to a project URL and activate the sidekick extension

Deployment

Deploying Chrome Extension

The Chrome extension is automatically built and uploaded to Chrome Web Store every time a pull request triggering a semantic-release is merged into main. Once reviewed by Google, it will be auto-published and pushed to end users' browsers.

The following environment variables are required in the CircleCI project settings: GOOGLE_APP_ID, GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET and GOOGLE_REFRESH_TOKEN. See here for detailed instructions how to obtain and generate them.

Chrome Developer Dashboard (Adobe only)

As an Adobe developer, see https://wiki.corp.adobe.com/x/xJlMqQ for instructions how to get access to the Chrome Developer Dashboard and make changes to the Chrome Web Store listing.

Safari Extension

The Safari Extension is built, signed and uploaded to App Store Connect automatically each time a pull request triggering a semantic-release is merged into main.

An Xcode Cloud workflow is listening for changes made to the change log file in the main branch.

App Store Connect (Adobe only)

As an Adobe developer, see https://wiki.corp.adobe.com/x/xJlMqQ for instructions how to get access to the App Store Connect and make new builds available via TestFlight and public release.