# 編寫第二個(gè)Chrome Extension+Copy URL+Title

rollback 發(fā)布于2019-08-23 13:52 / 2423人閱讀

摘要：添加鍵盤快捷鍵的方法提供了，可以通過它來添加觸發(fā)中操作的快捷鍵。可以在內(nèi)聲明如下這意味著在用戶按下指定按鈕，會(huì)觸發(fā)一個(gè)叫做的操作。在后臺(tái)頁面中，您可以通過將處理程序綁定到清單中定義的命令。

我們?cè)谏暇W(wǎng)時(shí)，常常需要把剛興趣的文章記錄下來，方便以后繼續(xù)細(xì)看。如果記錄為Markdown格式的話，還可以方便的把文章鏈接加入到自己創(chuàng)作的文章內(nèi)。

今天編寫的小工具，就是一個(gè)Chrome Extension，當(dāng)用戶在當(dāng)前頁面上按快捷鍵Command+Shift+Y的時(shí)候，可以把當(dāng)前頁面的標(biāo)題和URL組合保存到剪貼板，如下形式：

[Title](URL)

在閱讀此文之前，如果你沒有看過# 編寫第一個(gè)Chrome Extension - 掘金，建議首先閱讀此文。

添加鍵盤快捷鍵的方法

Chrome提供了Command API，可以通過它來添加觸發(fā)Chrome Extension中操作的快捷鍵。可以在manifect.json內(nèi)聲明如下:

{
    "commands": {
        "Run": {
            "suggested_key": {
              "default": "Ctrl+Shift+Y",
              "mac": "Command+Shift+Y"
        },
        "description": "Toggle feature foo"
    },
}

這意味著在用戶按下指定按鈕（Ctrl+Shift+Y），會(huì)觸發(fā)一個(gè)叫做Run的操作。

在后臺(tái)頁面中，您可以通過onCommand.addListener將處理程序綁定到清單中定義的命令。例如：

  chrome.commands.onCommand.addListener(function(command) {
    console.log("Command:", command);//Run
  });

拷貝到剪貼板的方法

可以在你的background.html內(nèi)添加一個(gè)textarea，用于拷貝到剪貼板的中轉(zhuǎn)：

需要執(zhí)行操作的時(shí)候，會(huì)把內(nèi)容寫入此textarea，然后執(zhí)行命令完成剪貼動(dòng)作：

document.execCommand("copy", false, null);

整合后的js代碼如下：

function copyTitleURL() {
  chrome.tabs.getSelected(null, function(tab) {
    copyToClipboard( "["+tab.title + "](" + tab.url +")");    
  });
}
function copyToClipboard(str) {
    var obj=document.getElementById("clipboard");
    if( obj ) {
        obj.value = str;
        obj.select();
        document.execCommand("copy", false, null);
    }
}
chrome.commands.onCommand.addListener(function(command) {
     if("Run" === command){
         copyTitleURL()
     }
});

總結(jié)

本文學(xué)習(xí)了Chrome Extension的鍵盤快捷鍵的聲明和響應(yīng)的方法，更多的Chrome Extension API請(qǐng)看官方文檔chrome.commands - Google Chrome