Permission Issue with `navigator.clipboard.writeText` in `Chart` view

[FMorschel]

Please describe feature/problem details and the solution you'd like. After looking at #511 I've done some testing and it seems that there is a bug where I can not run a navigator.clipboard.writeText. It says there is no permission for it. I'd like to be able to create a column in my table with a button for me to copy the data for that specific row in a json format.

Describe alternatives you've considered Adding a new line to the table when clicking that and showing the full text as I want to copy so I can manually select it and copy it with the CTRL+C command.

Are you using the free version/paid version/trial: I'm using the free version.

[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.

[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]

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

[FMorschel]

Done that!

[rangav]

Thanks for the PR