Working with the clipboard in extensions is transitioning from the Web API
document.execCommand
method (which is deprecated) to the
navigator.clipboard
方法。
注意：
navigator.clipboard
API is a recent addition to the specification and may not be fully implemented in all browsers. This article describes some limitations, but be sure to review the compatibility tables for each method before using them to ensure that the API supports your needs.
The difference between the two APIs is that
document.execCommand
this is analogous to the keyboard copy, cut, and paste actions – exchanging data between a webpage and clipboard – whereas
navigator.clipboard
writes and reads arbitrary data to and from the clipboard.
navigator.clipboard
provide separate methods to read or write:
navigator.clipboard.readText()
and
navigator.clipboard.writeText()
.
navigator.clipboard.read()
and
navigator.clipboard.write()
.
However, while
navigator.clipboard.readText()
and
navigator.clipboard.writeText()
work on all browsers,
navigator.clipboard.read()
and
navigator.clipboard.write()
do not. For example, on Firefox at the time of writing,
navigator.clipboard.read()
and
navigator.clipboard.write()
are not fully implemented, such that to:
browser.clipboard.setImageData()
to write images to the clipboard and
document.execCommand("paste")
to paste images to a webpage.
document.execCommand("copy")
or
document.execCommand("cut")
. Then, either
navigator.clipboard.read()
(recommended) or
document.execCommand("paste")
to read the content from the clipboard.
This section describes the options for writing data to the clipboard.
The Clipboard API writes arbitrary data to the clipboard from your extension. Using the API requires the permission
"clipboardRead"
or
"clipboardWrite"
在您的
manifest.json
file. As the API is only available to
Secure Contexts
, it cannot be used from a content script running on
http:
-pages, only
https:
-pages.
For page scripts, the
"clipboard-write"
permission needs to be requested using the Web API
navigator.permissions
. You can check for that permission using
navigator.permissions.query()
:
navigator.permissions.query({name: "clipboard-write"}).then(result => {
if (result.state == "granted" || result.state == "prompt") {
/* write to the clipboard now */
}
});
注意：
clipboard-write
permission name is not supported in Firefox, only Chromium browsers.
This function takes a string and writes it to the clipboard:
function updateClipboard(newClip) {
navigator.clipboard.writeText(newClip).then(function() {
/* clipboard successfully set */
}, function() {
/* clipboard write failed */
});
}
"cut"
and
"copy"
commands of the
document.execCommand()
method are used to replace the clipboard's content with the selected material. These commands can be used without any special permission in short-lived event handlers for a user action (for example, a click handler).
For example, suppose you've got a popup that includes the following HTML:
<input id="input" type="text"/>
<button id="copy">Copy</button>
To make the
"copy"
button copy the contents of the
<input>
element, you can use code like this:
function copy() {
var copyText = document.querySelector("#input");
copyText.select();
document.execCommand("copy");
}
document.querySelector("#copy").addEventListener("click", copy);
由于
execCommand()
call is inside a click event handler, you don't need any special permissions.
However, let's say that instead you trigger the copy from an alarm:
function copy() {
var copyText = document.querySelector("#input");
copyText.select();
document.execCommand("copy");
}
browser.alarms.create({
delayInMinutes: 0.1
});
browser.alarms.onAlarm.addListener(copy);
Depending on the browser, this may not work. On Firefox, it will not work, and you'll see a message like this in your console:
document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler.
To enable this use case, you need to ask for the
"clipboardWrite"
permission
. So:
"clipboardWrite"
enables you to write to the clipboard outside a short-lived event handler for a user action.
注意：
document.execCommand()
does not work on input fields of
type="hidden"
, with the HTML5 attribute
"hidden"
, or any matching CSS rule using
"display: none;"
. So, to add a "copy to clipboard" button to a
span
,
div
，或
p
tag, you need to use a workaround, such as setting the input's position to absolute and moving it out of the viewport.
The clipboard and other APIs involved here are evolving rapidly, so there are variations among browsers in how they work.
In Chrome:
"clipboardWrite"
, even to write to the clipboard outside a user-generated event handler.
In Firefox:
见 browser compatibility tables 了解更多信息。
This section describes the options for reading or pasting data from the clipboard.
The Clipboard API's
navigator.clipboard.readText()
and
navigator.clipboard.read()
methods let you read arbitrary text or binary data from the clipboard in
安全上下文
. This lets you access the data in the clipboard without pasting it into an editable element.
Once you have the
"clipboard-read"
permission from the
权限 API
, you can read from the clipboard easily. For example, this snippet of code fetches the text from the clipboard and replaces the contents of the element with the ID
"outbox"
with that text.
navigator.clipboard.readText().then(clipText =>
document.getElementById("outbox").innerText = clipText);
要使用
document.execCommand("paste")
your extension needs the
"clipboardRead"
permission
. This is the case even if you're using the
"paste"
command from within a user-generated event handler, such as
click
or
keypress
.
Consider HTML that includes something like this:
<textarea id="output"></textarea>
<button id="paste">Paste</button>
To set the content of the
<textarea>
element with the ID
"output"
from the clipboard when the user clicks the
"paste"
<button>
，可以使用的代码像这样：
function paste() {
var pasteText = document.querySelector("#output");
pasteText.focus();
document.execCommand("paste");
console.log(pasteText.textContent);
}
document.querySelector("#paste").addEventListener("click", paste);
Firefox supports the
"clipboardRead"
permission
from version 54 but only supports pasting into elements in
content editable mode
, which for content scripts only works with a
<textarea>
. For background scripts, any element can be set to content editable mode.
BCD tables only load in the browser
BCD tables only load in the browser
最后修改： , 由 MDN 贡献者