ui.html

<style>
  * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  /*  Typography */
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url("https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.7") format("woff2"), url("https://rsms.me/inter/font-files/Inter-Regular.woff?v=3.7") format("woff");
  }

  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    src: url("https://rsms.me/inter/font-files/Inter-Medium.woff2?v=3.7") format("woff2"), url("https://rsms.me/inter/font-files/Inter-Medium.woff2?v=3.7") format("woff");
  }

  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    src: url("https://rsms.me/inter/font-files/Inter-SemiBold.woff2?v=3.7") format("woff2"), url("https://rsms.me/inter/font-files/Inter-SemiBold.woff2?v=3.7") format("woff");
  }

  label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: default;
    color: rgba(0, 0, 0, 0.8);
    font-family: "Inter", sans-serif;
    font-weight: 600;
    margin: 7px;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.005em;
  }

  .button {
    display: inline-block;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    height: 30px;
    margin: 10px 5px;
    padding: 5px 16px 5px 16px;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
  }

  .button:hover {
    color: rgba(0, 0, 0, 0.8);
    background-color: #ffffff;
    border: 2px solid rgba(0, 0, 0, 0.1);
  }

  .button--primary {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.01em;
    color: #ffffff;
    background-color: #18a0fb;
  }

  .input {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: visible;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    padding: 8px 4px 8px 7px;
    color: rgba(0, 0, 0, 0.8);
    border: 1px solid transparent;
    border-radius: 2px;
    outline: none;
    background-color: #ffffff;
    margin: 5px 0;
    width: 100%;
    height: 29px;
  }

  .input:hover {
    color: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
  }

  .input::-moz-selection {
    color: #000000;
    background-color: rgba(24, 145, 251, 0.3);
  }

  .input::selection {
    color: #000000;
    background-color: rgba(24, 145, 251, 0.3);
  }

  .input::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.3);
    border: 1px solid transparent;
  }

  .input:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.3);
    border: 1px solid transparent;
  }

  .input::-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.3);
    border: 1px solid transparent;
  }

  .input::placeholder {
    color: rgba(0, 0, 0, 0.3);
    border: 1px solid transparent;
  }

  .picker {
    display: block;
    width:100%;
  }

  .swatch {
    position: absolute;
    top:24px;
    right: 1px;
    width: 27px;
    height: 27px;
    background-color: #FFF;
    cursor: pointer;
    outline: 1px solid #DDD
  }
  .wrapper {
    position: relative;
    border-bottom: 1px solid #DDD;
  }
</style>

<script src="https://cdn.jsdelivr.net/npm/a-color-picker@1.2.1/dist/acolorpicker.min.js"></script>
<div id="colorize">
  <div class="wrapper">
    <label for="new-color">New Color</label>
    <input type="text" id="new-color" class="input" value="" placeholder="Optional" />
    <div id="swatch" class="swatch"></div>
    <div id="color" class="picker" acp-show-rgb="no" acp-show-hsl="no" acp-show-hex="no" acp-show-alpha="no" acp-color="#EEE"></div>
  </div>

  <div class="wrapper">
    <label for="new-color">Remove Color</label>
    <input type="text" id="remove-color" class="input" value="" placeholder="Optional" />
    <div id="swatch-remove" class="swatch"></div>
    <div id="color-remove" class="picker" acp-show-rgb="no" acp-show-hsl="no" acp-show-hex="no" acp-show-alpha="no" acp-color=""></div>
  </div>
  <button id="submit" type="submit" value="submit" class="button button--primary">Colorize</button>
</div>








<script>
  /*!
  ♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡
  ♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥
  Utilities
  ♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥
  ♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡
  */

  //credit: https://stackoverflow.com/questions/13070054/convert-rgb-strings-to-hex-in-javascript
  function componentFromStr(numStr, percent) {
    var num = Math.max(0, parseInt(numStr, 10));
    return percent ?
      Math.floor(255 * Math.min(100, num) / 100) : Math.min(255, num);
  }


  function rgbToHex(rgb) {
    var rgbRegex = /^rgb\(\s*(-?\d+)(%?)\s*,\s*(-?\d+)(%?)\s*,\s*(-?\d+)(%?)\s*\)$/;
    var result, r, g, b, hex = "";
    if ((result = rgbRegex.exec(rgb))) {
      r = componentFromStr(result[1], result[2]);
      g = componentFromStr(result[3], result[4]);
      b = componentFromStr(result[5], result[6]);

      hex = (0x1000000 + (r << 16) + (g << 8) + b).toString(16).slice(1);
    }
    return hex;
  }

  /*!
  ♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡
  ♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥
  UI Functionality
  ♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥
  ♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡
  */
  //loop through the swatch buttons and add a click event to each
  const swatches = document.querySelectorAll('.swatch');
  swatches.forEach(function (swatch) {
    swatch.addEventListener("click", function (event) {
    const input = swatch.previousElementSibling;
    const picker = swatch.nextElementSibling;
      if (picker.childNodes.length === 0) {
        AColorPicker.from('#'+picker.id, {
            hueBarSize: [100, 10],
            slBarSize: [170, 50]
          })
          .on('change', (picker, color) => {
            swatch.style.backgroundColor = color;
            input.value = '#' + rgbToHex(color)
          });
      } else {
        picker.innerHTML = "";
      }
    });
  });


  //function to update each swatch when the input field is updated
  const regEx = /(^#|)+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/i;
  function checkColor(elem) {
    if (regEx.test(elem.value) === true) {
      elem.nextElementSibling.style.backgroundColor = elem.value;
      elem.nextElementSibling.nextElementSibling.setAttribute('acp-color', elem.value);
    } else {
      elem.nextElementSibling.style.backgroundColor = '';
      elem.nextElementSibling.nextElementSibling.setAttribute('acp-color', '');
    }
  }
  //loop through the input fields and add the event listeners
  const fields = document.querySelectorAll('.input');
  fields.forEach(function(field) {
    field.addEventListener('change', function(){checkColor(this)});
    field.addEventListener('keyup', function(){checkColor(this)});
    field.addEventListener('paste', function(){checkColor(this)});
  });


  //check the hex value of each input field and send off the data when the colorize button is clicked
  const newColor = document.getElementById('new-color');
  const removeColor = document.getElementById('remove-color');
  const colorize = document.getElementById('submit');
  colorize.addEventListener("click", function () {
    // each input field is now optional so the if conditional is unnecessary, but it may be useful in the future so it remains as is for now
    // if (regEx.test(newColor.value) === true) {
      parent.postMessage({
        pluginMessage: {
          type: 'colorize',
          color: newColor.value,
          removeColor: removeColor.value
        }
      }, '*')
    // } else {
    //   parent.postMessage({
    //     pluginMessage: {
    //       type: 'hex error',
    //       notification: '🖌️ Please enter a valid hex code 🎨'
    //     }
    //   }, '*')
    // }
  }, false);


  /*!
  ♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡
  ♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥
  Image Manipulation
  ♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥
  ♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡
  */
  //credit: https://www.figma.com/plugin-docs/working-with-images/
  async function encode(canvas, ctx, imageData) {
    ctx.putImageData(imageData, 0, 0)
    return await new Promise((resolve, reject) => {
      canvas.toBlob(blob => {
        const reader = new FileReader()
        reader.onload = () => resolve(new Uint8Array(reader.result))
        reader.onerror = () => reject(new Error('Could not read from blob'))
        reader.readAsArrayBuffer(blob)
      })
    })
  }


  //credit: https://www.figma.com/plugin-docs/working-with-images/
  async function decode(canvas, ctx, bytes) {
    const url = URL.createObjectURL(new Blob([bytes]))
    const image = await new Promise((resolve, reject) => {
      const img = new Image()
      img.onload = () => resolve(img)
      img.onerror = () => reject()
      img.src = url
    })
    canvas.width = image.width
    canvas.height = image.height
    ctx.drawImage(image, 0, 0)
    const imageData = ctx.getImageData(0, 0, image.width, image.height)
    return imageData
  }


  //credit: https://www.figma.com/plugin-docs/working-with-images/
  window.onmessage = async (event) => {
    const bytes = event.data.pluginMessage.bytes
    const color = event.data.pluginMessage.color
    const removeColor = event.data.pluginMessage.removeColor
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    const imageData = await decode(canvas, ctx, bytes)
    const pixels = imageData.data
    // colorize the image by looping through each pixel in batches of 4, in accordance to the UInt8Array
    for (let i = 0; i < pixels.length; i += 4) {
      //first, we check if a color needs to be removed. If a color to remove has been sent, change the alpha in the pixel to 0
      if(removeColor && pixels[i + 0] === removeColor.r && pixels[i + 1] === removeColor.g && pixels[i + 2] === removeColor.b ) {
        pixels[i + 3] = 0
      }
      //now we can loop through every other pixel and apply the new color overlay, if any
      if ( color ) {
        pixels[i + 0] = color.r
        pixels[i + 1] = color.g
        pixels[i + 2] = color.b
      }
    }
    //send the new image data back
    const newBytes = await encode(canvas, ctx, imageData)
    parent.postMessage({
      pluginMessage: {
        type: 'newImg',
        bytes: newBytes
      }
    }, '*')

  }
</script>