iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 28
0
Modern Web

Chrome Extension 開發與實作系列 第 28

Chrome Extension 開發與實作 28-佈景主題(themes)

28-佈景

我們可以使用擴充功能改變Chrome的外觀,他是一種特別的擴充功能,雖然打包的過程與平常的擴充功能無異,但它不包含Javascript與HTML。

你可以在下列網址找到Chrome的各種布景。
https://chrome.google.com/webstore/category/themes

屬性與修改內容

能修改的屬性非常多,這裡只邏列一些常用的部份:

  • theme_frame—頁籤的外框,也就是包含頁籤背景的那個部份
  • theme_toolbar—工具列與現在正focus的頁籤,也就是網址列與瀏覽器按鈕所在的那一列(在視窗上一體的)
  • theme_ntp_background—預設"另開新頁的"頁籤的背景
  • theme_ntp_attribution—預設"另開新頁的"頁籤的背景,主題作者的署名圖片
  • tab_text—設"另開新頁的"頁籤的標題
  • ntp_text—"另開新頁的"頁籤的所有文字的長相
  • button_background—所有Chrome視窗上的按鈕(例如:回首頁、上一頁、下一頁、最小化、重新整理等)
  • buttons—網址列右側,瀏覽器按鈕/頁面按鈕的初始顏色
  • frame—Chrome-瀏覽器外框的長相
  • frame_inactive—瀏覽器外框的長相,在視窗不活躍的時後
  • frame_incognito—瀏覽器外框的長相,在視窗隱形的時後
  • frame_incognito_inactive—前兩者的相加

屬性的值

根據上面列表屬性的不同,通常我們可以使用下列幾種方式為屬性定義他的值

  • colors:使用RGB
  • images:使用圖片指定長相,路徑指定為擴充功能根目錄的相對路徑。
  • properties/ui properties:改變一些UI的屬性,儲如背景對齊,背景重複,替代icon等屬性。
  • tints:改變部份UI的色調,可調整圖片的飽和度以及亮度,例如瀏覽器按鈕、瀏覽器外框、不活躍的頁籤色調。色調以色調 - 飽和度 - 亮度(HSL)的格式指定,使用0〜1.0之間的浮點數:
    • 色調為絕對值,0和1為紅色。
    • 飽和度相對於當前提供的圖片.0.5表示沒有變化,0表示完全不飽和,1表示完全飽和。
    • 亮度也是相對的,0.5表示沒有變化,0表示所有像素均為黑色,1表示所有像素均為白色。

至於完整的屬性與其值的完整列表,在網路上有爬到一篇很完整教學,教學中提供了以下資訊:

  • 提供畫面及索引的對照表
  • 詳細的列出了哪些屬性可以以設定哪些內容(哪些可用colors,那些可用images、哪些可用tints等)
  • 文章中提供了一些圖片的尺寸限制(以下截取部份示列)

http://ithelp.ithome.com.tw/upload/images/20170111/200794500R9EJ4cow4.png

佈景主題的設定檔

對照上面的介紹,大家會發現他的結構是:colors/images/properties/tints→屬性,這一點比較特別。

{
  "version": "2.6",
  "name": "camo theme",
  "theme": {
    "images" : {
      "theme_frame" : "images/theme_frame_camo.png",
      "theme_frame_overlay" : "images/theme_frame_stripe.png",
      "theme_toolbar" : "images/theme_toolbar_camo.png",
      "theme_ntp_background" : "images/theme_ntp_background_norepeat.png",
      "theme_ntp_attribution" : "images/attribution.png"
    },
    "colors" : {
      "frame" : [71, 105, 91],
      "toolbar" : [207, 221, 192],
      "ntp_text" : [20, 40, 0],
      "ntp_link" : [36, 70, 0],
      "ntp_section" : [207, 221, 192],
      "button_background" : [255, 255, 255]
    },
    "tints" : {
      "buttons" : [0.33, 0.5, 0.47]
    },
    "properties" : {
      "ntp_background_alignment" : "bottom"
    }
  }
}

參考


上一篇
Chrome Extension 開發與實作 27-替代頁面 Override Pages
下一篇
Chrome Extension 開發與實作 29-安全性相關的設置
系列文
Chrome Extension 開發與實作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言