2

URL とタイトルを 1 つのハイパーリンクにフォーマットして、一度にリンクのグループ全体を保存したいことがよくあります。フォーマットされた URL とタイトルをコピーする chrome 拡張機能に取り組んでいます。

マニフェスト.json

{
  "name": "Copy Tabs",
  "version": "0.1",
  "description": "Creates a keyboard shortcut (Ctrl + Shift + C) which copies links for selected tabs",
  "permissions": [
    "tabs",
    "clipboardWrite",
    "clipboardRead"
  ],
  "background": {
    "persistent": false,
    "scripts": ["jquery.js","background.js"]
  },
  "commands": {
    "copy-tabs": {
      "suggested_key": { "default": "Ctrl+Shift+C" },
      "description": "Copy Selected Tab Links"
    }
  },
  "manifest_version": 2
}

background.js

chrome.commands.onCommand.addListener(function(command) {
  if (command == "copy-tabs") {
    // declare text element
    var text = "";

    // only look for highlighted tabs in the current window
    queryInfo = new Object();
    queryInfo.highlighted  = true;
    queryInfo.currentWindow  = true;

    // get tabs
    chrome.tabs.query(queryInfo, function(tabs) {
        // loop through tab results
        for (var i = 0; i < tabs.length; i++) {
            //add hyperlink to text
            text += "<a href='" + tabs[i].url + "'>" + tabs[i].title + "</a>";
        }
    });

    //copy text to clipboard
    copyTextToClipboard(text);
  }
});

copyTextToClipboard

// Copy provided text to the clipboard.
function copyTextToClipboard(text) {
    var copyFrom = $('<textarea/>');
    copyFrom.text(text);
    $('body').append(copyFrom);
    copyFrom.select();
    document.execCommand('copy');
    copyFrom.remove();
}

問題：

2 つの問題があります。タブのプロパティからリンクを作成すると、コピーは実際には機能しませんが、text = "<a href='www.google.com'>Google</a>";すべてが正常に機能することを手動で指定すると、. 開発者ツールでは、インライン ツール ヒントはテキストが適切に形成されているように見えますが、ローカル変数ウィンドウはテキスト変数がまだ として設定されているように見えます""。

インラインウォッチ スコープ変数

第二に、貼り付けると、適切な書式設定が得られません。

次のようになります。

  • <a href='www.google.com'>Google</a>

しかし、私が欲しいのはこれです:

4

1 に答える 1

2

2つの問題について：

  1. chrome.tabs.query非同期です。これを理解していない場合は、この同様の質問を読んでください。copyTextToClipboard(text);解決策は、 のコールバック内に移動することですchrome.tabs.query。

  2. execCommand('copy')テキストエリアで実行しています。その結果、プレーン テキストのみがクリップボードにコピーされます。
    HTML 入力が信頼できるものであると仮定すると、次のコードを使用してカスタム リッチ テキストをクリップボードにコピーできます。

    function copyTextToClipboard(html) {
    var tmpNode = document.createElement('div');
    tmpNode.innerHTML = html;
    document.body.appendChild(tmpNode);

    // Back up previous selection
    var selection = window.getSelection();
    var backupRange;
    if (selection.rangeCount) {
        backupRange = selection.getRangeAt(0).cloneRange();
    }

    // Copy the contents
    var copyFrom = document.createRange();
    copyFrom.selectNodeContents(tmpNode)
    selection.removeAllRanges();
    selection.addRange(copyFrom);
    document.execCommand('copy');

    // Clean-up
    tmpNode.parentNode.removeChild(tmpNode);

    // Restore selection
    selection = window.getSelection();
    selection.removeAllRanges();
    if (backupRange) {
        selection.addRange(backupRange);
    }
}
于 2013-07-14T22:24:51.170 に答える