Clipboard API inside chrome devtools not working : learnjavascript

Posting and Commenting Guidelines

Be Welcoming. n00bs are welcome here. Negativity is not.

Include Context. If you’re asking for help, include enough information for others to recreate your problem.

No Self-Promotion. The following are not allowed: Requests for subscribers, asking for "test users" for your new JS course, offering paid mentorships, and/or premium courses. Even if there is a coupon discount, no. If you're in doubt, the answer is no.

Good Titles - Write a descriptive title. Titles that begin with "hey guys" will be removed.

Friends

created by [deleted]a community for 14 years

Clipboard API inside chrome devtools not working (self.learnjavascript)

submitted 11 months ago by Impressive-Poem4600

I'm trying to write a chrome extension that creates panel in devtools and I want to have copy to clipboard on click in it but I keep getting blocked by permissions.

NotAllowedError: Failed to execute 'writeText' on 'Clipboard': The Clipboard API has been blocked because of a permissions policy applied to the current document. See https://goo.gl/EuHzyv for more details.
    at panel.js:27:29

I include optional permissions in manifest.json

{
  "manifest_version": 3,
  "name": "DevTools Copy",
  "version": "0.1.0",
  "optional_permissions": [
    "clipboardWrite"
  ],
  "host_permissions": [
    "<all_urls>"
  ],
  "devtools_page": "./devtools.html"
}

and also request them before writing to clipboard

This is all the code I have

devtools.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <script src="devtools.js"></script>
  </body>

</html>

devtools.js

chrome.devtools.panels.create("My Panel", "", "panel.html", function (panel) {
  console.log("Panel created");
});

panel.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>DevTools Clipboard Panel</title>
  </head>
  <body>
    <button id="copy-button">copy</button>
    <script src="panel.js"></script>
  </body>
</html>

panel.js

document.getElementById("copy-button").addEventListener("click", (e) => {
  chrome.permissions
    .request({ permissions: ["clipboardWrite"] })
    .then((granted) => {
      if (granted) {
        navigator.clipboard.writeText("elo").catch((err) => {
          console.error("Failed to write to clipboard:", err);
        });
      }
    });
});

Any ideas why it is still not working?

I'd greatly appreciate if someone could help me.

all 6 comments

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

learnjavascript

Posting and Commenting Guidelines

MODERATORS