title: Use power-up to copy to clipboard on click
body: <p>I've created a button to take the url of a card and add the relative path to our own url to stop it showing a description when posted to Flock.</p>
  <p>Right now it shows the spliced url in a popup which we have to manually copy, the functionality we want is to click the button and have it copy the text.</p>
  <pre><code>var GRAY_ICON = 'https://cdn.hyperdev.com/us-east-1%3A3d31b21c-01a0-4da2-8827-4bc6e88b7618%2Ficon-gray.svg';
  
  var onBtnClick = function (t, opts) {
    return t.card(&quot;url&quot;).then(function (card) {
      var str = JSON.stringify(card, null, 2);
      var parsedURL = JSON.parse(str);
      const url = new URL(parsedURL.url);
      var shortUrl = &quot;Our custom URL&quot; + url.pathname
      updateClipboard(shortUrl); //DOESN'T WORK
      return t.popup({
        title: &quot;Flock Link&quot;,
        items: [{
          text: &quot;Our custom URL&quot; + url.pathname //WORKS AND SHOWS IN POPUP
        }]
      });
    }).catch(error =&gt; console.log(error));
  };
  
  function updateClipboard(newClip) {
    navigator.clipboard.writeText(newClip).then(function () {
      console.log('Success: ' + newClip);
    }, function () {
      console.log('Failed to copy');
    });
  } +
  
  window.TrelloPowerUp.initialize({
    'card-buttons': function (t, opts) {
      return [{
        icon: GRAY_ICON,
        text: 'Flock Link',
        callback: onBtnClick,
        condition: 'edit',
        backgroundColor: '#263340',
        color: '#ffffff'
      }, () =&gt; {
        console.log('reached');
        var btn = document.querySelector('.button-link[title=&quot;Flock Link&quot;]')
        btn.style.backgroundColor = '#263340';
        btn.style.color = '#ffffff';
      }];
    }
  });
  </code></pre>
  <p>So, I have tried to remove the t.popup and instead use either <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard" rel="nofollow noreferrer">navigator.clipboard or document.execCommand as per the docs</a> but I just can't get it to work.</p>
  <p>EDIT:
  Here is the error I get in Firefox's console:</p>
  <pre><code>Uncaught (in promise) TypeError: 'clipboard-write' (value of 'name' member of PermissionDescriptor) is not a valid value for enumeration PermissionName.
  </code></pre>
  <p>and in Chrome I don't get an error but this message:</p>
  <p>'clipboard permission state is  denied'</p>
  <p>Which is definitely not true based on the flags.</p>
  <p>The second issue is trying to change the colour of the button - this should be super simple but I must be overthinking it as I cannot get any subsequent function or other properties to affect the button in anyway.</p>