各式小軟體跟學習歷程分享

   1: {

   2:   "name": "My Theme",

   3:   "version": "1.0",

   4:   "theme": {

   5:     "images" : {

   6:       "theme_frame" : "images/1.png"

   7:     }

   8:   }

   9: }

這是最簡單的一個範例

最上面一定要有name跟version

記得要打

接下來在theme所包覆的區域

就是打一些自己想改的地方了

至於有哪些地方可以改呢？

主要分成四部分

  1.images

  2.colors

  3.tints

  4.properties

大家可以參考Theme Creation Guide這篇

再最下面我會在解釋

Step 3:

當都改好了該怎麼套用到Chrome裡呢？

打開擴充功能並且把開發人員模式展開

點選"載入未封裝擴充功能"後，選取我們剛剛所建立的資料夾就可以了~

以下我來把一些我弄懂的元素紀錄一下

讓我們知道各個參數是對應到哪邊

圖片紅色的地方就是對應到的位置

首先強調images裡的紅色是一張圖片，所以可以換成喜歡的圖片，不一定是單色的紅色

只是為了清楚表示對應位置。

images:

  1. "theme_frame"

    Chrome上面的範圍都是

  1.2 "theme_frame_inactive"

    範圍跟上一個相同，但是是在chrome沒有被選取到的時候會變的顏色

    如果不調整的話，預設是"theme_frame"的顏色變淡一點

  1.3 "theme_frame_incognito"

    範圍跟"theme_frame"一樣，但是是在無痕模式，而且顏色會稍微加上一點黑色

  1.4 "theme_frame_incognito_inactive"

    與"theme_frame_inactive"相同但是是在無痕模式，就不貼圖了

  2 "theme_toolbar"

    工具欄、書籤、以及被點選的分頁部份會變色，當滑動到未選取的分頁時

    也會變較淡的顏色

  3 "theme_tab_background"

    未被選取到的分頁背景顏色

  3.1 "theme_tab_background_incognito"

    範圍同上，只是是在無痕模式中

  4 "theme_tab_background_v"

    研究不出來...還麻煩有人知道可以跟我說一下

  5 "theme_ntp_background"

    新分頁中的背景圖案，因為我的原圖很小張，所以只有一小塊紅色

    大家可以視需求自己去調整圖片大小

  6 "theme_frame_overlay"

    Chrome上面那一塊的背景圖，跟上面的"theme_frame"不一樣的地方

    就是他的分頁不會跟著變色，因為它只是在上面放一張圖片，所以基本的

    圖片還是由"theme_frame"來決定

  6.1 "theme_frame_overlay_inactive"

    解釋是寫說跟上面一樣，但是是在視窗沒被選取到的時候，不過我試不出來

  7 "theme_button_background"

    按鈕的背景圖

  8 "theme_ntp_attribution"

    在新分頁中，顯示主題製作者區塊，和圖片

  9 "theme_window_control_background"

    Chrome的控制項背景圖，最大化最小化等等的

以下是colors的寫法

"colors" : {

    "frame" : [0, 0, 255],    

    "ntp_section" : [15, 15, 15, 0.6]

}

後面數值主要是RGB而有些參數則可加上alpha值，向上面的"ntp_section"

color這部份我用綠色來表示他所對應的位置

colors:

  10 "frame"

    當不是最大化的時候，外圍框架下面部份

  10.1 "frame_inactive"

    範圍同上，只是在未被選取到的時候才換顏色

  10.2 "frame_incognito"

    範圍也一樣，只是是在無痕模式中

  10.3 "frame_incognito_inactive"

    範圍一樣，是在無痕模式中且未被選取到的時候

  10.4 "toolbar"

    有幾個部份，第一是在新分頁中且書籤列未固定的地方，

  另一個部份是左下角顯示網頁狀態的地方，

    還有一些小地方比如說捲軸的部份，不過那比較不明顯了

  11 "tab_text"

    被選取到的tab的文字顏色

  12 "tab_background_text"

    和上面相反，未被選取到的tab文字顏色

  13 "bookmark_text"

    書籤文字顏色

  14 "ntp_background"

    新分頁中的背景顏色，和上面的"theme_ntp_background"不同之處

    這個是背景顏色，而"theme_ntp_background"是圖片，如果兩個一

    起寫的話，"theme_ntp_background"會在上層

  14.1 "ntp_text"

    新分頁中的文字顏色

  14.2 "ntp_link"

  新分頁中清單檢視模式的文字顏色

  14.3 "ntp_link_underline"

    新分頁中清單檢視模式的文字底線顏色

  14.4 "ntp_header"

    當滑鼠滑到新分頁中縮圖上時顯示顏色

  14.5 "ntp_section"

    新分頁中縮圖的邊框顏色

  14.6 "ntp_section_text"

    新分頁中的近期關閉分頁的文字顏色

  14.7 "ntp_section_link"

    新分頁中近期關閉分頁的連結文字顏色

  14.8 "ntp_section_link_underline"

    新分頁中近期關閉分頁的連結底線顏色

  15 "control_background"

    控制項背景顏色？這我也測試不出來

  16 "button_background"

    按鈕背景顏色

以下是tints的部份

這部分我大概知道他的功用，要是我用的話我會用在當視窗未被選取到或無痕模式中

但是我不太會調整就是了...

"tints" : {

    "buttons" : [0, 0, 0.5]

}

後面的數值分別是色調，飽和度，亮度，數值都介於0~1之間

  17 "buttons"

    調整各個按鈕

  18 "frame"

    調整整個Chrome

  19 "frame_inactive"

    跟上面相同，只是是在Chrome未被選取到的時候

  20 "frame_incognito"

    跟上面相同，只是是在無痕模式中

  21 "frame_incognito_inactive"

    跟上面相同，只是是在無痕模式中且未被選取到的時候

  22 "background_tab"

    未被選取到的分頁背景顏色

以下是properties的部份

  它用來控制一些其他的屬性，比如說圖片要靠左還是靠右等等的

  23 "ntp_background_alignment"

    新分頁的背景圖對齊方式，主要有四個參數

      top:貼齊上方

      bottom:貼齊下方

      left:靠左

      right:靠右

    最多一次可以輸入兩個數值，當然是不衝突的數值

    例如說輸入:

"properties" : {
  "ntp_background_alignment" : "right bottom"
}

   1: {

   2:   "version": "2.6",

   3:   "name": "camo theme",

   4:   "theme": {

   5:     "images" : {

   6:       "theme_frame" : "images/theme_frame_camo.png",

   7:       "theme_toolbar" : "images/theme_toolbar_camo.png",

   8:       "theme_ntp_attribution" : "images/attribution.png" 

   9:     },

  10:     "colors" : {

  11:       "frame" : [71, 105, 91],

  12:       "toolbar" : [207, 221, 192],

  13:       "ntp_text" : [20, 40, 0],

  14:       "ntp_link" : [36, 70, 0],

  15:       "ntp_section" : [207, 221, 192],

  16:       "button_background" : [255, 255, 255]

  17:     },

  18:     "tints" : {

  19:       "buttons" : [0.33, 0.5, 0.47]

  20:     },

  21:     "properties" : {

  22:       "ntp_background_alignment" : "bottom"

  23:     }

  24:   }

  25: }

最常發生的錯誤就是逗號忘記或是多加了逗號

在下面還有元素時，就是紅色的地方記得要加逗號

而如果下面沒有了東西了則不用再加