Chrome Extension 螢幕擷取/畫面分享

目標

這篇來嘗試新增權限，讓外掛可以捕捉某個螢幕(多螢幕的情況)、某個視窗、或是某個頁籤的畫面。

準備工具

Chrome 瀏覽器(版本：87.0.4280.66)
文字編輯器 (我使用 VS Code，版本：1.42.0)

步驟

我們先建立一資料夾 extension-desktop-capture，當作我們的專案目錄。
新增一檔案 manifest.json，並輸入以下內容，這檔案主要是定義這個外掛的一些資訊，例如外掛名稱、描述、版本以及會用到的權限等。這邊我們使用了 desktopCapture 的權限，並限定本地啟動的網址可以連接。

{
  "name": "Sample - Desktop Capture",
  "description": "An extension to capture something.",
  "version": "0.1.0",
  "manifest_version": 2,
  "background": {
    "scripts": [
      "myscript.js"
    ],
    "persistent": false
  },
  "externally_connectable": {
    "matches": [
      "*://localhost/*",
      "*://127.0.0.1/*"
    ]
  },
  "permissions": [
    "desktopCapture"
  ]
}

新增一檔案 myscript.js，並輸入以下內容。

chrome.runtime.onMessageExternal.addListener(
  (message, sender, sendResponse) => {
    if (message == 'version') {
      sendResponse({
        type: 'success',
        version: '0.1.0'
      });
      return true;
    }
    const sources = message.sources;
    const tab = sender.tab;
    chrome.desktopCapture.chooseDesktopMedia(sources, tab, streamId => {
      if (!streamId) {
        sendResponse({
          type: 'error',
          message: '無法取得串流 ID'
        });
      } else {
        sendResponse({
          type: 'success',
          streamId: streamId
        });
      }
    });
    return true;
  }
);

透過【載入未封裝項目】安裝外掛，這邊先注意一下，安裝後我們可以得到一組外掛 ID。

外掛 ID

新增一檔案 index.html，並輸入以下內容，其中的 const EXTENSION_ID = 'egghpkfnbfnkaffpaaonelgolpdlhhlj'; 請置換成您自己的外掛 ID。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>本機螢幕擷取範例</title>
</head>

<body>
  <button id="btnStart" style="display:block">開始擷取</button>
  <button id="btnStop" style="display:none">停止擷取</button>

  <div>
    <div style="margin: 0px auto; width: 800px; text-align: center;">
      <h1>我的畫面</h1>
      <video autoplay id="screen" width="100%" style="border: 1px solid black;"></video>
    </div>
  </div>


  <script>
    (() => {
      const EXTENSION_ID = 'egghpkfnbfnkaffpaaonelgolpdlhhlj'; //這邊要換成您的外掛 ID

      chrome.runtime.sendMessage(EXTENSION_ID, 'version', response => {
        if (!response) {
          console.log('找不到外掛');
          return;
        }
        console.log('Extension version: ', response.version);
        const video = document.getElementById('screen');
        const btnStart = document.getElementById('btnStart');
        const btnStop = document.getElementById('btnStop');
        const request = { sources: ['window', 'screen', 'tab'] };
        let stream;

        btnStart.style.display = 'block';
        btnStart.addEventListener('click', event => {
          chrome.runtime.sendMessage(EXTENSION_ID, request, response => {
            if (response && response.type === 'success') {
              navigator.mediaDevices
                .getUserMedia({
                  video: {
                    mandatory: {
                      chromeMediaSource: 'desktop',
                      chromeMediaSourceId: response.streamId
                    }
                  }
                })
                .then(returnedStream => {
                  stream = returnedStream
                  video.srcObject = stream;
                  btnStart.style.display = 'none';
                  btnStop.style.display = 'block';
                })
                .catch(err => {
                  console.error('無法取得串流: ', err);
                });
            } else {
              console.error('無法取得串流');
            }
          });
        });

        btnStop.addEventListener('click', event => {
          stream.getTracks().forEach(track => track.stop());
          video.src = '';
          btnStop.style.display = 'none';
          btnStart.style.display = 'block';
        });
      });
    })();
  </script>
</body>

</html>