DOMException on calling navigator.clipboard.readText()

Question

Following lines of code used to work and stopped working after chrome upgrade to Version 74.0.3729.169 (Official Build) (64-bit). Now I get DOMException even though permission is set correctly. Appreciate if you can explain what is the bug and workaround. Exception details:

message:Document is not focused name:NotAllowedError code:0

navigator.permissions.query({ name: 'clipboard-read' }).then(result => { // If permission to read the clipboard is granted or if the user will // be prompted to allow it, we proceed.     if (result.state === 'granted' || result.state === 'prompt') {         navigator.clipboard.readText()             .then(text => {                 //my code to handle paste              })              .catch(err => {                  console.error('Failed to read clipboard contents: ', err);              });      } } 

Answer 1

This seems to happen when executing code from the devtools console or snippets.

Workaround:

You can execute the code below and focus on the window within 3 seconds, by clicking somewhere, or just by pressing <tab>.

e.g. from snippets

Ctrl-Enter
<Tab>

e.g. from console

Enter
<Tab>

setTimeout(async()=>console.log(      await window.navigator.clipboard.readText()), 3000) 

Answer 2

As Kaiido said, your DOM need to be focused. I had the same problem during my development when i put a breakpoint in the code... The console developper took the focused and the error appear. With the same code and same browser, all work fine if F12 is closed