Getting the error DOMException: Document is not focused when running the extension to copy text from PDF to the clipboard

Question

I'm building an extension to copy text to the clipboard without including the line breaks. It runs on every URL but not on PDFs. Background script:

chrome.commands.onCommand.addListener(function (command) {
    if (command === "copy") {
        chrome.tabs.query({'currentWindow':true,'active':true}, function(tabs){
            chrome.tabs.sendMessage(tabs[0].id,'hi');
        })
        }
    }
);

Here is the content script:

async function copyPageUrl() {
  try {
    const text = navigator.clipboard
    yo = window.getSelection().toString();
    yon = yo.replace(/(\r\n|\n|\r)/gm, " ");
    await text.writeText(yon);
    console.log('Page URL copied to clipboard');
    console.log(yon);
  } catch (err) {
    console.error('Failed to copy: ', err);
  }
}

chrome.runtime.onMessage.addListener(function(request){
  alert(request);
  console.log('copy was pressed');
  copyPageUrl()
})

FYI, this is the manifest

{
    "name": "Line Break remover",
    "version": "1.0",
    "description": "Remove Line Breaks when copying from PDFs!",
    "background":{
        "scripts": ["text.js"],
        "persistent": false
    },
    "manifest_version": 2,
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["ContentScript.js"]
        }
        ],
    "commands": {
        "copy" : {
            "suggested_key": {
                 "default": "Shift+Ctrl+X" 
            },
            "description": "Copy a text"
        }
    },
    "permissions": [
        "tabs",
        "background",
        "clipboardRead",
        "clipboardWrite"
      ]   
}

You can view the error in the console.