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

4月 29, 2020 Software/Google 5 Comments Edit Copy Download

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

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

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

• List of Chromium Command Line Switches
  

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

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

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

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

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

(模板網頁：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

跟前面的全螢幕相比，最大化視窗會顯示視窗標題以及右邊的縮小、還原、關閉按鈕，也會保留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」參數，那在這個網頁上用另開視窗、開啟分頁等形式點開網頁時，新的視窗都會套用原本指令列參數的影響，變成以最大化的形式開啟。

這時候如果以開新視窗的方式開啟連結，它會脫離應用程式模式，以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
});

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

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

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

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

以佔滿螢幕的尺寸開啟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不要佔滿全螢幕。

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

使用彈跳視窗 / Using popup

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

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

我參考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開啟的方式差不多好用，只是仍然不能自訂圖示。

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

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

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

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

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

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

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