說明
使用 chrome.pageAction
API,將圖示放在 Google Chrome 主要工具列的右側。網頁動作代表可在目前網頁上進行,但不適用於所有網頁的動作。閒置時,網頁動作會顯示為灰色。
可用性
以下提供一些例子:
- 訂閱這個網頁的 RSS 動態消息
- 使用這個網頁的相片投影播放
以下螢幕截圖中的 RSS 圖示代表網頁動作,可讓你訂閱 RSS 提供目前網頁的資訊提供。
隱藏的網頁動作會顯示為灰色。舉例來說,下方的 RSS 動態消息會顯示為灰色,因為你無法 訂閱目前網頁的資訊提供:
請考慮改用瀏覽器動作,讓使用者能與您的 。
資訊清單
在擴充功能資訊清單中註冊您的網頁動作,如下所示:
{
"name": "My extension",
...
"page_action": {
"default_icon": { // optional
"16": "images/icon16.png", // optional
"24": "images/icon24.png", // optional
"32": "images/icon32.png" // optional
},
"default_title": "Google Mail", // optional; shown in tooltip
"default_popup": "popup.html" // optional
},
...
}
由於縮放比例係數 (例如 1.5 或 1.2 倍) 的裝置越來越常見, 建議您為圖示提供多種尺寸。Chrome 會選取最接近的位置並縮放 來填滿 16 dip 空間。這也可確保圖示顯示大小有所變更時 我不需要再費心處理要提供不同的圖示!但如果大小差異太過極端 縮放後可能會導致圖示細節遺失或看起來模糊不清。
系統仍支援用於註冊預設圖示的舊版語法:
{
"name": "My extension",
...
"page_action": {
...
"default_icon": "images/icon32.png" // optional
// equivalent to "default_icon": { "32": "images/icon32.png" }
},
...
}
UI 的組成部分
網頁動作和瀏覽器動作一樣,可包含圖示、工具提示和彈出式視窗;然而,我們要排除 不過,此外,網頁動作也可以顯示為灰色。我們提供關於圖示、 工具提示和彈出式視窗,請參閱瀏覽器動作 UI。
您使用 pageAction.show
和
pageAction.hide
方法。根據預設,網頁動作會顯示為灰色。當您
並指定圖示的顯示位置。在分頁之前,圖示會持續顯示
關閉或開始顯示不同的網址 (例如使用者按下連結)。
提示
為了獲得最佳視覺效果,請遵守以下規定:
- 請針對只有少數網頁適用的功能,使用網頁動作。
- 請勿將網頁動作用於適合多數網頁的功能。使用瀏覽器動作 。
- 請勿持續製作圖示動畫,真煩人。
類型
ImageDataType
圖片的像素資料。必須為 ImageData 物件 (例如來自 canvas
元素)。
類型
ImageData
TabDetails
屬性
-
tabId
編號 選填
要查詢狀態的分頁 ID。如未指定分頁,系統會傳回非分頁專屬的狀態。
方法
getPopup()
chrome.pageAction.getPopup(
details: TabDetails,
callback?: function,
)
取得 html 文件集,做為此頁面動作的彈出式視窗。
參數
-
詳細資料
-
回呼
函式 選用
callback
參數如下所示:(result: string) => void
-
結果
字串
-
傳回
-
承諾<字串>
Chrome 101 以上版本Promise 僅適用於 Manifest V3 及以上版本,其他平台需要使用回呼。
getTitle()
chrome.pageAction.getTitle(
details: TabDetails,
callback?: function,
)
取得網頁動作的標題。
參數
-
詳細資料
-
回呼
函式 選用
callback
參數如下所示:(result: string) => void
-
結果
字串
-
傳回
-
承諾<字串>
Chrome 101 以上版本Promise 僅適用於 Manifest V3 及以上版本,其他平台需要使用回呼。
hide()
chrome.pageAction.hide(
tabId: number,
callback?: function,
)
隱藏網頁動作。隱藏的網頁動作仍會顯示在 Chrome 工具列中,但會顯示為灰色。
參數
-
tabId
數字
要修改網頁動作的分頁 ID。
-
回呼
函式 選用
Chrome 67 以上版本callback
參數如下所示:() => void
傳回
-
承諾<void>
Chrome 101 以上版本Promise 僅適用於 Manifest V3 及以上版本,其他平台需要使用回呼。
setIcon()
chrome.pageAction.setIcon(
details: object,
callback?: function,
)
用於設定網頁動作的圖示。可以將圖示指定為圖片檔的路徑,或是畫布元素中的像素資料,或是圖示為其中一個項目的字典。必須指定 path 或 imageData 屬性。
參數
-
詳細資料
物件
-
iconIndex
編號 選填
已淘汰。系統已忽略此引數。
-
圖片資料
ImageData |物件 optional
ImageData 物件或字典 {size ->ImageData} 代表要設定的圖示。如果將圖示指定為字典,系統會根據螢幕像素密度選擇要使用的實際圖片。如果單一螢幕空間單位的圖片像素數量等於
scale
,系統會選取大小為scale
* n 的圖片像素,其中 n 是使用者介面中的圖示尺寸。至少須指定一張圖片。請注意,「details.imageData = foo」相當於 'details.imageData = {'16': foo}' -
路徑
string |物件 optional
相對圖片路徑或字典 {size ->相對圖片路徑},指向要設定的圖示。如果將圖示指定為字典,系統會根據螢幕像素密度選擇要使用的實際圖片。如果單一螢幕空間單位的圖片像素數量等於
scale
,系統會選取大小為scale
* n 的圖片像素,其中 n 是使用者介面中的圖示尺寸。至少須指定一張圖片。請注意,「details.path = foo」相當於 'details.path = {'16': foo}' -
tabId
數字
要修改網頁動作的分頁 ID。
-
-
回呼
函式 選用
callback
參數如下所示:() => void
傳回
-
承諾<void>
Chrome 101 以上版本Promise 僅適用於 Manifest V3 及以上版本,其他平台需要使用回呼。
setPopup()
chrome.pageAction.setPopup(
details: object,
callback?: function,
)
設定當使用者按一下網頁動作圖示時,要以彈出式視窗開啟 HTML 文件。
參數
-
詳細資料
物件
-
彈出式訊息
字串
在彈出式視窗中顯示的 HTML 檔案的相對路徑。如果設為空字串 (
''
),系統不會顯示彈出式視窗。 -
tabId
數字
要修改網頁動作的分頁 ID。
-
-
回呼
函式 選用
Chrome 67 以上版本callback
參數如下所示:() => void
傳回
-
承諾<void>
Chrome 101 以上版本Promise 僅適用於 Manifest V3 及以上版本,其他平台需要使用回呼。
setTitle()
chrome.pageAction.setTitle(
details: object,
callback?: function,
)
設定網頁動作的標題。這會顯示在網頁動作的工具提示中。
參數
-
詳細資料
物件
-
tabId
數字
要修改網頁動作的分頁 ID。
-
title
字串
工具提示字串。
-
-
回呼
函式 選用
Chrome 67 以上版本callback
參數如下所示:() => void
傳回
-
承諾<void>
Chrome 101 以上版本Promise 僅適用於 Manifest V3 及以上版本,其他平台需要使用回呼。
show()
chrome.pageAction.show(
tabId: number,
callback?: function,
)
顯示網頁動作。每次選取分頁時,都會顯示網頁動作。
參數
-
tabId
數字
要修改網頁動作的分頁 ID。
-
回呼
函式 選用
Chrome 67 以上版本callback
參數如下所示:() => void
傳回
-
承諾<void>
Chrome 101 以上版本Promise 僅適用於 Manifest V3 及以上版本,其他平台需要使用回呼。