Копировать выделенный текст с помощью опции контекстного меню в расширении Chrome

Question

Я пытаюсь создать пункт контекстного меню, который копирует некоторый текст в системный буфер обмена.

В настоящее время я просто копирую жестко закодированный строковый литерал, но мне интересно, как его можно изменить, чтобы скопировать выделенный текст. В частности, я не знаю, как правильно создать createProperties объект (см. внизу)

Насколько я понимаю, это можно сделать только через фоновую страницу.

У меня есть следующая фоновая страница:

background.html

<textarea id="temp"></textarea>
<script src="context.js"></script>

---

context.js как следует:

chrome.contextMenus.create({
    "title": "Freedom",
    "contexts": ["editable"],
    "onclick" : copyToClipboard
  });        

function copyToClipboard()
{ 
    var tempNode = document.getElementById("temp");
    tempNode.value = "some text";
    tempNode.select();
    var status = document.execCommand('copy',false,null);

    if(status) alert('successful');

    else alert('unsuccessful');
}    

---

мой manifest.json как следует:

{
    "manifest_version": 2,

    "name": "Freedom",
    "description": "Provides users useful and fun context menu options that they can access from anywhere.",
    "version": "1.0",

    "permissions": [
        "contextMenus",
        "clipboardWrite"
        ],  

    "background": {
        "page": "background.html"
    }   

}    

---

Я, очевидно, неправильно объявляю функцию chrome.contextMenus.create(). Я прочитал документы для этого, и я могу только представить, что я не создаю должным образом createProperties объект.

Я пытался подражать этим источникам:

Можно ли вызвать метод сценария содержимого по пункту контекстного меню в расширении Chrome?

http://paul.kinlan.me/chrome-extension-adding-context-menus/

некоторые другие связанные вопросы:

Копировать в буфер обмена в расширении Chrome

Как скопировать текст в буфер обмена с расширением Google Chrome?

Answer 1

"createProperties" в документации - это словарь, который передается chrome.contextMenus.create метод (т. е. вещь с "заголовком", "контекстами" и т. д.)

onclick описание события chrome.contextMenus.create утверждает, что функция получает два параметра. Первый параметр ("информация") - это словарь с информацией о выделенном тексте. Второй параметр ("вкладка") содержит информацию о вкладке (в вашем случае вам это не нужно).
Словарь "info" имеет свойство "selectionText", которое содержит выделенный текст при нажатии на элемент контекстного меню. Это может быть использовано в вашем коде следующим образом:

function copyToClipboard(info) {
    var tempNode = document.getElementById("temp");
    tempNode.value = info.selectionText; // <-- Selected text
    tempNode.select();
    document.execCommand('copy', false, null);
}

Это решило бы ваш непосредственный вопрос.
Кроме того, ваше расширение можно улучшить, преобразовав фоновую страницу в страницу событий. Основное преимущество страниц событий перед фоновыми страницами состоит в том, что ваше расширение не будет без необходимости использовать память, оставаясь без дела в фоновом режиме.

// background.js

// Register context menu
chrome.runtime.onInstalled.addListener(function() {
    chrome.contextMenus.create({
        "id": "some id",  // Required for event pages
        "title": "Copy selected text to clipboard",
        "contexts": ["editable"],
        // "onclick" : ...  // Removed in favor of chrome.contextMenus.onClicked
    });

});

// Register a contextmenu click handler.
chrome.contextMenus.onClicked.addListener(copyToClipboard);

Вот минимальный манифест.json (обратите внимание на "persistent": false ключ, который указывает, что вы хотите использовать страницу события)

{
    "manifest_version": 2,

    "name": "Copy selected text to clipboard",
    "version": "1.0",

    "permissions": [
        "contextMenus",
        "clipboardWrite"
     ],

    "background": {
        "page": "background.html",
        "persistent": false
    }
}