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

rollback 發布于2019-08-23 13:52 / 2431人閱讀

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

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

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

[Title](URL)

在閱讀此文之前，如果你沒有看過# 編寫第一個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，然后執行命令完成剪貼動作：

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99714.html

# 編寫第一個Chrome Extension

摘要：可以加載到內，通過操縱瀏覽器，從而完成一些定制的工作。一個最低需求的文件是必要的可選的圖標等。如果這樣驗證都是如期望的話，就表明你的第一個擴展已經開發成功。正式發布可以在內發布擴展，只要點擊進入后，按照操作指示即可。 Chrome Extension可以加載到Chrome內，通過操縱Chrome瀏覽器，從而完成一些定制的工作。假設你想要一個功能，它可以在你點擊上下文菜單項目時剪貼當前...

joyqi 2019-08-23 13:50 評論0 收藏0
Chrome 擴展開發——編寫一個自己的瀏覽器插件

摘要：配置文件每一個擴展都有一個格式的文件，叫。此消息發送后會觸發擴展內每個頁面的事件。和持續長時間的保持會話需要在和擴展建立一個長時間存在的通道。內容腳本發送消息到擴展程序建立通道，并給通道命名利用通道發送一條消息。這次的練習是做一個Chrome的擴展，分享一下入門開發過程。因為在消息傳遞那塊糾結了特別久，所以我會重點總結消息傳遞那塊。這次做這個插件的功能很簡單，就是點擊按鈕后可以對當...

SunZhaopeng 2019-08-20 11:09 評論0 收藏0
【Chrome擴展開發】定制HTTP請求響應頭域

摘要：關于我的博客掘金專欄路易斯專欄原文鏈接擴展開發定制請求響應頭域本文共字，閱讀需分鐘。那么，我會放棄嗎反向代理顯然不會，既然問題出在上，我去掉就行了。然而無論多少次的學習和模仿，最終的目的還是為了使用，故開發一款定制請求的勢在必行。本文首發于《程序員》雜志2017年第9、10、11期，下面的版本又經過進一步的修訂。關于 Github：IHeader 我的博客：louis blog ...

MadPecker 2019-08-21 17:38 評論0 收藏0
編寫爬蟲的一些感想（就是高興）

摘要：如果有人有興趣的話，可以編寫則個下面，我會說明在編寫爬蟲過程中的所思所想。文章讀取完畢最后，還要再編寫一個語句，判斷是運行還是導入。文章結束前的一些話嗯，本文到這里就結束了。今天，根據網頁的結構，嘗試了下如何抓取煎蛋首頁上的文章。目標很簡單：根據首頁上面的文章鏈接，載入文章，而后將文章的標題和正文（不帶圖片）抓取下來。抓取首頁上面文章的鏈接，標題，作者和所屬標簽。按標題將文章...

inapt 2019-07-24 18:26 評論0 收藏0
實現一個簡單的chrome插件

摘要：小結本文只是簡單分享了如何開發一個簡單的谷歌瀏覽器插件，以及一些注意事項，并且提到了如何授權和使用谷歌插件，重點介紹了插件開發必備的入口文件和插件中幾個重要環境以及環境之間的通信。我們在上網的時候，都會用到瀏覽器，但是瀏覽器并非擁有我們想要的所有功能，我們可以根據自己的需要，實現自己的插件來滿足需求。比如網頁中經常會有大量的廣告，如果你希望擁有一個純凈的網頁，可以實現一個插件來刪除網...

rubyshen 2019-08-23 13:58 評論0 收藏0