ให้สิทธิ์เข้าถึงเดสก์ของ ChromeOS แบบเป็นโปรแกรมในหน้าเว็บ

1. ก่อนเริ่มต้น

เครื่องมือเชื่อมต่อเดสก์เป็นฟีเจอร์ของ ChromeOS ที่ช่วยให้หน้าเว็บเข้าถึงเดสก์เสมือนของ ChromeOS ได้โดยอัตโนมัติ ในโค้ดแล็บนี้ คุณจะได้เรียนรู้วิธีใช้ Desk Connector กับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

ข้อกำหนดเบื้องต้น

• ทำความเข้าใจเดสก์เสมือนของ ChromeOS

สิ่งที่คุณจะได้เรียนรู้

• วิธีตั้งค่าพร็อพเพอร์ตี้หน้าต่าง
• วิธีเปิดตัวเดสก์
• วิธีนำเดสก์ออก
• วิธีรับเดสก์ที่ใช้งานอยู่
• วิธีเปลี่ยนไปใช้เดสก์อื่น

สิ่งที่คุณต้องมี

• Chromebook
• ChromeOS เวอร์ชัน 113.* ขึ้นไป หากยังไม่มีเวอร์ชันดังกล่าวให้ใช้งาน ให้เปลี่ยนไปใช้ช่องเบต้า
• Google Chrome
• ส่วนขยายการสาธิต Desk Connector

2. ตั้งค่า

หากต้องการตั้งค่า ให้ทำตามขั้นตอนต่อไปนี้

1. คลิกขวาที่หน้าเว็บนี้ แล้วคลิกตรวจสอบ
2. คลิกคอนโซลในแผงเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome คุณเรียกใช้โค้ดทั้งหมดใน Codelab นี้ในแผงConsole
3. (ไม่บังคับ) คุณสามารถโต้ตอบกับเดสก์ท็อปเสมือนได้ด้วยตนเองตลอดทั้งโค้ดแล็บโดยกด F5 หรือ []|| เพื่อเข้าสู่โหมดภาพรวม

3. ตั้งค่าพร็อพเพอร์ตี้ของหน้าต่าง

SetWindowProperties API ช่วยให้หน้าเว็บตั้งค่าพร็อพเพอร์ตี้ของหน้าต่างแบบเป็นโปรแกรมได้ เมื่อตั้งค่าพร็อพเพอร์ตี้ allDesks เป็นค่า true ระบบจะปักหมุดหน้าต่างของแท็บปัจจุบันไปยังเดสก์ทั้งหมด

หากต้องการตั้งค่าพร็อพเพอร์ตี้ของหน้าต่าง ให้ทำตามขั้นตอนต่อไปนี้

1. ในแผงคอนโซล ให้ตั้งค่าหน้าต่างให้ปรากฏในเดสก์ทั้งหมดโดยทำดังนี้

chrome.runtime.sendMessage("oagemgapjncacjdaockjfaidedggjond", {
    "messageType": "SetWindowProperties",
    "operands": {
        "allDesks": true
    }
   },
  function(response) {
      console.log(response);
  }
);

การตอบกลับที่สำเร็จจะมีลักษณะดังนี้ {messageType: 'OperationSuccess', operands: Array(0)}

หากเห็นข้อผิดพลาดเช่น Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist ให้ตรวจสอบอีกครั้งว่าคุณได้ติดตั้งส่วนขยายการสาธิต Desk Connector แล้วหรือไม่

2. วิธีตั้งค่าให้หน้าต่างปรากฏในเดสก์เดียวอีกครั้ง

chrome.runtime.sendMessage("oagemgapjncacjdaockjfaidedggjond",{
    "messageType": "SetWindowProperties",
    "operands": {
        "allDesks": false
    }
   },
  function(response) {
     console.log(response);
  }
);

3. ปักหมุดหน้าต่างไปยังเดสก์ทั้งหมดอีกครั้งเพื่อให้สาธิตได้ง่ายขึ้น

chrome.runtime.sendMessage("oagemgapjncacjdaockjfaidedggjond", {
    "messageType": "SetWindowProperties",
    "operands": {
        "allDesks": true
    }
   },
  function(response) {
     console.log(response);
  }
);

หากมีเดสก์เสมือนมากกว่า 1 เดสก์ใน Chromebook ตอนนี้คุณจะเห็นหน้าต่างปัจจุบันในทุกเดสก์แล้ว

4. รับเดสก์ที่ใช้งานอยู่ในปัจจุบัน

GetActiveDesk API ช่วยให้หน้าเว็บค้นหาเดสก์ที่ใช้งานอยู่ในปัจจุบันโดยใช้โปรแกรมได้

• หากต้องการรับเดสก์ที่ใช้งานอยู่ในปัจจุบัน ให้ดึงข้อมูลรหัสเดสก์ปัจจุบันและจัดเก็บพร็อพเพอร์ตี้ deskUuid ในตัวแปร baseDesk

let baseDesk;
chrome.runtime.sendMessage("oagemgapjncacjdaockjfaidedggjond", {
    "messageType": "GetActiveDesk",
    },
   function(response) {
    console.log(response);
    if(response && response.operands) {
    baseDesk = response.operands.deskUuid; 
   }       
  }
);

5. เปิดเดสก์

LaunchDesk API ช่วยให้หน้าเว็บเปิดเดสก์ที่ว่างเปล่าและสลับไปใช้เดสก์นั้นได้แบบเป็นโปรแกรม

หากต้องการเปิดตัวเดสก์ ให้ทำตามขั้นตอนต่อไปนี้

1. เปิดเดสก์ชื่อ test
2. สร้างตัวแปร newDesk1 ที่จัดเก็บพร็อพเพอร์ตี้ deskUuid ของเดสก์

let newDesk1;                   
chrome.runtime.sendMessage(
    "oagemgapjncacjdaockjfaidedggjond", {
        "messageType": "LaunchDesk",
        "operands": {
            "deskName": "test"           
        }
    },
    function(response) {
     console.log(response);
     if(response&&response.operands) {
     newDesk1 = response.operands.deskUuid;   
    }  
   }
);

ระบบจะนำคุณไปยังเดสก์ที่เพิ่งเปิดตัวใหม่ หากหน้าต่างคอนโซลอยู่ในหน้าต่างของตัวเอง หน้าต่างคอนโซลจะอยู่ในเดสก์ท็อปเดิม คุณเปลี่ยนไปใช้เดสก์ท็อปเดิมได้โดยกดปุ่ม F5 หรือ []||

คุณมีเดสก์ได้สูงสุด 8 รายการในเวลาเดียวกัน หาก API แสดงข้อผิดพลาด DesksCountCheckFailedError คุณต้องนำโต๊ะออกบางส่วนก่อนจึงจะเปิดตัวโต๊ะเพิ่มเติมได้

6. นำเดสก์ออก

RemoveDesk API ช่วยให้หน้าเว็บนำเดสก์ออกได้โดยใช้โปรแกรมตามรหัสเดสก์ โดยสามารถปิดหน้าต่างทั้งหมดบนโต๊ะทำงานได้

เพื่อความสะดวก คุณจึงนำเดสก์ที่เพิ่งเปิดตัวออก อย่างไรก็ตาม ในทางปฏิบัติ เว็บเพจสามารถนำโต๊ะที่กำหนดออกได้โดยใช้รหัสโต๊ะ

หากต้องการนำโต๊ะออก ให้ทำตามขั้นตอนต่อไปนี้

1. วิธีนำเดสก์ที่เพิ่งเปิดตัวออก

chrome.runtime.sendMessage("oagemgapjncacjdaockjfaidedggjond", {
    "messageType": "RemoveDesk",
    "operands": {
        "deskId": newDesk1                        
    }
  },
  function(response) {
     console.log(response);
  }
);

2. ในกล่องโต้ตอบที่ขอให้คุณยืนยันหรือยกเลิกการนำออก ให้ยืนยันการนำโต๊ะออก หน้าต่างทั้งหมดบนเดสก์จะปิด

3. หากต้องการเรียกใช้ API เพื่อนำโต๊ะออกโดยไม่มีหน้าต่างยืนยัน ให้ใช้พารามิเตอร์ skipConfirmation ดังนี้

chrome.runtime.sendMessage("oagemgapjncacjdaockjfaidedggjond", {
    "messageType": "RemoveDesk",
    "operands": {
        "deskId": newDesk1,
        "skipConfirmation":true
   }
  },
  function(response) {
     console.log(response);
  }
);

7. เปลี่ยนไปใช้เดสก์อื่น

SwitchDesk API ช่วยให้หน้าเว็บเปลี่ยนไปใช้เดสก์ที่กำหนดได้โดยอัตโนมัติ

คุณสามารถเปิดเดสก์และเปลี่ยนไปใช้เดสก์ก่อนหน้าได้อย่างง่ายดาย อย่างไรก็ตาม ในทางปฏิบัติ เว็บเพจสามารถเปลี่ยนไปใช้เดสก์ท็อปที่กำหนดได้โดยใช้รหัสเดสก์ท็อป

หากต้องการเปลี่ยนไปใช้โต๊ะอื่น ให้ทำตามขั้นตอนต่อไปนี้

1. เปิดเดสก์

let newDesk1;                   
chrome.runtime.sendMessage(
    "oagemgapjncacjdaockjfaidedggjond", {
        "messageType": "LaunchDesk",
        "operands": {
            "deskName": "test"          
        }
    },
    function(response) {
     console.log(response);
     if(response && response.operands) {
     newDesk1 = response.operands.deskUuid;
    }     
   }
);

2. เปลี่ยนไปใช้เดสก์ก่อนหน้า

chrome.runtime.sendMessage("oagemgapjncacjdaockjfaidedggjond", {
    "messageType": "SwitchDesk",
    "operands": {
        "deskId": baseDesk                 
   }
  },
   function(response) {
       console.log(response); 
  }
);

8. ขอแสดงความยินดี

ยินดีด้วย คุณได้เรียนรู้วิธีให้สิทธิ์เข้าถึง ChromeOS Desk แบบเป็นโปรแกรมแก่หน้าเว็บด้วยส่วนขยาย Desk Connector Demo และเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

ดูข้อมูลเพิ่มเติม

• เอกสารประกอบเกี่ยวกับ Desk Connector API