diff options
Diffstat (limited to 'files/uk/mozilla/add-ons/webextensions/interact_with_the_clipboard/index.html')
| -rw-r--r-- | files/uk/mozilla/add-ons/webextensions/interact_with_the_clipboard/index.html | 171 |
1 files changed, 0 insertions, 171 deletions
diff --git a/files/uk/mozilla/add-ons/webextensions/interact_with_the_clipboard/index.html b/files/uk/mozilla/add-ons/webextensions/interact_with_the_clipboard/index.html deleted file mode 100644 index b415ba0b0b..0000000000 --- a/files/uk/mozilla/add-ons/webextensions/interact_with_the_clipboard/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: Interact with the clipboard -slug: Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard -translation_of: Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard ---- -<div>{{AddonSidebar}}</div> - -<p>Існує два шляхи взаємодії веб-додатків з буфером обміну: {{domxref("Document.execCommand()")}} метод і новітній асинхронний <a href="/en-US/docs/Web/API/Clipboard_API">Clipboard API</a>.</p> - -<p>{{domxref("Document.execCommand()")}} може використовуватись, бажано з наступними командами:</p> - -<ul> - <li><code>document.execCommand("copy")</code></li> - <li><code>document.execCommand("cut")</code></li> - <li><code>document.execCommand("paste")</code></li> -</ul> - -<p>Clipboard API надає асинхронний доступ считування та запису прямо в буфер обміну. Наприклад, щоб зчитати текст з буферу обміну виконайте:</p> - -<pre class="brush: js">navigator.clipboard.readText().then(text => outputElem.innerText = text);</pre> - -<p>Ця команда запитує текст в буфері та, та коли відповідь надійде з буферу, вона буде записана прямісенько в елемент {{domxref("Node.innerText", "innerText")}}.</p> - -<div class="note"> -<p><strong>Примітка:</strong> Асинхронний Clipboard API метод нещодавно доданий в специфікацію, і може ще працювати не в усіх веб-оглядачах. Запевнетесь щодо кожного методу в таблиці сумісності перед тим як використовувати його.</p> -</div> - -<h2 id="Запис_в_буфер_обміну">Запис в буфер обміну</h2> - -<p>Існує два шляхи запису в буфер обміну. Ви можете використати {{domxref("Document.execCommand", "document.execCommand()")}} для запиту "cut" та "copy" дій, які замінюють контент в буфері із виділенним даними. Інша опція це Clipboard API's {{domxref("Clipboard.writeText()")}} чи {{domxref("Clipboard.write()")}}.</p> - -<h3 id="Використання_execCommand()">Використання execCommand()</h3> - -<p>{{domxref("Document.execCommand", "document.execCommand()")}} метод <code>"cut"</code> та <code>"copy"</code> команди можуть бути використані для заміни буферу із виділенними даними. Ці команди можуть бути виконані без будь яких дозволів, якщо ви використовуєте їх короткочасних обробниках дій користувача(наприклад, обробник кліку).</p> - -<p>Наприклад HTML:</p> - -<pre class="brush: html"><input id="input" type="text"/> -<button id="copy">Copy</button> -</pre> - -<p>Із кнопкою <code>"copy"</code> яка копіює контент {{HTMLElement("input")}} елементу, ви можете використати код такий як:</p> - -<pre class="brush: js">function copy() { - var copyText = document.querySelector("#input"); - copyText.select(); - document.execCommand("copy"); -} - -document.querySelector("#copy").addEventListener("click", copy);</pre> - -<p>Тому що <code>execCommand()</code> виклик знаходится всередені обробника кліку, вам не потрібні ніякі спеціальні дозволи.</p> - -<p>Однак, якщо наприклад замість того ви копіюєте з alarm:</p> - -<pre class="brush: js">function copy() { - var copyText = document.querySelector("#input"); - copyText.select(); - document.execCommand("copy"); -} - -browser.alarms.create({ - delayInMinutes: 0.1 -}); - -browser.alarms.onAlarm.addListener(copy);</pre> - -<p>Залежно від веб-оглядача, це може не спрацювати. У Firefox, це не спрацює, і ви побачете повідомлення помилки як:</p> - -<pre>document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler.</pre> - -<p>Щоб надати можливість виконати це, вам потрібно запитати дозвол <code>"clipboardWrite"</code> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a>. Тож: <code>"clipboardWrite"</code> дозволяє копіювати поза простих обробників дій користувача.</p> - -<h3 id="Використання_Clipboard_API">Використання Clipboard API</h3> - -<p>Clipboard API додає більшу гнучкість, в такому разі ви не обмежені лише в копіюванні поточного виділення в буфер обміну, ви маєте також можливість вказати будь яку інформацію внести в буфер.</p> - -<p>Використання API потребує дозволу "clipboardRead" чи "clipboardWrite" в вашому manifest.json файлі.</p> - -<p>Для страничних скриптів, Permissions API's потребує дозвіл <code>"clipboard-write"</code>. Ви можете запросити дозвіл з {{domxref("Permissions.query", "navigator.permissions.query()")}}:</p> - -<pre class="brush: js">navigator.permissions.query({name: "clipboard-write"}).then(result => { - if (result.state == "granted" || result.state == "prompt") { - /* write to the clipboard now */ - } -}); -</pre> - -<p>Ця функція приймає строку вводу та вносить ії в буфер обміну:</p> - -<pre class="brush: js">function updateClipboard(newClip) { - navigator.clipboard.writeText(newClip).then(function() { - /* clipboard successfully set */ - }, function() { - /* clipboard write failed */ - }); -} -</pre> - -<h3 id="Browser-specific_considerations">Browser-specific considerations</h3> - -<p>Буфер обміну та інші APIs активно розвиваются, тож існують варіанти серед веб-оглядачів як вони працюють.</p> - -<p>В Chrome:</p> - -<ul> - <li>Ви можете записувати в буфер обміну як інші операції з контекстом сторінки.</li> - <li>Вам не потрібні <code>"clipboardWrite"</code>, навіть поза функцією оброки дій користувача(event handler).</li> -</ul> - -<p>В Firefox:</p> - -<ul> - <li>Ви можете записувата в буфер з execCommand в усіх обробках контенту, <em>виключно в фонових сторінках</em>. В Firefox ви не можете виділяти текст чи ставити фокус на input в фонових сторінках, тож ви не можете записувати в буфер з execCommand у фонових сторінках. Clipboard Web API не має таких обмежень.</li> - <li>З версії 57 і вищче, ви можете копіювати зображення в буфер використовуючи <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/clipboard/setImageData">clipboard.setImageData()</a></code> API.</li> - <li>Підтримка Clipboard API's {{domxref("Clipboard.writeText", "navigator.clipboard.writeText()")}} було додано Firefox 63.</li> - <li>Із використанням скриптів сторінок, Clipboard API доступна лише з HTTPS сторінками. В іншому випадку, використовуйте messaging між вашим контент скриптом та фоновим скриптом.</li> -</ul> - -<div class="blockIndicator note"> -<p><code>execCommand('copy')</code> API не підтримує <strong>Safari</strong></p> -</div> - -<h2 id="Зчитування_буферу_обміну">Зчитування буферу обміну</h2> - -<p><code>execCommand()</code> дозволяє виконати <code>"paste"</code> команду, яка дозволяє вставити поточний контент в буфері обміну в область редагування. Ви можете отримати більшу гнучкість із Clipboard API's {{domxref("Clipboard.read()")}} та {{domxref("Clipboard.readText()")}} методами.</p> - -<h3 id="Використання_execCommand()_2">Використання execCommand()</h3> - -<p>По-перше, вам потрібен дозвіл <code>"clipboardRead"</code> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a> визначно до вашого додатку. Це обов'язвокі умови навіть якщо <code>"paste"</code> команда виконується в обробнику дій користувача такі як {{event("click")}} чи {{event("keypress")}}.</p> - -<p>Наприклад HTML такий як:</p> - -<pre class="brush: html"><textarea id="output"></textarea> -<button id="paste">Paste</button> -</pre> - -<p>Щоб вставити контент в {{HTMLElement("textarea")}} з ID <code>"output"</code> з буферу обміну коли користувач нажме на кнопку <code>"paste"</code> {{HTMLElement("button")}}, використовуйте код:</p> - -<pre class="brush: js">function paste() { - var pasteText = document.querySelector("#output"); - pasteText.focus(); - document.execCommand("paste"); - console.log(pasteText.textContent); -} - -document.querySelector("#paste").addEventListener("click", paste);</pre> - -<h3 id="Використання_Clipboard_API_2">Використання Clipboard API</h3> - -<p>Clipboard API's {{domxref("Clipboard.readText", "navigator.clipboard.readText()")}} та {{domxref("Clipboard.read", "navigator.clipboard.read()")}} методи дозволяють вам зчитувати текст чи бінарні данні з буферу обміну. Вона надає можливість зчитувати данні в буфері без вставки його в елемент редагування.</p> - -<p>Щойно ви отримали <code>"clipboard-read"</code> дозвіл з <a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a>, ви можете зчитати данні дуже легко:</p> - -<pre class="brush: js">navigator.clipboard.readText().then(clipText => - document.getElementById("outbox").innerText = clipText);</pre> - -<p>Цей код витягує текст з буферу та замінює контент елементу з ID <code>"outbox"</code>.</p> - -<h3 id="Browser-specific_considerations_2">Browser-specific considerations</h3> - -<p>Firefox підтримує <code>"clipboardRead"</code> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a> з версії 54, але личше підтримує вставку в елементи в <a href="/en-US/docs/Web/Guide/HTML/Editable_content">content editable mode</a>, які в контент скриптах лише працюють з {{HTMLElement("textarea")}}. Для фонових скриптів, будь який елемент може бути змінений в режим редагування контенту.</p> - -<h2 id="Дивись_також">Дивись також</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Clipboard_API">Clipboard API</a></li> - <li><a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a></li> - <li><a href="/en-US/docs/Web/Guide/HTML/Editable_content">Making content editable</a></li> - <li>{{htmlattrxref("contenteditable")}}</li> -</ul> |