一、描述

chrome extensions google 官方的定义是:

扩展程序是定制浏览体验的小型软件程序。这些扩展程序能够使得用户根据个人需求或者偏好定制 Chrome 功能和行为。基于 HTML, JavaScript和 CSS 等 Web 技术构建。

扩展必须实现一个狭义定义且易于理解的单一目的。单个扩展可以包括多个组件和一系列功能,只要所有内容都有助于实现共同目标。

用户界面应该是最小的并且有意图。它们的范围可以从简单的图标到覆盖整个页面。

2.jpg

最终的扩展程序是压缩成用户下载和安装的单个 .crx package,因此这个 package 是离线的,不依赖来网络资源,和普通的 web 程序是不同的。

二、尝试开发扩展程序

1、mainfest.json

首先需要明确的是,Chrome 的扩展程序必须要有一个 manifest.json 文件用以描述 APP 信息及其他的资源加载路径等等。

最基本的 3 个信息是 namedescriptionversion

{
    "name": "Hello Extensions - Postbird",
    "description" : "Base Level Extension - Postbird",
    "version": "1.0",
    "manifest_version": 2
}

除此之外,还可以声明一些操作,比如声明了 browser_action:

{
    "name": "Hello Extensions - Postbird",
    "description" : "Base Level Extension - Postbird",
    "version": "1.0",
    "manifest_version": 2,
    "browser_action" : {
        "default_popup": "hello.html",
        "default_icon": "hello_extensions.png"
    }
  }

上面声明中,点击图标之后会弹一个 popup,然后加载 hello.html, default_icon 则是扩展程序默认的图标(chrome 的文档中提供的)

hello_extensions.png

2、index.html

开发 hello.html 文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Extensions</title>
    <style>
        body {
            width: 500px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Hello Extensions</h1>
</body>
</html>

3、安装扩展程序

上面只是写了个代码,目录结构如下:

3.jpg

现在并没有打包,如果要在开发的时候调试或者预览,就需要在开发者模式下安装已经解压过的扩展程序。

  • 在浏览器中输入 chrome://extensions 打开扩展程序管理界面(初次之外,可以通过 chrome 的 选项程序中选择 更过工具,然后选择 扩展程序一样能够打开
  • 打开【开发者选项
  • 通过【加载已解压扩展程序】,打开开发的目录即可

4.jpg

有一点需要注意的是,如果你改动了 manifest.json 之后,需要重新加载已经解压的扩展程序

4、通过快捷键唤醒扩展程序

通过在 manifest.json 中配置 commands 快捷键,你可以直接通过快捷键在 chrome 中唤醒扩展程序,

比如下面的配置:

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

在 windows 可以通过 Ctrl+Shift+F 直接唤醒扩展程序。

最终的配置如下:

{
    "name": "Hello Extensions - Postbird",
    "description" : "Base Level Extension - Postbird",
    "version": "1.0",
    "manifest_version": 2,
    "browser_action" : {
        "default_popup": "hello.html",
        "default_icon": "hello_extensions.png"
    },
    "commands": {
      "_execute_browser_action": {
        "suggested_key": {
          "default": "Ctrl+Shift+F",
          "mac": "MacCtrl+Shift+F"
        },
        "description": "Opens hello.html"
      }
    }
  }

预览效果

最终会在 chrome 上有一个扩展程序的 icon,点击之后会出现我们开发好的 html 页面:

popup 类型的扩展界面点击屏幕空白处也是会关闭的。

GIF.gif