Показывать всплывающее окно разрешения для буфера обмена

Основная проблема с предоставленным вами фрагментом кода — использование navigator.permissions.request(). В настоящее время в API navigator.permissions нет метода под названием request. Вот почему функция не работает должным образом.

API navigator.permissions позволяет запрашивать статус разрешений с помощью navigator.permissions.query(), но не предоставляет метода для прямого запроса разрешений. Разрешение на доступ к буферу обмена (или любому другому конфиденциальному ресурсу) обычно запрашивается неявно при попытке выполнить действие, требующее этого разрешения, например чтение или запись в буфер обмена.

Вот исправленный подход к управлению разрешениями буфера обмена:

Пример HTML:

<div id = "contentArea" style = "display: none;">
    <p>Clipboard-accessible content here.</p>
</div>

Пример js:

async function checkClipboardPermissionAndRequest() {
        const contentArea = document.getElementById('contentArea');
        try {
            const result = await navigator.permissions.query({ name: 'clipboard-read' });
            console.info(`Clipboard read permission: ${result.state}`);

            if (result.state !== 'granted') {
                try {
                    const text = await navigator.clipboard.readText();
                    console.info('Clipboard read successfully:', text);
                    console.info('Clipboard read permission granted after read attempt.');
                    contentArea.style.display = 'block';
                } catch (error) {
                    console.info('Clipboard read permission denied after read attempt:', error);
                    contentArea.style.display = 'none'; 
                }
            } else {
                console.info('Clipboard read permission was already granted.');
                contentArea.style.display = 'block';
            }
        } catch (error) {
            console.error('Error checking clipboard permission:', error);
            contentArea.style.display = 'none'; 
        }
    }

checkClipboardPermissionAndRequest();

Используйте вместо const PermissionRequest = await navigator.permissions.request({ name: 'clipboard-read' });

ожидайте navigator.clipboard.read()

Самым важным является поддержка браузера, пожалуйста, проверьте там и найдите альтернативное решение для запроса разрешений и прочитайте буфер обмена

async function checkClipboardPermissionAndRequest() {
  try {
    const result = await navigator.permissions.query({ name: 'clipboard-read' });

    if (result.state !== 'granted'){
      await navigator.clipboard.read(); // denied permission will throw error can catch exception in under catch
      // or 
      //await navigator.clipboard.readText();
      console.info('Clipboard read permission granted.'); //granted permission
    }else {
      console.info('Clipboard read permission already granted.');
    }
    
  } catch (error) {
    console.info('ERROR:: Clipboard read permission denied:', error);
  }
}

// Example usage:S
checkClipboardPermissionAndRequest();