:::

如何讓Google Chrome開啟時就佔滿整個螢幕並隱藏控制介面? / How to make Google Chrome open to fill the entire screen and hide the control interface?

20-Google_Chrome_How_to_make_Google_cover.png

最近在展示網頁系統的時候,為了不讓使用者被瀏覽器的其他介面干擾,我在啟動Google Chrome的指令上加上指令列參數(Command Line Switches),使得瀏覽器用新的帳號、隱藏控制介面的APP模式開啟,並讓整個瀏覽器的尺寸設為整個螢幕的大小。這篇就來講講這個指令內包含了什麼參數,以及為什麼我要這樣設定。


用指令開啟Google Chrome瀏覽器 / Open Google Chrome from command line

2020-0428-192221-commwdpemn-opyright-Microsoft-Corporation.png

普通使用者是使用捷徑來開啟Google Chrome。我們可以在捷徑裡面加上參數,讓Google Chrome以特殊狀態開啟。例如我這篇就在「從捷徑直接開啟瀏覽器的無痕/私密模式」介紹如何透過在捷徑裡面加上參數「--incognito」使得Google Chrome一打開來就是無痕模式。

2020-0428-192558-Peter-Beverloo-Home-About-Experiments.png

Google Chrome支援了相當多的參數,但到底那些參數可以使用呢?我們可以查看「List of Chromium Command Line Switches」這篇列出的各種參數。值得注意的是,隨著Google Chrome頻繁改版,這些參數也時常在調整。有些以前可以用的參數,在新版本裡面就無法使用了。如果你要用指令列參數來控制Google Chrome,請務必在正式使用之前測試看看。

.png

(圖片來源:ITBC 9.0廣播教學系統使用說明)

什麼時候會使用指令列來開啟Google Chrome呢?除了設成捷徑,方便讓你自己開啟之外,最常用的就是搭配廣播教學系統上的遠端命令。我們可以在教師的控制端設好指令,就能讓電腦教室中每一台電腦執行相同的指令,省下讓學生自己開啟視窗的操作流程。

底下我們就介紹四種常用的全螢幕開啟Google Chrome的方法:全螢幕、最大化、以佔滿螢幕的尺寸開啟、以及搭配JavaScript自動偵測螢幕尺寸來開啟。


1. 以全螢幕開啟 / Open in full screen

smartmockups_k9jw3u10.png

(模板網頁:SmartMockups)

以全螢幕開啟Google Chrome的指令如下:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --app=http://blog.pulipuli.info --user-data-dir="D:/Test/Chrome-Profiles/1" --start-fullscreen

這一整串指令包括四個部分:

藍字「"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"

這是Windows電腦裡面Google Chrome的安裝位置。如果你使用的是其他作業系統,那把這串換成你電腦裡面的Google Chrome路徑即可。

綠字「--app=http://blog.pulipuli.info

以應用程式模式開啟網頁「http://blog.pulipuli.info」。在應用程式模式中,Google Chrome瀏覽列只會留下標題、捲軸,其他控制介面會全部隱藏起來,包括網址列、擴充功能的按鈕等等。而且在Windows工作列上也會把這個網頁當作獨立的應用程式來處理,不會跟其他Google Chrome的分頁混在一起。

我非常喜歡這個指令列參數,在「自製網頁應用程式!使用Chrome的命令列選項app來製作網頁應用程式捷徑」這篇還有更多的介紹。

紫字「--user-data-dir="D:/Test/Chrome-Profiles/1"

讓Google Chrome以另一個帳號開啟,而這個帳號的資料保存在本機端路徑「D:/Test/Chrome-Profiles/1」裡面。

如果你電腦上已經開啟了Google Chrome,那大部分的指令列參數都會受到原本開啟的Google Chrome影響,不會生效。我們需要透過--user-data-dir以新帳號開啟Google Chrome,這樣就能以全新的Google Chrome來測試、使用系統,而不會受到原本帳號的影響。

另一個類似的做法是使用「--incognito」以無痕視窗開啟。但無痕視窗依然會使用主要帳號的設定以及部分的擴充功能,而且無痕視窗關掉之後就刪除cookie暫存資料,而使用--user-data-dir則仍會保存之前的cookie操作狀態。

如果我們要再使用全新的帳號開啟,那可以修改路徑,或是刪除原本路徑裡面的檔案即可。

紅字「--start-fullscreen

以全螢幕開啟Google Chrome。這個效果就跟你打開Google Chrome,然後按下「F11」一樣。

在全螢幕的狀態下,使用者無法直覺地按下關閉視窗的按鈕來離開。要離開這個畫面的話,必須先按下F11離開全螢幕狀態,這樣才能關閉這個視窗。

適用情景 / When to use it

如果你的目標是讓使用者固定在這個視窗畫面,例如觀看影片、觀看網頁文章、填寫問卷,這些任務不會使用到其他分頁、也不會另外開啟網頁、更不會使用其他應用程式的話,那全螢幕模式蠻適合這種情況下使用。

如果你會想要同時讓使用者操作其他程式的話,那可能就不能使用全螢幕,不然使用者會不知道如何切換到其他畫面。


2. 以最大化視窗開啟 / Open in maximized window

smartmockups_k9jwbop6.png

跟前面的全螢幕相比,最大化視窗會顯示視窗標題以及右邊的縮小、還原、關閉按鈕,也會保留Windows原本的工作列。以最大化視窗開啟Google Chrome的指令如下:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --app=http://blog.pulipuli.info --user-data-dir="D:/Test/Chrome-Profiles/1" --start-maximized

前面的部分與全螢幕開啟的指令差不多,主要是最後一個參數不是使用「--start-fullscreen」,而是使用「--start-maximized」。

紅字「--start-maximized

這表示以視窗最大化的狀態開啟Google Chrome。這個效果就跟打開Google Chrome再按下右上角的「最大化」來放大視窗一樣。

使用者可以直接按右上角的「縮小」、「還原」、「關閉」來控制視窗狀態,也能夠從下面的Windows工作列切換到其他應用程式。

適用情景 / When to use it

如果你的目標是讓使用者可以切換到其他應用程式的話,那保留顯示Windows工作列、讓使用者方便切換,也許是個不錯的做法。

但如果要讓使用者同時查看兩個應用程式,而螢幕的尺寸又組夠大的話,那我會建議不要使用全螢幕,而是指定視窗大小與位置,這樣就更能活用螢幕的空間。

必須要注意的是,如果我們在開啟Google Chrome時加入了「--start-maximized」參數,那在這個網頁上用另開視窗、開啟分頁等形式點開網頁時,新的視窗都會套用原本指令列參數的影響,變成以最大化的形式開啟。

2020-0428-205833-ggaveggg-gg-blog-pulipuliinfo-wekahotspot.png

這時候如果以開新視窗的方式開啟連結,它會脫離應用程式模式,以Google Chrome標準的分頁模式來瀏覽網頁。而主要的網頁依然是以應用程式模式獨立在分頁之外。

如果不想要讓新視窗變成最大化的話,那我們可能要採用下面的「以佔滿螢幕的尺寸開啟」做法。

加入關閉視窗的確認提示 / Add confirmation prompt before closing window

使用最大化視窗的時候,使用者可能會自己關閉視窗。為了避免誤觸關閉按鈕,我建議開發者參考MDN web docs的說明,加入以下程式碼,讓使用者要離開網頁之前跳出一個確認提示:

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";

  (e || window.event).returnValue = confirmationMessage;     // Gecko and Trident
  return confirmationMessage;                                // Gecko and WebKit
});

2020-0428-210542-RulligRgNgSgKSg-Hom.png

離開前的確認訊息如上圖所示。使用者如果執意要離開網頁,依然可以按下「離開」按鈕,但這至少可以避免很多不小心按到關閉視窗按鈕的情況了。


3. 以佔滿螢幕的尺寸開啟 / Open to fill the screen

smartmockups_k9jxltg0.png

這種方法看起來很像是前面的最大化視窗,但兩者並不相同。

2020-0428-211431.png

這種模式依然是普通的視窗,只是將視窗的尺寸放到螢幕最大,並把位置挪到剛好的左上角而已。使用者依然可以縮小、最大化、關閉視窗,在視窗邊緣也可以拖曳改變視窗大小。

以佔滿螢幕的尺寸開啟Google Chrome的指令如下:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --app=http://blog.pulipuli.info --user-data-dir="D:/Test/Chrome-Profiles/1" --window-size="1680,1010" --window-position="0,0"

這次我們不使用「--start-maximized」,而是使用「--window-size」和「--window-position」兩個指令列參數。讓我們看看為什麼要這樣設定吧。

紅字「--window-size="1680,1010"

這個意思是開啟視窗,並將視窗尺寸調整成寬度1680像素、高度1010像素。

為什麼我的寬度和高度是這樣設定呢?這是因為我的螢幕尺寸為1680x1050,而Windows的工作列高度為40像素,所以視窗尺寸設為寬1680、高1010 (也就是1050-40=1010)的話,就能夠佔滿整個螢幕範圍,同時保留Windows工作列的位置。

藍字「--window-position="0,0"

這個意思是將視窗的位置擺到螢幕位置x為0、y為0的地方,也就是螢幕的左上角。

如果不這樣設定的話,通常新開啟的視窗會在離螢幕邊緣有些距離的情況下出現。這樣就喪失以佔滿螢幕尺寸來開啟Google Chrome的目的了。

適用情景 / When to use it

這種方式跟最大化視窗開啟Google Chrome最大的不同在於視窗並非「最大化」,而是可以調整視窗尺寸的狀態。這帶來了兩個好處:可以活用大螢幕、以及能夠使用彈跳視窗。

在螢幕上顯示多視窗 / Display multiple windows on the screen

我們可以用--window-size和--window-position來控制Google Chrome的視窗大小與位置,如果綜合考量過螢幕尺寸、需要開啟的應用程式數量,想要讓使用者在螢幕上同時顯示多個視窗的話,不妨修改--window-size和--window-position,讓Google Chrome不要佔滿全螢幕。

2020-04-28_205439-HTHTEHE-le-Tes-Program-Visualization.png

在這個例子中,我將Google Chrome的尺寸設為螢幕寬度的一半。這樣子就可以保留左邊顯示網頁、右邊開啟其他應用程式的使用方式。這樣使用者可以一邊對著網頁,一邊操作其他軟體,能夠活用大螢幕帶來的好處。

使用彈跳視窗 / Using popup

如果你在網頁裡面有用JavaScript的window.open()開啟彈跳式視窗(popup)的話,那就不能讓網頁以最大化開啟,而必須讓它以單純的視窗開啟。

但使用JavaScript開啟的彈跳視窗,依然會受到Google Chrome指令列參數的影響,以佔滿螢幕畫面的狀態開啟。這時候我們就要使用一些特殊的方式來開啟彈跳視窗。

smartmockups_k9jyeorz.png

我參考xTF的寫法改寫了開啟彈跳視窗的函式。這個函式打開的彈跳視窗按照螢幕畫面80%縮小視窗、並將彈跳視窗的位置挪到畫面中央。

你可以用以下指令來開啟這個彈跳視窗範例網頁

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --app=https://pulipulichen.github.io/blog-pulipuli-info-data-2020/04/20200428-popup-center/index.html --window-size="1680,1010" --window-position="0,0" --user-data-dir="D:/Test/Chrome-Profiles/1"

左邊的「Open Blog (Raw)」是普通的window.open()方法,你可以注意到新開啟的彈跳視窗是以佔滿整個螢幕的尺寸顯示。如果按下右邊的「Open Blog (Redirect)」,那新開啟的彈跳視窗就會以螢幕畫面80%的尺寸顯示。

這個函式popupCenterRedirect(url, ratio, title)原始碼在popupCenterRedirect.js裡面,內容如下:

function popupCenterRedirect(url, ratio, title) {
  
  ratio = (typeof(ratio) === 'number') ? ratio : 0.8
  title = (typeof(title) === 'string') ? title : '_blank'
  
  var w = screen.availWidth * ratio
  var h = screen.availHeight * ratio
  
  w = (w < 300) ? 300 : w
  h = (h < 300) ? 300 : h
  
  var userAgent = navigator.userAgent
  var mobile = function () {
    return /\b(iPhone|iP[ao]d)/.test(userAgent) ||
            /\b(iP[ao]d)/.test(userAgent) ||
            /Android/i.test(userAgent) ||
            /Mobile/i.test(userAgent)
  }
  var screenX = typeof window.screenX !== 'undefined' ? window.screenX : window.screenLeft
  var screenY = typeof window.screenY !== 'undefined' ? window.screenY : window.screenTop
  var outerWidth = typeof window.outerWidth !== 'undefined' ? window.outerWidth : document.documentElement.clientWidth
  var taskbarHeight = 22
  var outerHeight = typeof window.outerHeight !== 'undefined' ? window.outerHeight : document.documentElement.clientHeight - taskbarHeight
  var targetWidth = mobile() ? null : w
  var targetHeight = mobile() ? null : h
  var V = screenX < 0 ? window.screen.width + screenX : screenX
  var left = parseInt(V + (outerWidth - targetWidth) / 2, 10)
  var right = parseInt(screenY + (outerHeight - targetHeight) / 2.5, 10)
          
  var features = []
  if (targetWidth !== null) {
    features.push('width=' + targetWidth);
  }
  if (targetHeight !== null) {
    features.push('height=' + targetHeight);
  }
  features.push('left=' + left)
  features.push('top=' + right)

  var newWindow = window.open('', title, features.join(','))
 
  newWindow.document.write(`<script>window.moveTo(${left}, ${right});window.resizeTo(${targetWidth}, ${targetHeight})</script>`)
  newWindow.document.write(`<script>location.href="${url}"</script>`)

  
  if (window.focus) {
    newWindow.focus()
  }
}

xTF的程式碼相比,紅字的部分是我額外加上去的語法。這些語法的用途是:

  1. 用window.open('')開啟一個空白的子網頁:這時候開啟它的父網頁(opener)可以控制它。如果在window.open()第一個參數指定了網址,而網址跟父網頁是不同網域的時候,我們就沒辦法用JavaScript控制它了。
  2. 調整子網頁的視窗位置和尺寸
  3. 將子網頁轉移到原本要開啟的目標網址

這樣子就能做到調整視窗尺寸、位置之後,再來正常載入目標網址的目的了。


4. 搭配JavaScript偵測螢幕尺寸來開啟 / Open to fill the screen by JavaScript

前面為了要讓Google Chrome以佔滿整個螢幕尺寸的視窗開啟,我們必須事先知道螢幕的尺寸,才能指定--window-size參數。但如果我們在網頁的JavaScript上加入一段程式碼,就能讓網頁載入的時候自動調整成螢幕尺寸:

window.moveTo(0,0)
window.resizeTo(screen.availWidth, screen.availHeight)

我將這段程式碼寫在popup-center的script.js中,你可以用以下指令來開啟這個測試用的網頁:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --app=https://pulipulichen.github.io/blog-pulipuli-info-data-2020/04/20200428-popup-center/index.html --user-data-dir="D:/Test/Chrome-Profiles/1"

你可以注意到,這段指令我並沒有指定--window-size和--window-position,可是網頁在開啟之後就會開始判斷螢幕尺寸,自動將視窗放大、並挪到左上角的位置。我們即使不確定目標使用者的螢幕大小,也能夠透過這種方式來讓Google Chrome以佔滿螢幕的尺寸開啟。

這樣的做法也帶來另外的好處。因為開啟Google Chrome的時候並沒有指定--window-size和--window-position,所以在JavaScript使用window.open()的時候,視窗的位置跟尺寸就能直接指定,不會受到指令列參數的影響。

此外,必須特別注意的是,這個做法是只有在網頁以「--app」應用程式模式開啟的時候,JavaScript才能自由調整視窗的尺寸和位置。如果是用普通的分頁開啟,上面的JavaScript程式碼就不會生效了。


小結 / In closing

這篇介紹了讓Google Chrome以佔滿螢幕的形式開啟網頁的各種做法。裡面活用了指令列參數中的「--app」應用程式模式,搭配全螢幕的「--start-fullscreen」、最大化的「--start-maximized」、指定視窗尺寸與位置的「--window-size」和「--window-position」、以及讓JavaScript自行調整視窗尺寸與位置的語法「window.moveTo()」與「window.resizeTo()」。每種方法都有各自的使用時機與優缺點,請依照你自己的需求使用。

而這種透過指令列開啟Google Chrome的做法,不是只有這篇示範的Windows環境可以用,Linux和Mac也一樣可以用。這在要用自動化操作大量電腦的時候特別好用呢。

以應用程式模式開啟的網頁,可以讓使用者比較容易專心在網頁的內容上,不會分心去操作其他功能。不過這種特殊模式有別於一般操作網頁的使用情境,有些教師會認為,讓學生自行開啟網頁、操作普通的Google Chrome,這也是學習的一環。

這篇就先將方法記錄下來,要如何使用,就看個人囉。


將網頁做成應用程式的其他方法 / Make web pages into applications

除了這篇講述的方法之外,用獨立視窗開啟網頁的做法還有很多種。我以前寫過的「用HTML5開發網頁APP、桌面APP、跟行動裝置APP:混合應用程式框架」這是用PhoneGap把網頁打包成應用程式的做法,比較複雜。Google Chrome也有內建應用程式捷徑的功能,以前它不能使用擴充套件,但現在似乎就跟用--app開啟的方式差不多好用,只是仍然不能自訂圖示。

2020-0428-232140-APPLICATIONIZE-Noel-SIS-seams-ms.png

最近我還看到一個有趣的網站:Applicationize,它能夠將網頁建立成Google Chrome應用程式。是的,就是那個即將在2022年關閉的Chrome APPs。雖然它已經是個走入末路的方式,但Applicationize建立Chrome應用程式的確是蠻簡單的,我很快地就把blog「布丁布丁吃什麼?」建立成Chrome應用程式了。大家可以按照下面步驟安裝看看:

  1. 下載「布丁布丁吃什麼?」Chrome APP安裝檔
  2. 打開你的Google Chrome的擴充功能頁面。網址是「chrome://extensions/
  3. 將安裝檔拖曳到擴充功能頁面,執行安裝
  4. 打開Chrome應用程式的頁面「chrome://apps/」,就可以看到「布丁布丁吃什麼?」應用程式安裝完成了。

2020-0428-233842-pupa-chen-HR-cw-mm-moom-gom-Ki-BE.png

這裡的應用程式似乎會跟Chromebook同步的樣子,也算是一種特殊應用吧。


那麼這次用指令列參數以佔滿螢幕尺寸開啟Google Chrome的教學就到這裡了。寫到最後,我有些問題想問問大家:

  • 你會有用到全螢幕開啟網頁的需求嗎?什麼情況下你會需要這種功能?
  • 你會選擇使用那種模式開啟呢?全螢幕、最大化、還是佔滿螢幕尺寸的普通視窗呢?為什麼?

歡迎在下面的留言處跟我們分享你的想法。大家的意見是我繼續分享的動力喔!如果你覺得我這篇實用的話,請幫我在AddThis分享工具按讚、將這篇分享到Facebook等社群媒體吧!

感謝你的耐心閱讀,我是布丁,讓我們下一篇見。

總共1 則留言, (我要發問)

  1. 最近在煩惱一個問題,那就是JavaScript的剪貼簿中貼上功能(也就是讀取剪貼簿中的內容)只能在特定情況下使用,通常必須是HTTPS

    後來查到Chrome有個指令列參數「--disable-web-security」
    測試之後,赫然發現它竟然可以繞過HTTPS的限制,讓HTTP也能使用剪貼簿貼上!

    再搭配這篇講的指令列參數控制Chrome,那就可以讓使用者直接在HTTP裡面使用「按下按鈕就貼上」的功能

    https://googlechrome.github.io/samples/async-clipboard/index.html
    http://3.bp.blogspot.com/-uZT85_J4i14/XrVr6w4w-QI/AAAAAAAEo94/R2HGK9M9VNQtj56oagvLDHRCiSkLyfVHQCK4BGAYYCw/s1600/2020-05-08_222400.png
    這個示範網頁可以偵測JavaScript能否控制剪貼簿的功能
    在HTTPS中,按Copy和Paste都能正常運作,按下Paste的時候瀏覽器會詢問權限,然後下面Permissions的Read和Write都會表示打勾開啟
    但是在HTTP中(可以把網頁下載下來,自己找個HTTP伺服器開看看),Paste就不能正常運作了

    ----

    意外發現「--disable-web-security」能夠繞過HTTPS限制

    不過這也是在很特定的情況下才能用到
    在這裡就先記錄一下,未來有機會再看看吧

    回覆刪除