自製網頁應用程式！使用Chrome的命令列選項app來製作網頁應用程式捷徑 / Run a Standalone Web APP in Google Chrome’s App Mode

11月 25, 2016 Software/Browser , Software/Windows 6 Comments Edit Copy Download

你常常使用Inbox或Wunderlist等網頁應用程式(Web APP)，但又不想讓它們跟其他分頁混在一起、而希望能夠獨立成為一個視窗嗎？本篇教你利用Google Chrome的命令列選項app將常用網頁製作成應用程式捷徑，不僅讓它以獨立無選單應用程式模式開啟，還能將捷徑直接加入Windows的開始 > 所有程式當中！

為什麼需要用獨立視窗開啟網頁 / Why you need open a Webpage in  Application Mode

會需要獨立視窗開啟網頁的理由大致上可以歸納為三項：

一般使用Google Chrome的時候，通常會伴隨著分頁列與網址列等操作介面。我們在瀏覽普通網頁的時候會需要它們，但是對一些網頁應用程式(Web APP)來說，這些介面只是占空間，不大實用。

另一方面，常常使用的網頁應用程式卻容易跟瀏覽器的其他分頁混在一起。像我工作時常常開啟20幾個分頁，變得讓我難以找到需要的Inbox跟Wunderlist分頁。雖然有像是「Quick Tabs」這樣好用的分頁搜尋擴充功能，但如果可以的話，我還是希望網頁應用程式能夠以獨立的Windows視窗呈現，而且還能像是一般的Windows程式一樣放在工作列當中。

一般開啟網頁的方式都得經過 1. 開啟Windows的所有程式、2. 開啟瀏覽器、3. 開啟書籤(我的最愛)、4. 切換到網頁應用程式的分頁。但是這樣的步驟實在是太瑣碎了，我希望能夠直接在Windows的所有程式裡面直接就能開啟我要的網頁應用程式。

為什麼不要用Chrome內建的「建立應用程式捷徑」？ / Why don't use Chrome's "Create Application Shortcut"?

講到這裡很多熟悉Google Chrome的人應該會立刻想到Chrome內建的「應用程式捷徑」或是現在改名為「加到桌面」的功能。事實上這個功能有很多限制：

1. 只能用現在所在分頁的網址，不能自訂網址：有些AJAX網頁應用程式常常㑹在開啟分頁之後修改網址，導致沒辦法直接用所在分頁的網址製作應用程式捷徑。這時候還是能夠使用自己定義的網址比較好。
2. 不能使用擴充功能：使用內建的「建立應用程式捷徑」會讓Chrome產生一個應用程式，而Chrome的應用程式是沒辦法使用擴充功能。這樣子我就沒辦法使用「Stylebot」之類的擴充功能來客製化網頁的CSS，很不方便。
3. 會被同步到其他電腦的Chrome上：用「建立應用程式捷徑」產生的Chrome應用程式㑹一直保留在同步帳戶中，除非你手動刪除它。
4. 不能自訂網頁圖示：「建立網頁應用程式」㑹取用該網頁的圖示設定做為應用程式的圖示，但大部分的網頁都沒能做好圖示設定，所有建立的應用程式圖示都會是空白。

綜合以上所述，我不推薦大家使用Chrome內建的「建立應用程式捷徑」，而是改用以下我介紹的使用命令列選項app來建立。

製作獨立視窗開啟網頁的指令 / Application Mode Command

要建立獨立開啟視窗的捷徑，我們必須要確定兩個參數：

然後參考Google Chrome的命令列選項，使用app選項來呼叫網頁應用程式。綜合之後指令如下：

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --app=http://blog.pulipuli.info

建立指令的網頁程式 / Script for Creating Application Mode Command

因為我常常用到這個功能，所以就順便寫成網頁程式了：

建立網頁應用程式的捷徑 / Create Application Shortcut

接著我們就可以用建立捷徑的方式，將上面的指令貼在「輸入項目的位置」欄位當中。

然後為捷徑命名，例如「布丁布丁吃什麼？」。

這樣子就完成了一個捷徑。

點開捷徑時，就會出現像上圖一樣的獨立視窗。它不僅隱藏了分頁列與網址列，還會在Windows的工作列上成為獨立的視窗，方便大家使用。

Windows內的使用方式 / Use Application Shortcut in Windows

有了這個應用程式捷徑之後，我們就可以做很多事情。

將捷徑加入「開始 > 所有程式」 / Add Shortcut to "StartMenu > All Programs" Menu

最後我們可以把這個捷徑加到Windows的「開始 > 所有程式」之中。每個版本的Windows處理方式都不一樣，請看Where do Start Menu\All Programs shortcuts reside?這篇的說明。以Windows 7為例，所有程式的路徑如下：

• C:\ProgramData\Microsoft\Windows\Start Menu\Programs

將捷徑加到「所有程式」的資料夾之後，未來就能直接從Windows的「開始」開啟網頁應用程式了。

釘選網頁應用程式到工作列 / Pin Web Application to Taskbar

用這種方式建立的捷徑，沒辦法用Windows內建的「釘選應用程式」來把它固定在工作列上。

這時候就要改用TaskbarPinner (Windows 7適用)、Pin to 8 (Windows 8適用)來釘選。或著也可以將捷徑複製到以下釘選的資料夾位置中：

• C:\Users\[你的使用者名稱]\AppData\Roaming\Microsoft\Internet Explorer\Quick Launch\User Pinned\TaskBar

TaskbarPinner備份 / TaskbarPinner Backup

在此順便備份Windows 7專用的TaskbarPinner，這工具真的很好用，任何東西都可以盯到工作列上：

• TaskbarPinner網站：http://winaero.com/comment.php?comment.news.108
• TaskbarPinner下載：http://winaero.com/request.php?34
• 備份2.0.0.0版本：GitHub、Google Drive、Box、OneDrive、Mega、MediaFire

結合XLaunchPad選單 / Integrate to XLaunchPad

除了使用Windows內建的「開始 > 所有程式」之外，我們也可以把捷徑加入第三方選單工具XLaunchPad中。這樣子就能製作有如平板的選單畫面，操作起來非常方便。

以下順便備份XLaunchPad的資料：

• XLaunchPad官方網站：http://www.xwidget.com/
• XLaunchPad下載：http://www.xwidget.com/download_xlp.php
• XLaunchpad ver 1.0.9.518 Portable備份：GitHub、Google Drive、Box、OneDrive、Mega、MediaFire

網頁應用程式可搭配的擴充功能 / Extensions for Web Application Mode

使用上述地方建立的網頁應用程式能夠搭配擴充功能使用。以下我列出兩個我最常用的擴充功能供大家參考：

自訂網頁樣式：Stylebot / Customize Webpage: Stylebot

• https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?utm_source=chrome-app-launcher-info-dialog

Stylebot可以讓我們自訂網頁的CSS樣式。這可以做什麼呢？

讓我們以郵遞區號查詢功能來做為例子。打開快速查詢 3+2郵遞區號查詢網頁，你找得到在哪裡查詢郵遞區號嗎？

利用Stylebox套用自訂的CSS之後，就能夠呈現上面的樣貌。這段自訂的CSS內容如下：

#HeaderContainer, #Breadcrumbs, #LocalNavContainer, .acc-key, #Section_2, .PadinTop20, .BackToTop_2, .FatFooter, #FooterContainer {
    display: none;
}
 
input[type="Submit"] {
    display: block;
    font-size: large ;
    margin: 0.5rem;
    padding: 0.5rem ;
    width: 50% ;
}
 
select#city, #cityarea, #Select1 {
    font-size: 3em;
}
 
input.Submit_1 {
    font-size: 3em;
}
 
.GreenBold::before {
    content: " ";
    overflow: hidden;
    color: transparent;
    display: block;
}

不過這就不是給一般人使用的功能了。

取得網址：Copy URL + Title / Get URL: Copy URL + Title

在網頁應用程式的模式中，網址列會被隱藏起來，這樣要怎麼取得網址呢？試用了幾個擴充套件之後，我發現最好用的就是「Copy URL + Title」。

• https://chrome.google.com/webstore/detail/copy-url-%2B-title/dgagjmdgbakclelfacghmmbadkdegjjh

有這個擴充功能之後，就能夠用滑鼠右鍵開啟「Copy URL + Title」選單，進入「Copy URL > Simple URL」取得現在的網址了。

還有其他的知名擴充套件，像是擋廣告神器AdBlock、英文文法校對grammarly、網頁手勢Gestures for Google Chrome，都可以在這個模式下正常運作。光是可以使用擴充套件這點，就勝過Chorme內建的「建立應用程式捷徑」功能了。

結語 / Conclusion

本篇是以捷徑的方式建立網頁應用程式，這算是Google Chrome的進階應用方式，主要是為了想提升工作效率的Windows進階使用者所寫的教學。

我使用這樣子的方式在Windows中大量網頁應用程式的時間也差不多快一年了。用捷徑建立網頁應用程式的方法雖然看起來繁瑣，但只要建立一次之後，未來就能夠直接在開始程式、XLaunchPad中取用，還能搭配Stylebox調整成自己喜歡的樣式。這方法大幅改善了我的工作效率。

舉另一個例子來說，我特別喜歡它可以讓我同時開啟多個相同的Google Doc長文件。這樣我就能直接參照前後文的內容，以免寫出頭尾不符的敘述。這個視窗切割的是搭配Winsplit Revolution使用，這個經典的小工具也常駐在我的電腦中許多年了。

題外話，這篇教學大概半年前我就想過要來介紹，結果還是拖到這麼久才下定決心動筆。本來這次只是想單純寫Chrome命令列選項app的用法，其他部分則是拆開成其他文章來撰寫。後來想想，光是這篇都拖這麼久了，其他部分我也不見得會好好地寫完他們。不如就以建立網頁應用程式捷徑的介紹為主，其他Windows跟擴充功能的介紹就蜻蜓點水帶過吧。