chrome.app.window

Mô tả

Sử dụng API chrome.app.window để tạo cửa sổ. Cửa sổ có khung không bắt buộc với thanh tiêu đề và các nút điều khiển kích thước. Các quy trình này không liên kết với bất kỳ cửa sổ trình duyệt Chrome nào. Hãy xem Mẫu trạng thái cửa sổ để biết thông tin minh hoạ về các tuỳ chọn này.

Loại

AppWindow

Thuộc tính

  • contentWindow

    Cửa sổ

    Đối tượng "window" JavaScript cho phần tử con đã tạo.

  • id

    chuỗi

    Mã nhận dạng mà cửa sổ được tạo.

  • innerBounds

    Ranh giới

    Vị trí, kích thước và các quy tắc ràng buộc của nội dung trong cửa sổ, không bao gồm các thành phần trang trí cửa sổ. Thuộc tính này là thuộc tính mới trong Chrome 36.

  • outerBounds

    Ranh giới

    Vị trí, kích thước và các quy tắc ràng buộc của cửa sổ, bao gồm cả các thành phần trang trí cửa sổ, chẳng hạn như thanh tiêu đề và khung. Thuộc tính này là thuộc tính mới trong Chrome 36.

  • clearAttention

    void

    Xoá tiêu điểm khỏi cửa sổ.

    Hàm clearAttention có dạng như sau: 

    () => {...}

  • đóng

    void

    Đóng cửa sổ.

    Hàm close có dạng như sau: 

    () => {...}

  • drawAttention

    void

    Thu hút sự chú ý vào cửa sổ.

    Hàm drawAttention có dạng như sau: 

    () => {...}

  • tiêu điểm

    void

    Lấy tiêu điểm vào cửa sổ.

    Hàm focus có dạng như sau: 

    () => {...}

  • toàn màn hình

    void

    Chuyển cửa sổ sang chế độ toàn màn hình.

    Người dùng có thể khôi phục cửa sổ bằng cách nhấn phím ESC. Ứng dụng có thể ngăn việc thoát khỏi trạng thái toàn màn hình khi người dùng nhấn phím ESC bằng cách yêu cầu quyền app.window.fullscreen.overrideEsc và huỷ sự kiện bằng cách gọi .preventDefault() trong trình xử lý keydown và keyup, như sau:

    window.onkeydown = window.onkeyup = function(e) { if (e.keyCode == 27 /* ESC *\/) { e.preventDefault(); } };

    Lưu ý: window.fullscreen() sẽ khiến toàn bộ cửa sổ chuyển sang chế độ toàn màn hình và không yêu cầu cử chỉ của người dùng. Bạn cũng có thể sử dụng API toàn màn hình HTML5 để chuyển sang chế độ toàn màn hình (xem API web để biết thêm thông tin chi tiết).

    Hàm fullscreen có dạng như sau: 

    () => {...}

  • getBounds

    void

    Không dùng nữa

    Sử dụng innerBounds hoặc outerBounds.

    Lấy ranh giới bên trong của cửa sổ dưới dạng đối tượng ContentBounds.

    Hàm getBounds có dạng như sau: 

    () => {...}

  • ẩn

    void

    Ẩn cửa sổ. Không làm gì nếu cửa sổ đã bị ẩn.

    Hàm hide có dạng như sau: 

    () => {...}

  • isAlwaysOnTop

    void

    Cửa sổ có luôn ở trên cùng không?

    Hàm isAlwaysOnTop có dạng như sau: 

    () => {...}

    • returns

      boolean

  • isFullscreen

    void

    Cửa sổ có ở chế độ toàn màn hình không? Điều này sẽ đúng nếu cửa sổ được tạo ở chế độ toàn màn hình hoặc được chuyển sang chế độ toàn màn hình thông qua API toàn màn hình AppWindow hoặc HTML5.

    Hàm isFullscreen có dạng như sau: 

    () => {...}

    • returns

      boolean

  • isMaximized

    void

    Cửa sổ có được phóng to không?

    Hàm isMaximized có dạng như sau: 

    () => {...}

    • returns

      boolean

  • isMinimized

    void

    Cửa sổ có bị thu nhỏ không?

    Hàm isMinimized có dạng như sau: 

    () => {...}

    • returns

      boolean

  • phóng to

    void

    Phóng to cửa sổ.

    Hàm maximize có dạng như sau: 

    () => {...}

  • thu nhỏ

    void

    Thu nhỏ cửa sổ.

    Hàm minimize có dạng như sau: 

    () => {...}

  • moveTo

    void

    Không dùng nữa kể từ Chrome 43

    Sử dụng outerBounds.

    Di chuyển cửa sổ đến vị trí (left, top).

    Hàm moveTo có dạng như sau: 

    (left: number, top: number) => {...}

    • trái

      số

    • trên cùng

      số

  • resizeTo

    void

    Không dùng nữa kể từ Chrome 43

    Sử dụng outerBounds.

    Đổi kích thước cửa sổ thành widthxheight pixel.

    Hàm resizeTo có dạng như sau: 

    (width: number, height: number) => {...}

    • chiều rộng

      số

    • chiều cao

      số

  • khôi phục

    void

    Khôi phục cửa sổ, thoát khỏi trạng thái phóng to, thu nhỏ hoặc toàn màn hình.

    Hàm restore có dạng như sau: 

    () => {...}

  • setAlwaysOnTop

    void

    Đặt xem cửa sổ có nên ở trên hầu hết các cửa sổ khác hay không. Yêu cầu quyền alwaysOnTopWindows.

    Hàm setAlwaysOnTop có dạng như sau: 

    (alwaysOnTop: boolean) => {...}

    • alwaysOnTop

      boolean

  • setBounds

    void

    Không dùng nữa

    Sử dụng innerBounds hoặc outerBounds.

    Đặt ranh giới bên trong của cửa sổ.

    Hàm setBounds có dạng như sau: 

    (bounds: ContentBounds) => {...}

  • setVisibleOnAllWorkspaces

    void

    Đặt xem cửa sổ có hiển thị trên tất cả không gian làm việc hay không. (Chỉ dành cho những nền tảng hỗ trợ tính năng này).

    Hàm setVisibleOnAllWorkspaces có dạng như sau: 

    (alwaysVisible: boolean) => {...}

    • alwaysVisible

      boolean

  • hiện (lên)/cho thấy

    void

    Hiện cửa sổ. Không làm gì nếu cửa sổ đã hiển thị. Tập trung vào cửa sổ nếu focused được đặt thành true hoặc bị bỏ qua.

    Hàm show có dạng như sau: 

    (focused?: boolean) => {...}

    • tập trung

      boolean không bắt buộc

Bounds

Thuộc tính

  • chiều cao

    số

    Bạn có thể dùng thuộc tính này để đọc hoặc ghi chiều cao hiện tại của nội dung hoặc cửa sổ.

  • trái

    số

    Bạn có thể dùng thuộc tính này để đọc hoặc ghi toạ độ X hiện tại của nội dung hoặc cửa sổ.

  • maxHeight

    number không bắt buộc

    Bạn có thể dùng thuộc tính này để đọc hoặc ghi chiều cao tối đa hiện tại của nội dung hoặc cửa sổ. Giá trị null cho biết "không xác định".

  • maxWidth

    number không bắt buộc

    Bạn có thể dùng thuộc tính này để đọc hoặc ghi chiều rộng tối đa hiện tại của nội dung hoặc cửa sổ. Giá trị null cho biết "không xác định".

  • minHeight

    number không bắt buộc

    Bạn có thể dùng thuộc tính này để đọc hoặc ghi chiều cao tối thiểu hiện tại của nội dung hoặc cửa sổ. Giá trị null cho biết "không xác định".

  • minWidth

    number không bắt buộc

    Bạn có thể dùng thuộc tính này để đọc hoặc ghi chiều rộng tối thiểu hiện tại của nội dung hoặc cửa sổ. Giá trị null cho biết "không xác định".

  • trên cùng

    số

    Bạn có thể dùng thuộc tính này để đọc hoặc ghi toạ độ Y hiện tại của nội dung hoặc cửa sổ.

  • chiều rộng

    số

    Bạn có thể dùng thuộc tính này để đọc hoặc ghi chiều rộng hiện tại của nội dung hoặc cửa sổ.

  • setMaximumSize

    void

    Đặt giới hạn kích thước tối đa của nội dung hoặc cửa sổ. Bạn có thể đặt chiều rộng hoặc chiều cao tối đa thành null để xoá quy tắc ràng buộc. Giá trị undefined sẽ giữ nguyên một quy tắc ràng buộc.

    Hàm setMaximumSize có dạng như sau: 

    (maxWidth: number, maxHeight: number) => {...}

    • maxWidth

      số

    • maxHeight

      số

  • setMinimumSize

    void

    Đặt các quy tắc ràng buộc về kích thước tối thiểu của nội dung hoặc cửa sổ. Bạn có thể đặt chiều rộng hoặc chiều cao tối thiểu thành null để xoá quy tắc ràng buộc. Giá trị undefined sẽ giữ nguyên một quy tắc ràng buộc.

    Hàm setMinimumSize có dạng như sau: 

    (minWidth: number, minHeight: number) => {...}

    • minWidth

      số

    • minHeight

      số

  • setPosition

    void

    Đặt vị trí bên trái và trên cùng của nội dung hoặc cửa sổ.

    Hàm setPosition có dạng như sau: 

    (left: number, top: number) => {...}

    • trái

      số

    • trên cùng

      số

  • setSize

    void

    Đặt chiều rộng và chiều cao của nội dung hoặc cửa sổ.

    Hàm setSize có dạng như sau: 

    (width: number, height: number) => {...}

    • chiều rộng

      số

    • chiều cao

      số

BoundsSpecification

Thuộc tính

  • chiều cao

    number không bắt buộc

    Chiều cao của nội dung hoặc cửa sổ.

  • trái

    number không bắt buộc

    Toạ độ X của nội dung hoặc cửa sổ.

  • maxHeight

    number không bắt buộc

    Chiều cao tối đa của nội dung hoặc cửa sổ.

  • maxWidth

    number không bắt buộc

    Chiều rộng tối đa của nội dung hoặc cửa sổ.

  • minHeight

    number không bắt buộc

    Chiều cao tối thiểu của nội dung hoặc cửa sổ.

  • minWidth

    number không bắt buộc

    Chiều rộng tối thiểu của nội dung hoặc cửa sổ.

  • trên cùng

    number không bắt buộc

    Toạ độ Y của nội dung hoặc cửa sổ.

  • chiều rộng

    number không bắt buộc

    Chiều rộng của nội dung hoặc cửa sổ.

ContentBounds

Thuộc tính

  • chiều cao

    number không bắt buộc

  • trái

    number không bắt buộc

  • trên cùng

    number không bắt buộc

  • chiều rộng

    number không bắt buộc

CreateWindowOptions

Thuộc tính

  • alwaysOnTop

    boolean không bắt buộc

    Nếu đúng, cửa sổ sẽ nằm trên hầu hết các cửa sổ khác. Nếu có nhiều cửa sổ thuộc loại này, thì cửa sổ đang được lấy tiêu điểm sẽ ở nền trước. Yêu cầu quyền alwaysOnTopWindows. Giá trị mặc định là false.

    Gọi setAlwaysOnTop() trên cửa sổ để thay đổi thuộc tính này sau khi tạo.

  • ranh giới

    ContentBounds không bắt buộc

    Không dùng nữa

    Sử dụng innerBounds hoặc outerBounds.

    Kích thước và vị trí của nội dung trong cửa sổ (không bao gồm thanh tiêu đề). Nếu bạn cũng chỉ định một mã nhận dạng và một cửa sổ có mã nhận dạng để so khớp đã xuất hiện trước đó, thì ranh giới đã ghi nhớ của cửa sổ sẽ được sử dụng.

  • tập trung

    boolean không bắt buộc

    Nếu đúng, cửa sổ sẽ được lấy tiêu điểm khi tạo. Giá trị mặc định là đúng.

  • khung

    string | FrameOptions không bắt buộc

    Loại khung: none hoặc chrome (mặc định là chrome). Đối với none, bạn có thể dùng thuộc tính CSS -webkit-app-region để áp dụng khả năng kéo cho cửa sổ của ứng dụng. Bạn có thể dùng -webkit-app-region: drag để đánh dấu các vùng có thể kéo được. Bạn có thể dùng no-drag để tắt kiểu này trên các phần tử lồng nhau.

    Việc sử dụng FrameOptions là tính năng mới trong M36.

  • ẩn

    boolean không bắt buộc

    Nếu đúng, cửa sổ sẽ được tạo ở trạng thái ẩn. Gọi show() trên cửa sổ để hiện cửa sổ sau khi tạo. Giá trị mặc định là false.

  • biểu tượng

    chuỗi không bắt buộc

    Chrome 54 trở lên

    URL của biểu tượng cửa sổ. Một cửa sổ có thể có biểu tượng riêng khi showInShelf được đặt thành true. URL phải là URL toàn cầu hoặc URL cục bộ của tiện ích.

  • id

    chuỗi không bắt buộc

    Mã nhận dạng để xác định cửa sổ. Giá trị này sẽ được dùng để ghi nhớ kích thước và vị trí của cửa sổ, đồng thời khôi phục hình dạng đó khi một cửa sổ có cùng mã nhận dạng được mở sau này. Nếu một cửa sổ có mã nhận dạng nhất định được tạo trong khi một cửa sổ khác có cùng mã nhận dạng đã tồn tại, thì cửa sổ hiện đang mở sẽ được lấy tiêu điểm thay vì tạo một cửa sổ mới.

  • innerBounds

    BoundsSpecification không bắt buộc

    Dùng để chỉ định vị trí ban đầu, kích thước ban đầu và các quy tắc ràng buộc của nội dung trong cửa sổ (không bao gồm các thành phần trang trí cửa sổ). Nếu bạn cũng chỉ định id và một cửa sổ có id khớp đã xuất hiện trước đó, thì các giới hạn được ghi nhớ sẽ được sử dụng.

    Xin lưu ý rằng khoảng đệm giữa ranh giới bên trong và bên ngoài do hệ điều hành xác định. Do đó, việc đặt cùng một thuộc tính ranh giới cho cả innerBounds và outerBounds sẽ dẫn đến lỗi.

    Thuộc tính này mới có trong Chrome 36.

  • maxHeight

    number không bắt buộc

    Không dùng nữa

    Sử dụng innerBounds hoặc outerBounds.

    Chiều cao tối đa của cửa sổ.

  • maxWidth

    number không bắt buộc

    Không dùng nữa

    Sử dụng innerBounds hoặc outerBounds.

    Chiều rộng tối đa của cửa sổ.

  • minHeight

    number không bắt buộc

    Không dùng nữa

    Sử dụng innerBounds hoặc outerBounds.

    Chiều cao tối thiểu của cửa sổ.

  • minWidth

    number không bắt buộc

    Không dùng nữa

    Sử dụng innerBounds hoặc outerBounds.

    Chiều rộng tối thiểu của cửa sổ.

  • outerBounds

    BoundsSpecification không bắt buộc

    Dùng để chỉ định vị trí ban đầu, kích thước ban đầu và các quy tắc ràng buộc của cửa sổ (bao gồm cả các thành phần trang trí cửa sổ như thanh tiêu đề và khung). Nếu bạn cũng chỉ định id và một cửa sổ có id khớp đã xuất hiện trước đó, thì các giới hạn được ghi nhớ sẽ được sử dụng.

    Xin lưu ý rằng khoảng đệm giữa ranh giới bên trong và bên ngoài do hệ điều hành xác định. Do đó, việc đặt cùng một thuộc tính ranh giới cho cả innerBounds và outerBounds sẽ dẫn đến lỗi.

    Thuộc tính này mới có trong Chrome 36.

  • có thể đổi kích thước

    boolean không bắt buộc

    Nếu đúng, người dùng có thể đổi kích thước cửa sổ. Giá trị mặc định là đúng.

  • showInShelf

    boolean không bắt buộc

    Chrome 54 trở lên

    Nếu đúng, cửa sổ sẽ có biểu tượng kệ riêng. Nếu không, cửa sổ sẽ được nhóm trong kệ cùng với các cửa sổ khác liên kết với ứng dụng. Giá trị mặc định là false. Nếu showInShelf được đặt thành true, bạn cần chỉ định một mã nhận dạng cho cửa sổ.

  • singleton

    boolean không bắt buộc

    Không dùng nữa

    Nhiều cửa sổ có cùng mã nhận dạng không còn được hỗ trợ nữa.

    Theo mặc định, nếu bạn chỉ định mã nhận dạng cho cửa sổ, thì cửa sổ sẽ chỉ được tạo nếu chưa có cửa sổ nào khác có cùng mã nhận dạng. Nếu đã có một cửa sổ có cùng mã nhận dạng, thì cửa sổ đó sẽ được kích hoạt. Nếu muốn tạo nhiều cửa sổ có cùng mã nhận dạng, bạn có thể đặt thuộc tính này thành false.

  • tiểu bang

    Tiểu bang không bắt buộc

    Trạng thái ban đầu của cửa sổ, cho phép tạo cửa sổ ở chế độ toàn màn hình, phóng to hoặc thu nhỏ. Giá trị mặc định là "normal".

  • loại

    WindowType không bắt buộc

    Chrome 45 trở lên Không dùng nữa kể từ Chrome 69

    Tất cả cửa sổ ứng dụng đều sử dụng loại cửa sổ "shell"

    Loại cửa sổ cần tạo.

  • visibleOnAllWorkspaces

    boolean không bắt buộc

    Nếu đúng và được nền tảng hỗ trợ, cửa sổ sẽ hiển thị trên tất cả không gian làm việc.

FrameOptions

Thuộc tính

  • activeColor

    chuỗi không bắt buộc

    Cho phép đặt màu khung của cửa sổ khi cửa sổ đang hoạt động. Bạn chỉ có thể tô màu khung nếu loại khung là chrome.

    Bạn chỉ có thể tô màu khung nếu loại khung là chrome.

    Tô màu khung là tính năng mới trong Chrome 36.

  • màu

    chuỗi không bắt buộc

    Cho phép đặt màu khung. Bạn chỉ có thể tô màu khung nếu loại khung là chrome.

    Tô màu khung là tính năng mới trong Chrome 36.

  • inactiveColor

    chuỗi không bắt buộc

    Cho phép đặt màu khung của cửa sổ khi không hoạt động khác với màu khi hoạt động. Bạn chỉ có thể tô màu khung nếu loại khung là chrome.

    Bạn phải sử dụng inactiveColor cùng với color.

    Tô màu khung là tính năng mới trong Chrome 36.

  • loại

    chuỗi không bắt buộc

    Loại khung: none hoặc chrome (mặc định là chrome).

    Đối với none, bạn có thể sử dụng thuộc tính CSS -webkit-app-region để áp dụng khả năng kéo cho cửa sổ của ứng dụng.

    Bạn có thể dùng -webkit-app-region: drag để đánh dấu các vùng có thể kéo. Bạn có thể dùng no-drag để tắt kiểu này trên các phần tử lồng nhau.

State

Trạng thái của cửa sổ: bình thường, toàn màn hình, phóng to, thu nhỏ.

Enum

"normal"

"fullscreen"

"maximized"

"minimized"

WindowType

Chrome 45 trở lên

Chỉ định loại cửa sổ cần tạo.

Enum

"shell"
Loại cửa sổ mặc định.

"panel"
Cửa sổ do hệ điều hành quản lý (Không dùng nữa).

Phương thức

canSetVisibleOnAllWorkspaces()

chrome.app.window.canSetVisibleOnAllWorkspaces(): boolean

Liệu nền tảng hiện tại có hỗ trợ việc hiển thị cửa sổ trên tất cả không gian làm việc hay không.

Giá trị trả về

  • boolean

create()

Promise 
chrome.app.window.create(
  url: string,
  options?: CreateWindowOptions,
  callback?: function,
): Promise<AppWindow>

Bạn có thể chỉ định kích thước và vị trí của cửa sổ theo một số cách. Lựa chọn đơn giản nhất là không chỉ định bất kỳ thông tin nào, trong trường hợp đó, kích thước mặc định và vị trí phụ thuộc vào nền tảng sẽ được sử dụng.

Để đặt vị trí, kích thước và các quy tắc ràng buộc của cửa sổ, hãy sử dụng thuộc tính innerBounds hoặc outerBounds. Đường viền bên trong không bao gồm các thành phần trang trí cửa sổ. Ranh giới bên ngoài bao gồm thanh tiêu đề và khung của cửa sổ. Xin lưu ý rằng khoảng đệm giữa ranh giới bên trong và bên ngoài do hệ điều hành xác định. Do đó, việc đặt cùng một thuộc tính cho cả ranh giới bên trong và bên ngoài được coi là lỗi (ví dụ: đặt cả innerBounds.left và outerBounds.left).

Để tự động ghi nhớ vị trí của cửa sổ, bạn có thể đặt mã nhận dạng cho cửa sổ. Nếu cửa sổ có mã nhận dạng, thì mã nhận dạng này sẽ được dùng để ghi nhớ kích thước và vị trí của cửa sổ bất cứ khi nào cửa sổ được di chuyển hoặc đổi kích thước. Sau đó, kích thước và vị trí này sẽ được dùng thay cho các giới hạn đã chỉ định khi mở cửa sổ có cùng mã nhận dạng vào lần tiếp theo. Nếu cần mở một cửa sổ có mã nhận dạng ở một vị trí khác với vị trí mặc định được ghi nhớ, bạn có thể tạo cửa sổ đó ở chế độ ẩn, di chuyển cửa sổ đó đến vị trí mong muốn rồi hiện cửa sổ đó.

Thông số

  • url

    chuỗi

  • tùy chọn

    CreateWindowOptions không bắt buộc

  • callback

    hàm không bắt buộc

    Tham số callback có dạng như sau: 

    (createdWindow: AppWindow) => void

Giá trị trả về

  • Promise<AppWindow>

    Chrome 117 trở lên

    Lời hứa chỉ được hỗ trợ cho Manifest V3 trở lên, các nền tảng khác cần sử dụng lệnh gọi lại.

current()

chrome.app.window.current(): AppWindow | undefined

Trả về đối tượng AppWindow cho ngữ cảnh tập lệnh hiện tại (tức là đối tượng "window" của JavaScript). Bạn cũng có thể gọi phương thức này trên một handle cho ngữ cảnh tập lệnh của một trang khác, ví dụ: otherWindow.chrome.app.window.current().

Giá trị trả về

get()

chrome.app.window.get(
  id: string,
): AppWindow | undefined

Lấy AppWindow có mã nhận dạng đã cho. Nếu không có cửa sổ nào có mã nhận dạng đã cho, thì giá trị rỗng sẽ được trả về. Phương thức này mới có trong Chrome 33.

Thông số

  • id

    chuỗi

Giá trị trả về

getAll()

chrome.app.window.getAll(): AppWindow[]

Lấy một mảng gồm tất cả cửa sổ ứng dụng hiện được tạo. Phương thức này mới có trong Chrome 33.

Giá trị trả về

Sự kiện

onBoundsChanged

chrome.app.window.onBoundsChanged.addListener(
  callback: function,
)

Được kích hoạt khi cửa sổ được đổi kích thước.

Thông số

  • callback

    hàm

    Tham số callback có dạng như sau: 

    () => void

onClosed

chrome.app.window.onClosed.addListener(
  callback: function,
)

Được kích hoạt khi cửa sổ đóng. Lưu ý: bạn nên nghe sự kiện này từ một cửa sổ khác với cửa sổ đang đóng, chẳng hạn như từ trang nền. Điều này là do cửa sổ đang đóng sẽ trong quá trình bị huỷ khi sự kiện được kích hoạt, tức là không phải tất cả API trong bối cảnh tập lệnh của cửa sổ đều hoạt động.

Thông số

  • callback

    hàm

    Tham số callback có dạng như sau: 

    () => void

onFullscreened

chrome.app.window.onFullscreened.addListener(
  callback: function,
)

Được kích hoạt khi cửa sổ ở chế độ toàn màn hình (thông qua AppWindow hoặc API HTML5).

Thông số

  • callback

    hàm

    Tham số callback có dạng như sau: 

    () => void

onMaximized

chrome.app.window.onMaximized.addListener(
  callback: function,
)

Được kích hoạt khi cửa sổ được phóng to.

Thông số

  • callback

    hàm

    Tham số callback có dạng như sau: 

    () => void

onMinimized

chrome.app.window.onMinimized.addListener(
  callback: function,
)

Được kích hoạt khi cửa sổ được thu nhỏ.

Thông số

  • callback

    hàm

    Tham số callback có dạng như sau: 

    () => void

onRestored

chrome.app.window.onRestored.addListener(
  callback: function,
)

Được kích hoạt khi cửa sổ được khôi phục từ trạng thái thu nhỏ hoặc phóng to.

Thông số

  • callback

    hàm

    Tham số callback có dạng như sau: 

    () => void