[拯救上班族的 Chrome 扩充套件] Chrome Extension 是什麽酷东西? 跟着官方做 Hello Extensions

嗨各位，我是 Robin

今天想跟大家分享如同标题，

到底什麽是 Chrome Extension?

不知道各位有没有在 Chrome 线上应用程序商店搜寻过一些工具?

像我比较常用的话...
当然是边上班边看影片，
并且能在各个网页都能看到 cc 字幕的扩充 CCViewer啊！

好啦这是我很久以前写的扩充，充满时代的眼泪，也不敢回头看原本怎麽写xDD (会再找时间重构的)，原本想更多的无情工商，可是怕被检举

我个人实质比较常用的... xDD
比方说不想看广告用 ADblock ，
或是英文菜鸡用Google翻译，
或是英文文法菜鸡用 Grammarly，
这些就是 Chrome Extension啦~

以上是我自己比较常用的Chrome扩充啦xDD

听到这边你是不是觉得

今天我就要带领你学习如何制作第一个你的扩充。
开始之前来看看 Chrome Extension 的架构长怎样呢？
画了一张图如下

看完是不是还是没有头绪xD
这并不难，请让我跟你简单的解释。

manifest.json: 就是一个 JSON 格式的一个档案，提供说明你这个扩充的资讯，名字, 需要的权限 或是要做的动作之类的。
Background scripts: 负责处理你需要的逻辑等等，这部分是没有 UI 显示，基本上就是 JS scripts ， Chrome Extension 是属於 event-based 的可以想像成当 user 打开或是关闭任一分页，他就可以在这边做一些控制，在背後默默处理事情的可怜劳工。
Contents scripts: 负责处理你在网页上看到的画面，操控DOM，就像是你打开 F12 的 devtools 在 console 下 scripts 一样，在这边你可以任意的操作你看到的网页(~~听起来是不是很色~~)。
Options page: 负责在使用者打开你的扩充时显示的画面提供使用者自订一些选项的页面。

开始动手做~

新增一个档案叫做 manifest.json。

{
  "name": "Hello Extensions", //你也可以改成你喜欢的名字
  "description": "Base Level Extension", // 叙述你这扩充的用途之类的
  "version": "1.0", // 扩充的版本
  "manifest_version": 3 // manifest 版本（以前是2)
}

新增一个档案叫做 hello.html。

<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>

准备一个图片当作 icon (如果不知道要用什麽可以用官方提供的点我)，并存成 hello_extensions.png 或是其他你想要的名字。

让你的 mainifest.json 知道要做什麽吧~

{
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png" // 你的 icon 档案名称
  }
}

接着我们来看看成果

打开管理扩充功能
点选载入未封装项目
选择你的目录
在管理扩充可以看到你写的扩充
扩充列表也会显示 (可以将它钉选)
点选扩充

恭喜你成功完成你的第一个扩充~
还没完，我们把它加上快捷键吧~

再次打开你的 manifest.json并增加以下内容。

  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+F",
        "mac": "MacCtrl+Shift+F"
      },
      "description": "Opens hello.html"
    }
  }