Hi Dai Gei Ho~ 我是Winnie ~

在剩下來幾篇文章中，我們將進入Chrome Extension 小功能實作篇

不知道大家平時會不會有一個情境，滑著滑著網頁，突然看到一句金句，卻想不起是哪一部電影，然後就像下圖一樣，經過好幾步驟把文字複製起來，再到Youtube 搜尋。

是不是有一點麻煩？嘿，為了讓大家能多喝一杯多多，

所以在此章節將會介紹如何使用 Chrome Extension 的 右鍵選單直接在Youtube搜尋影片。

宣告權限

一開始，要使用右鍵選單時，我們需在Mamifest 中宣告contextMenus 、 tabs相關權限

// manifest.json

{
    ...略
    "permissions" : [
        "contextMenus",
        "tabs"
    ]
}

創建右鍵選單

接著，我們可以在 Chrome Extension 中的 Background.js背後腳本中使用 chrome.contextMenus.create 創建選單。

//background.js
let contextMenuOption = {
    "type": "normal",
    "id" : "youtube_search",
    "title" : "Youtube 搜尋: %s",
    "contexts" : ["selection"] 
};

chrome.contextMenus.create(contextMenuOption);

在 contextMenus 中的 常見設定選項中，我們可以設置:

• type 為選單的格式 ，主要有normal、checkbox、radio 、separator(分割線) 4項類型可以依需求選擇
• id 為每一個Extension中為唯一值。
• title 為顯示的文字，透過使用%S 可以取得右鍵所選取的文字
• 而 contexts 可以帶入不同啟動器 ，像是 all、selection、image、video等

然後我們將Extension上傳至擴充套件管理頁測試時，我們可以在頁面中透過右鍵選取『大俠愛吃漢堡包』文字，此時在選單中就會出現我們創建 的『Youtube 搜尋: 大俠愛吃漢堡包』選單(如下圖)。

接著，我們透過 contextMenus.onClicked來監聽選單被點擊的事件，透過事件回傳的資訊id來判斷當前被點擊的選單是否為 "youtube_search"，

如果是就取得selectionText的內容文字。

//background.js
chrome.contextMenus.onClicked.addListener( (info)=>{
     if(info.menuItemId==="youtube_search"){
        let selectionTxt = info.selectionText;
    }
});

搜尋 Youtube

當取得所選文字之後，最後一步驟 我們要來搜尋Youtube影片了

先讓我們來觀察 youtube 搜尋網址規則:

https://www.youtube.com/results?search_query={關鍵字}

由上可知，我們可以透過再網址最後的 search_query 加上 所選取的文字，即可達到 右鍵搜尋 Youtube影片了。

//background.js

   ...略
   
   let selectionTxt = info.selectionText;
   let youtubeUrl = `https://www.youtube.com/results?search_query=${selectionTxt}`
   
  chrome.tabs.create({ url: youtubeUrl });

最後我們可以透過 chrome.tabs.create()另開Youtube頁面，即可完成右鍵搜尋功能了。

示意如下圖:

是不是很方便RRR!!

以上就是關於 透過右鍵選取文字搜尋Youtube影片的實作介紹，那今天文章先到這邊了，謝謝願意花時間看此篇文章的你，如果文章有錯誤的地方，再麻煩不吝嗇的給予指教，感謝!!

剩下沒幾天，每天都是裸寫一篇
好緊張RRR

今日推薦 -> 溫柔