浏览器扩展程序——我们的第一个主题

AWS AI 直播！

在上一篇文章中，我们探讨了如何创建我们的第一个浏览器扩展程序。

在本文中，我们将探讨如何将我们的第一个主题制作成扩展程序！

流程非常相似，但会更简单。

结构

如前所述，主题的结构比较简单。
我们可以使用一个框架manifest.json，并添加一些图片。

首先创建一个新文件夹。

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"
    }
  }
}

好的，我们接下来逐一分析每个选项。
首先需要注意的是，颜色选项采用的是RGB格式。

我添加了这张颜色参考图，以便大家可以直观地了解每个选项的影响。

图片：

• theme_frame我们不能为外框设置颜色，但您可以选择 1x1 像素的图像。
• theme_frame_overlay是左上角。我选的位置和边框一样。
• theme_tab_background这表示非活动标签页；同样，我们需要使用图像来为这些标签页着色。
• theme_ntp_background屏幕的实际中心部分。

颜色：

• toolbar新标签页上书签元素（左下角）的颜色
• tab_background_text背景标签文字的颜色
• tab_text：活动标签页的颜色
• bookmark_text已收藏项目的颜色
• ntp_text中心框文字的颜色
• ntp_link中心框架内链接的颜色
• ntp_section中心区域快捷链接的颜色
• ntp_background新标签页的背景

色调：

• buttons工具栏内图标（返回、刷新等）的底色

特性：

• ntp_logo_alternate显示哪个标志？0 是彩色谷歌标志，1 是白色谷歌标志。
• ntp_background_alignment如果您添加了 NTP 镜像，则可以调整其位置。

你可以设置更多小元素的样式，我发现以下GitHub 仓库非常有用。

测试您的扩展程序

我们不想在没有测试扩展程序的情况下就将其发布到应用商店，所以让我们看看在本地测试需要哪些条件。

我更喜欢使用Chrome浏览器，因为它界面更简洁快捷。

在Chrome浏览器中，点击插件按钮并打开该页面。

接下来，开启开发者模式。你会看到另一个菜单，其中可以选择加载已解压的扩展程序。

点击已解压的加载项，然后导航到theme-extension文件夹。

Chrome 会通知您主题已激活，您应该立即看到颜色效果。

我还把我的每日开发技巧主题上传到了 GitHub。你可以下载它，并通过 Chrome 的开发者模式进行安装。

感谢阅读，让我们保持联系！

感谢您阅读我的博客。欢迎订阅我的电子邮件简讯，也可以在Facebook或Twitter上关注我。