:::

如何讓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等社群媒體吧!

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

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

  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限制

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

    回覆刪除
  2. 布丁大師你好 我是chromium的新用戶,想跟您請教一下,我youtube.網上看影片都有聲音 ,但是本地電腦上的影片都只能觀看但沒有辦法有聲音,不知道是我哪裡沒做好,可否幫我解答一下,感謝您

    回覆刪除
    回覆
    1. To JASON W,

      1. 可能是你的作業系統沒有安裝合適的解碼器
      2. 你可能在播放一個沒有聲音的影片

      這年頭用Chromium的人挺少見的,你是Linux使用者嗎?

      刪除
  3. 是Linux使用者,這個系統我真的不太習慣,我今天已經改回去了 呵呵

    回覆刪除
    回覆
    1. To JASON W,

      是喔,我倒是覺得還不錯
      如果未來只剩下Windows 10可以用的話,我可能就會直接換Linux的GNOME 3桌面了
      現在我的Chromebook跑不動GNOME,只能跑Xfce4
      但其實也已經夠好用了說

      刪除