# 編寫第二個Chrome Extension+Copy URL+Title

摘要： 我們在上網時，常常需要把剛興趣的文章記錄下來，方便以後繼續細看。如果記錄為Markdown格式的話，還可以方便的把文章連結加入到自己創作的文章內。 今天編寫的小工具，就是一個Chrome Extension，當用戶在當前頁面上按快捷鍵Command+Shift+Y的時候，可以把當前頁面的標...

我們在上網時，常常需要把剛興趣的文章記錄下來，方便以後繼續細看。如果記錄為Markdown格式的話，還可以方便的把文章連結加入到自己創作的文章內。

今天編寫的小工具，就是一個Chrome Extension，當用戶在當前頁面上按快捷鍵Command+Shift+Y的時候，可以把當前頁面的標題和URL組合儲存到剪貼簿，如下形式：

[Title](URL)
複製程式碼

在閱讀此文之前，如果你沒有看過ofollow,noindex"># 編寫第一個Chrome Extension - 掘金 ，建議首先閱讀此文。

新增鍵盤快捷鍵的方法

Chrome提供了Command API，可以通過它來新增觸發Chrome Extension中操作的快捷鍵。可以在manifect.json內宣告如下:

{
"commands": {
"Run": {
"suggested_key": {
"default": "Ctrl+Shift+Y",
"mac": "Command+Shift+Y"
},
"description": "Toggle feature foo"
},
}
複製程式碼

這意味著在使用者按下指定按鈕（Ctrl+Shift+Y），會觸發一個叫做Run的操作。

在後臺頁面中，您可以通過onCommand.addListener將處理程式繫結到清單中定義的命令。 例如：

chrome.commands.onCommand.addListener(function(command) {
console.log('Command:', command);//Run
});
複製程式碼

拷貝到剪貼簿的方法

可以在你的background.html內新增一個textarea，用於拷貝到剪貼簿的中轉：

<textarea id="clipboard"></textarea>
複製程式碼

需要執行操作的時候，會把內容寫入此textarea，然後執行命令完成剪貼動作：

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()
 }
});
複製程式碼

總結

本文學習了Chrome Extension的鍵盤快捷鍵的宣告和響應的方法，更多的Chrome Extension API請看官方文件chrome.commands - Google Chrome