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

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

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

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

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

[Title](URL)

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

添加鍵盤快捷鍵的方法

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

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

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

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

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

拷貝到剪貼板的方法

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

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

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é)

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

GPU云服務器云服務器 chrome-extension 第二個網(wǎng)站第二個域名備案第二個網(wǎng)站端口

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/99714.html

# 編寫第一個Chrome Extension

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

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

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

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

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

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

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

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

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

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