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

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

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

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

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

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

• วิธีตั้งค่าคุณสมบัติของหน้าต่าง
• วิธีเปิดเดสก์
• วิธีนำเดสก์ออก
• วิธีจัดหาเดสก์ที่ใช้งานอยู่
• วิธีเปลี่ยนไปใช้เดสก์อื่น

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

• Chromebook
• ChromeOS เวอร์ชัน 113.* ขึ้นไป หากคุณยังไม่มีเวอร์ชันนี้ ให้เปลี่ยนไปใช้เวอร์ชันเบต้า
• Google Chrome
• ส่วนขยายเดสเครื่องมือเชื่อมต่อเดสก์เดโม

2. ตั้งค่า

โปรดทำตามขั้นตอนต่อไปนี้เพื่อตั้งค่า

1. คลิกขวาที่หน้าเว็บนี้ แล้วคลิกตรวจสอบ
2. คลิกคอนโซลในแผงเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome คุณเรียกใช้โค้ดทั้งหมดใน Codelab นี้ในแผงคอนโซล
3. (ไม่บังคับ) คุณโต้ตอบกับเดสก์เสมือนด้วยตนเองได้ตลอดทั้ง Codelab โดยกด 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 Demo ไว้หรือไม่

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 และเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แล้ว

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

• เอกสารประกอบของ Desk Connector API