Skip to content
No description, website, or topics provided.
JavaScript CSS HTML
Branch: master
Clone or download

MOCO Browser Extension


  • run yarn
  • run yarn start:chrome or yarn start:firefox (yarn start is an alias for yarn start:chrome)
  • load extension into browser:
    • Chrome: visit chrome://extensions and load unpacked extension from build/chrome
    • Firefox: visit about:debugging and load temporary Add-on from build/firefox
  • reload browser extension after change

Production Build

  • bump version in package.json
  • run yarn build
  • The Chrome and Firefox extensions are available as ZIP-files in build/chrome and build/firefox respectively

Install Local Builds


  1. yarn build:chrome
  2. Visit chrome://extensions
  3. Enable Developer mode
  4. Load unpacked and select the build/chrome folder.


  1. yarn build:firefox
  2. Visit about:debugging
  3. Click on Load temporary Add-on and select the ZIP-file in build/firefox

Only signed extensions can be permantly installed in Firefox (unless you are using Firefox Developer Edition). To sign the build, proceed as described in Getting started with web-ext.

You can keep the extension settings between builds by providing a stable APPLICATION_ID between builds. You can set an APPLICATION_ID in a file named .env or at build time as follows: yarn build:firefox

Remote Service Configuration

Remote services are configured in src/js/remoteServices.js.

A remote service is configured as follows:

  service_key: {
    name: "service_name",
    urlPatterns: [
      [/^https:\/\/(\w+)\/card\/(\d+), ["subdomain", "id"]],
    queryParams: {
      projectId: "currentList"
    description: (document, service, { subdomain, id, projectId }) => {
      const title = document
      return `#${id} ${service.key} ${title || ""}`
    projectId: (document, service, { subdomain, id, projectId }) => {
      return projectId
    position: { left: "50%", transform: "translate(-50%)" }
Parameter Description
service_key string — Unique identifier for the service
service_name string — Must be one of the registered services trello, jira, asana, wunderlist, github or youtrack
urlPatterns string | RegEx — A valid URL pattern or regular expression, as described in the url-pattern package.
queryParams Object — The object value is the name of the query parameter and the key the property it will available on, e.g. the value of the query parameter currentList will be available under projectId. Matches in urlPatterns have precedence over matches in queryParams.
description undefined | string | function — The default description of the service. If it is a function, it will receive window.document, the current service and an object with the URL matches as arguments, and the return value set as the default description.
projectId undefined | string | function — The pre-selected project of the service matching the MOCO project identifier. If it is a function, it will receive window.document, the current service and an object with the URL matches as arguments, and must return the MOCO project identifier or undefined.
position Object — CSS properties as object styles for position the bubble. Defaults to { right: calc(4rem + 5px)

Adding a Custom Service

  1. Fork and clone this repository
  2. Add your service to src/removeServices.js, e.g. for self-hosted Jira copy the entry with the key jira and update the urlPatterns:
  "self-hosted-jira": {
    name: "jira",
    urlPatterns: [
    queryParams: {
      id: "selectedIssue",
      projectId: "projectKey"
    description: (document, service, { id }) => {
      const title =
          .querySelector('[aria-label="Edit Summary"]')
          ?.textContent?.trim() ||
          .querySelector(".ghx-selected .ghx-summary")
      return `#${id} ${title || ""}`
  1. Build the extension (see Production Build).
  2. Install the extension locally (see Install Local Builds).
You can’t perform that action at this time.