解決「設為首頁」與「收藏本站」在非 IE 瀏覽器失效的問題

許多開發者在製作網站時，會遇到「設為首頁」與「收藏本站」功能僅在 Internet Explorer (IE) 瀏覽器正常運作，而在 Chrome、Firefox、Edge 等現代瀏覽器完全失效的情況。這是因為現代瀏覽器基於安全性考量，已封鎖或移除了網頁腳本直接修改瀏覽器首頁或書籤的權限。

為什麼原本的代碼會失效？

傳統做法通常依賴 window.external.addFavorite() (IE 專屬) 或 window.sidebar.addPanel() (舊版 Firefox) 等非標準 API。隨著瀏覽器架構演進，這些 API 已被棄用或移除。例如：

• Chrome / Edge (Chromium 內核)：完全不支援任何網頁腳本修改首頁或書籤的行為。
• Firefox：早期透過 netscape.security.PrivilegeManager 請求權限，但現代版本已移除此機制。
• Safari：同樣不提供任何 JavaScript 介面供網頁操作書籤或首頁。

現代 Web 開發的最佳實踐

既然瀏覽器不再允許網頁強制修改使用者設定，我們應轉向引導使用者手動操作的友善體驗：

1. 替代「收藏本站」：提示使用者按下快捷鍵

偵測作業系統，顯示對應的加入書籤快捷鍵：

function addToFavorites() {
  const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
  const shortcut = isMac ? 'Command/Cmd + D' : 'Ctrl + D';
  alert(`請按 ${shortcut} 將本站加入書籤`);
}

2. 替代「設為首頁」：提供圖文教學連結

由於無法以腳本完成，最佳做法是彈出一個模態視窗或導向說明頁，針對主流瀏覽器提供步驟截圖：

• Chrome：設定 → 外觀 → 顯示首頁按鈕 → 輸入網址
• Firefox：選項 → 首頁 → 自訂網址
• Edge：設定 → 啟動時 → 開啟特定頁面

程式碼重構範例

以下是一個跨瀏覽器相容、體驗友善的實作：

<ul class="site-tools">
  <li><a href="/admin/login">後台管理</a></li>
  <li><a href="javascript:void(0)" onclick="showBookmarkGuide()">收藏本站</a></li>
  <li><a href="/guide/set-homepage.html" target="_blank">設為首頁</a></li>
</ul>

<script>
function showBookmarkGuide() {
  const isMac = /Mac/.test(navigator.platform);
  const key = isMac ? '⌘+D' : 'Ctrl+D';
  alert(`請按 ${key} 加入書籤\n\n或點擊瀏覽器右上角「★」圖示`);
}
</script>

總結

順應瀏覽器安全策略的變化，放棄「腳本強制修改」的思維，改以「引導使用者自主操作」為核心，才能在所有現代瀏覽器提供一致且可靠的體驗。若專案強制要求舊功能，建議評估是否為內部系統，若是可考慮打包成瀏覽器擴充套件以獲得更高權限。