daicy
发布于 2020-05-04 / 1055 阅读
0
0

chrome插件开发入门指南

什么是扩展插件?

扩展插件是可以定制浏览体验的小型软件程序。它们使用户可以根据个人需要或偏好来定制Chrome功能和行为。它们基于Web技术(例如HTML,JavaScript和CSS)构建。

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

用户界面应最少且具有意图。它们的范围从简单的图标到覆盖整个页面。

扩展文件被压缩到.crx用户下载并安装的单个程序包中。这意味着扩展与普通的Web应用程序不同,它不依赖于Web上的内容。

扩展程序通过 Chrome开发人员信息中心分发, 并发布到 Chrome网上应用店。有关更多信息,请参阅 商店开发人员文档

你好插件

通过此快速的Hello扩展示例,对扩展进行一小步。首先创建一个新目录来存储扩展的文件,或者从示例页面下载它们 。

接下来,添加一个名为的文件,manifest.json 并包含以下代码:

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

每个扩展都需要一个清单,尽管大多数扩展仅对清单没有多大作用。为了快速入门,扩展程序在该browser_action字段下声明了一个弹出文件和图标 :

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

在此处 下载 ,然后创建一个名为的文件: hello_extensions.pnghello.html

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

现在hello.html,单击该图标时将显示扩展名。下一步是在中包含manifest.json启用键盘快捷键的命令。此步骤很有趣,但不是必需的:

{
  "name": "Hello Extensions",
  "description" : "Base Level Extension",
  "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"
    }
  }

}

最后一步是在您的本地计算机上安装扩展。

  1. chrome://extensions在浏览器中导航到。您还可以通过点击多功能框右上角的Chrome菜单,将鼠标悬停在“ 更多工具”上,然后选择扩展程序来访问此页面。
  2. 选中“ 开发人员模式 ”旁边的框。
  3. 单击“ **加载解压缩的扩展名”,**然后为“ Hello扩展名”扩展名选择目录。

恭喜你!现在,您可以通过单击hello_world.png图标或按 Ctrl+Shift+F键盘来使用基于弹出窗口的扩展名。

接下来是什么?

  1. 遵循入门教程
  2. 阅读 概述
  3. 阅读Chromium博客以了解最新信息
  4. 订阅 铬扩展组

精选视频

技术视频
开发人员快照

根据CC-By 3.0许可提供的内容


评论