How to control the number of displayed icons using Config.json?

This code enables PopClip to showcase two icon graphics, each capable of triggering distinct functions. The question is, how can you utilize the ‘identifier’ property in Config.json to determine whether to display one or both icons?

Config.json

{
  "name": "translate",
  "icon": "translate.svg",
  "identifier": "bboo.popclip.extension.translate",
  "popclipVersion": 4069,
  "module": "translate.js",
  "entitlements": ["network"],
  "options": [
    {
      "identifier": "appid",
      "label": "APP ID",
      "type": "string"
    },
    {
      "identifier:": "key",
      "label": "key",
      "type": "password"
    },
    {
      "identifier": "icon",
      "label": "2 icon",
      "type": "boolean",
      "default value": false
    }
  ]
}

translate.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.actions = void 0;
const axios_1 = require("axios");

const mainAction = async (input, options) => {
    const appid = options.appid;
    const key = options.key;
    // ...
};

const toCamelCase = async (input) => {
    // ...
};

exports.actions = [{
    title: "translate",
    code: mainAction,
    icon: "translate.svg"
}, {
    title: "CamelCase",
    code: toCamelCase,
    icon: "coding_cases.svg"
}];

Thank you for PopClip, and Thank you for your time.

image

I came up with an idea to create two extensions by modifying the “identifier” in Config.json.
But this approach isn’t elegant because there’s a lot of repetitive content in the JavaScript code. I haven’t figured out how Coding Cases controls the number of icons through Config.json.

image

Two possible ways:


Using population function

This allows for more complex logic.

Instead of exporting actions as a static array, export a function instead. The function whould return the array of actions.

You’d need to add the dynamic entitlemeent.

Example: see population function

Using requirements field

A simpler way is to just use e.g. option-icon=1 in the requirements

exports.actions = [{
    title: "translate",
    requirements: ["option-icon=1"],
    code: mainAction,
    icon: "translate.svg"
}, {
    title: "CamelCase",
    requirements: ["option-icon=0"]
    code: toCamelCase,
    icon: "coding_cases.svg"
}];
1 Like

it doesn’t use config.json, it uses a population funciton. Here’s the code for that extension:

1 Like

Thanks a bunch for taking the time to clear up my confusion, even on some basic stuff. (Sorry, I didn’t really dive into the developer docs – it’s a bit challenging for a newbie like me.)

The simpler approach you suggested works like a charm, and it’s exactly what I needed.

Thanks again!