Permission Issue with `navigator.clipboard.writeText` in `Chart` view about thunder-client-support

[rangav]

Thanks @FMorschel for reporting the bug, I will look into it.

[rangav]

In Iframe clipboard is not allowed. Use below code instead.

parent.postMessage( {command: 'copy-text', "text": "textdatatocopy"});

Below is updated code

var html = `
<div id="container"></div>

<script>
  // get the container element
  let container = document.getElementById("container");

  // Create a new button element
  var button = document.createElement('button');
  button.innerHTML = 'Copy to clipboard';
  
  // Add an event listener for the click event
  button.addEventListener('click', function() {
      // Use the Clipboard API to write text
      try{
      parent.postMessage({command:'copy-text', "text": "textdata"});
      

        // Create a new paragraph element
        var p = document.createElement('p');
        p.innerHTML = 'Text copied to clipboard';

        // Append the paragraph to the body of the document
        document.body.appendChild(p);
    } catch(error) {

        // Create a new paragraph element
        var p = document.createElement('p');
        p.innerHTML = 'Failed to copy text' + error;

        // Append the paragraph to the body of the document
        document.body.appendChild(p);
    }
  });
  
  // Append the button to the body of the container
  container.appendChild(button);
</script>
`

tc.chartHTML(html);

[FMorschel]

Done that!

[FMorschel]

Testing script:

var html = `
<div id="container"></div>

<script>
  // get the container element
  let container = document.getElementById("container");

  // Create a new button element
  var button = document.createElement('button');
  button.innerHTML = 'Copy to clipboard';
  
  // Add an event listener for the click event
  button.addEventListener('click', function() {
      // Use the Clipboard API to write text
      navigator.clipboard.writeText('test').then(function() {

        // Create a new paragraph element
        var p = document.createElement('p');
        p.innerHTML = 'Text copied to clipboard';

        // Append the paragraph to the body of the document
        document.body.appendChild(p);
    }).catch(function(error) {

        // Create a new paragraph element
        var p = document.createElement('p');
        p.innerHTML = 'Failed to copy text' + error;

        // Append the paragraph to the body of the document
        document.body.appendChild(p);
    });
  });
  
  // Append the button to the body of the container
  container.appendChild(button);
</script>
`

tc.chartHTML(html);

Exact error:
Failed to copy textNotAllowedError: Write permission denied.

[FMorschel]

It worked! Thanks! Could this be mentioned in the docs? I think this could be a great help for the extension users.

[rangav]

Sure, also feel free to submit PR

https://docs.thunderclient.com/testing/chart-view

[rangav]

Thanks for the PR