Memberikan akses terprogram ke halaman ChromeOS ke Desktop

1. Sebelum memulai

Desk Connector adalah fitur ChromeOS yang memungkinkan halaman web mengakses desktop virtual ChromeOS secara terprogram. Dalam codelab ini, Anda akan mempelajari cara menggunakan Desk Connector dengan Chrome DevTools.

Prasyarat

Yang akan Anda pelajari

  • Cara menetapkan properti jendela.
  • Cara meluncurkan desktop.
  • Cara menghapus desktop.
  • Cara mendapatkan desktop aktif.
  • Cara beralih ke desktop lain.

Yang akan Anda butuhkan

2. Memulai persiapan

Untuk melakukan persiapan, ikuti langkah-langkah berikut:

  1. Klik kanan halaman web ini dan klik Periksa.
  2. Di panel Chrome DevTools, klik Konsol. Anda menjalankan semua kode di codelab ini di panel Konsol.
  3. (Opsional) Anda dapat berinteraksi dengan desktop virtual secara manual di seluruh codelab dengan menekan F3 atau []|| untuk masuk ke mode ringkasan.

7a5398f02e46d103.png

3. Menetapkan properti jendela

SetWindowProperties API memungkinkan halaman web menetapkan properti jendelanya secara terprogram. Saat Anda menetapkan properti allDesks ke nilai true, properti tersebut akan menyematkan jendela tab saat ini ke semua desktop.

Untuk menyetel properti jendela, ikuti langkah-langkah berikut:

  1. Di panel Konsol, setel jendela agar muncul di semua desktop:
chrome.runtime.sendMessage("oagemgapjncacjdaockjfaidedggjond", {
    "messageType": "SetWindowProperties",
    "operands": {
        "allDesks": true
    }
   },
  function(response) {
      console.log(response);
  }
);
  1. Tetapkan jendela agar muncul lagi di satu desktop:
chrome.runtime.sendMessage("oagemgapjncacjdaockjfaidedggjond",{
    "messageType": "SetWindowProperties",
    "operands": {
        "allDesks": false
    }
   },
  function(response) {
     console.log(response);
  }
);
  1. Sematkan jendela ke semua desktop lagi untuk demonstrasi yang lebih mudah:
chrome.runtime.sendMessage("oagemgapjncacjdaockjfaidedggjond", {
    "messageType": "SetWindowProperties",
    "operands": {
        "allDesks": true
    }
   },
  function(response) {
     console.log(response);
  }
);

Jika Anda memiliki lebih dari satu desktop virtual di Chromebook, kini Anda dapat melihat jendela saat ini di semua desktop.

4. Mendapatkan desktop aktif saat ini

GetActiveDesk API memungkinkan halaman web mengkueri desktop aktif saat ini secara terprogram.

  • Untuk mendapatkan desktop aktif saat ini, ambil ID desktop saat ini, dan simpan properti deskUuid dalam variabel baseDesk:
let baseDesk;
chrome.runtime.sendMessage("oagemgapjncacjdaockjfaidedggjond", {
    "messageType": "GetActiveDesk",
    },
   function(response) {
    console.log(response);
    if(response && response.operands) {
    baseDesk = response.operands.deskUuid;
   }
  }
);

5. Meluncurkan desktop virtual

LaunchDesk API memungkinkan halaman web meluncurkan desktop kosong secara terprogram dan beralih ke halaman tersebut.

Untuk meluncurkan desktop virtual, ikuti langkah-langkah berikut:

  1. Luncurkan desktop bernama test.
  2. Buat variabel newDesk1 yang menyimpan properti deskUuid desktop.
let newDesk1;
chrome.runtime.sendMessage(
    "oagemgapjncacjdaockjfaidedggjond", {
        "messageType": "LaunchDesk",
        "operands": {
            "deskName": "test"
        }
    },
    function(response) {
     console.log(response);
     if(response&&response.operands) {
     newDesk1 = response.operands.deskUuid;
    }
   }
);

Anda akan diarahkan ke desktop virtual yang baru diluncurkan. Anda dapat memiliki maksimal delapan desktop sekaligus. Jika API menampilkan error DesksCountCheckFailedError, Anda harus menghapus beberapa desktop sebelum meluncurkan error lainnya.

6. Menghapus desktop

API RemoveDesk memungkinkan halaman web menghapus desktop secara terprogram berdasarkan ID desktopnya. Aplikasi dapat menutup semua jendela di desktop.

Untuk memudahkan, hapus desktop yang baru diluncurkan. Namun, dalam praktiknya, halaman web dapat menghapus desktop yang ditetapkan dengan ID desktopnya.

Untuk menghapus desktop, ikuti langkah-langkah berikut:

  1. Hapus desktop virtual yang baru diluncurkan:
chrome.runtime.sendMessage("oagemgapjncacjdaockjfaidedggjond", {
    "messageType": "RemoveDesk",
    "operands": {
        "deskId": newDesk1
    }
  },
  function(response) {
     console.log(response);
  }
);
  1. Pada dialog yang meminta Anda mengonfirmasi atau mengabaikan penghapusan, konfirmasi penghapusan desktop. Semua jendela di meja ditutup.

Notifikasi Tutup semua jendela ChromeOS

  1. Jika Anda ingin memanggil API untuk menghapus desktop tanpa jendela konfirmasi, gunakan parameter skipConfirmation:
chrome.runtime.sendMessage("oagemgapjncacjdaockjfaidedggjond", {
    "messageType": "RemoveDesk",
    "operands": {
        "deskId": newDesk1,
        "skipConfirmation":true
   }
  },
  function(response) {
     console.log(response);
  }
);

7. Beralih ke desktop lain

SwitchDesk API memungkinkan halaman web beralih secara terprogram ke desktop yang ditunjuk.

Untuk mempermudah, Anda meluncurkan desktop virtual, dan beralih ke desktop sebelumnya. Namun, dalam praktiknya, halaman web dapat beralih ke desktop mana pun yang ditunjuk berdasarkan ID desktopnya.

Untuk beralih ke desktop virtual lain, ikuti langkah-langkah berikut:

  1. Meluncurkan desktop virtual:
let newDesk1;
chrome.runtime.sendMessage(
    "oagemgapjncacjdaockjfaidedggjond", {
        "messageType": "LaunchDesk",
        "operands": {
            "deskName": "test"
        }
    },
    function(response) {
     console.log(response);
     if(response && response.operands) {
     newDesk1 = response.operands.deskUuid;
    }
   }
);
  1. Beralih ke desktop sebelumnya:
chrome.runtime.sendMessage("oagemgapjncacjdaockjfaidedggjond", {
    "messageType": "SwitchDesk",
    "operands": {
        "deskId": baseDesk
   }
  },
   function(response) {
       console.log(response);
  }
);

8. Selamat

Selamat! Anda telah mempelajari cara memberikan akses terprogram ke halaman web ke Desktop Desk dengan ekstensi Demo Desk Connector dan Chrome DevTools.

Mempelajari lebih lanjut