Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Show permission pop up for clipboard

I’m working on app that requires the user’s permission to read/write his clipboard. I want to block the entrance to a part of my website if they haven’t granted those permissions. Also, if they haven’t granted permission display a button that when clicking it shows the small pop up at the top left corner of the browser to grant the permission. I already tried using this but it doesn’t work:

async function checkClipboardPermissionAndRequest() {
  try {
    const result = await navigator.permissions.query({ name: 'clipboard-read' });
    
    if (result.state !== 'granted') {
      const permissionRequest = await navigator.permissions.request({ name: 'clipboard-read' });
      if (permissionRequest.state === 'granted') {
        console.log('Clipboard read permission granted.');
      } else {
        console.log('Clipboard read permission denied.');
      }
    } else {
      console.log('Clipboard read permission already granted.');
    }
  } catch (error) {
    console.error('Error checking clipboard permission:', error);
  }
}

// Call the function to check clipboard permissions and request if necessary
checkClipboardPermissionAndRequest();

This was just for web console testing, but I want to implement it in my Next.js app.

Tags:

2

Answers


  1. 0

    The main issue with the code snippet you provided is the use of navigator.permissions.request(). Currently, there is no method called request within the navigator.permissions API. This is why the function is not working as expected.

    The navigator.permissions API allows you to query the permission status using navigator.permissions.query(), but it does not provide a method to directly request permissions. Permission to access the clipboard (or any other sensitive resource) is typically requested implicitly when attempting to perform an action that requires that permission, such as reading from or writing to the clipboard.

    Here is a corrected approach on how you can manage clipboard permissions:

    Example Html:

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

    Example js:

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

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

checkClipboardPermissionAndRequest();
    Login or Signup to reply.
  2. 0

    Use instead of const permissionRequest = await navigator.permissions.request({ name: ‘clipboard-read’ });

    await navigator.clipboard.read()

    The most important is browser support please check there and find alternative solution for permissions query and read the clipboard

    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.log('Clipboard read permission granted.'); //granted permission
    }else {
      console.log('Clipboard read permission already granted.');
    }
    
  } catch (error) {
    console.log('ERROR:: Clipboard read permission denied:', error);
  }
}

// Example usage:S
checkClipboardPermissionAndRequest();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search