Published 2022-08-19 11:41:15

Chrome插件开发 - 第一个主题

在上一篇文章【First Extension】学习了创建第一个插件。

这篇文章学习创建一个主题插件。

结构

mkdir theme-extension && cd theme-extension

更改manifest.json

{
  "manifest_version": 3,
  "version": "2.6",
  "name": "daily dev tips theme",
  "theme": {
    "images": {
      "theme_frame": "images/frame-background.png",
      "theme_frame_overlay": "images/frame-background.png",
      "theme_tab_background": "images/tab-background.png",
      "theme_ntp_background": "images/ntp-background.png"
    },
    "colors": {
      "toolbar": [0, 185, 232],
      "tab_background_text": [255, 255, 255],
      "tab_text": [255, 255, 255],
      "bookmark_text": [255, 255, 255],
      "ntp_text": [218, 0, 96],
      "ntp_link": [218, 0, 96],
      "ntp_section": [255, 255, 255],
      "ntp_background": [255, 255, 255]
    },
    "tints": {
      "buttons": [1, 1, 1]
    },
    "properties": {
      "ntp_logo_alternate": 0,
      "ntp_background_alignment": "center"
    }
  }
}

HUvoYl

上图解释了每个配置对应的效果

Images:

Colors:

Tints:

有六个值,分别是background_tab,buttons,frame,frame_inactive,frame_incognito,frame_incognito_inactive 他们的用法都一样,都是色调在色调饱和度(HSL)格式,使用范围 0 - 1.0:色调是绝对值,在 0 和 1 之间饱和是相对于当前的图像的。0.5 没有变化,0 完全不饱和,1 是完全饱和度。亮度也是相对的,0.5 没有变化,0 像素黑色,1 作为所有像素白色。

Properties:

测试扩展

r60uOV