Hi Dai Gei Ho~ 我是Winnie ~

在此篇文章中，我們要來實作 Chrome Extension 畫面分享功能。

取得 desktopCapture 權限

一開始，與往常一樣我們需在Manifest.json 中先取得功能權限。
因為是要使用擷取螢幕相關API，所以需在 Permission 中 宣告 desktopCapture。

// manifest.json

{
    ...略
    "externally_connectable": {
        "matches": ["*://localhost/*"]
    },
    "permissions" : ["desktopCapture"]
}

同時，這邊宣告"externally_connectable" 主要目的為

當分享螢幕畫面時，我們需觸發 享螢幕畫面視窗 向使用者 詢問權限，所以透過externally_connectable宣告，Extension 可以從被宣告的 URL 網頁來接收消息，同時觸發 享螢幕畫面詢問視窗。

開啟 共享螢幕畫面詢問視窗

當開啟權限desktopCapture後，我們需在Background背後腳本監聽onMessageExternal 外部網頁傳來的訊息。

這邊注意，由於 onMessage 為同步執行，如需使用非同步方法，需在function 最後 return true來可使用。

更多說明 -> Day 15 Message Passing跨Extension間的傳遞

//background.js

chrome.runtime.onMessageExternal.addListener((msg, sender, sendResponse) => {

  const sources = msg.text; // 訊息
  const tab = sender.tab; // 傳遞者
  
  return true;
});

當訊息監聽被觸發時，我們即可以使用 chrome.desktopCapture.chooseDesktopMedia方法，向使用者彈出 共享螢幕畫面的選擇視窗。

當 chrome.desktopCapture.chooseDesktopMedia 最終回傳值 streamId，我們可以透過他來判斷 使用者是否給予權限訪問螢幕畫面，最後再透過 sendResponse()通知頁面授權結果

//background.js

  ...略
  
  const sources = msg.text; // 訊息
  const tab = sender.tab; // 傳遞者
  
  chrome.desktopCapture.chooseDesktopMedia(sources, tab, (streamId) => {
  
     if (!streamId) {
      sendResponse({
        type: 'error',
        message: 'Failed to get stream ID'
      });
    } else {
      sendResponse({
        type: 'Success',
        streamId: streamId
      });
    }
  });
  
  return true;
});

這樣關於 Chrome Extension 端的 desktopCapture 功能邏輯就大致完成了。

接著我們就可以 先把當前 開發一半的 Extension 上傳至擴充套件管理頁面中，並取得當前 Extension ID 先備著。

但但但...別誤會還沒完成喔!!（因為現在打開應該什麼都沒有

因為在 螢幕畫面分享 實作過程中使用到的相關方法較多一點且比較雜一點，為了可以清楚知道兩邊運作流程，因此拆分Extension 及 網頁端 運作上下篇 來說明。

所以在下篇文章中 我們將針對在 外部網頁中處理螢幕分享的資料 來進行實作。

那今天文章先到這邊了，謝謝願意花時間看此篇文章的你，如果文章有錯誤的地方，再麻煩不吝嗇的給予指教，感謝!!

今日分享 -> 孫燕姿 - 天黑黑