翻译 

chrome谷歌浏览器扩展插件官方文档 之 什么是扩展及hello world

分类:前端,爬虫    630人阅读    IT小君  2021-08-16 21:11

本页面简要介绍了 Chrome 扩展程序,并逐步介绍了“Hello, World!” 扩展 的创建过程

 关于扩展

扩展程序是自定义浏览体验的小型软件程序。它们让用户可以通过多种方式定制 Chrome 的功能和行为,提供以下内容:

  • 生产力工具
  • 网页内容丰富
  • 信息聚合
  • 乐趣和游戏

这些只是扩展可以做的许多事情的几个例子。请参阅Chrome 网上应用店以查看数千个已发布扩展程序的不同示例。

 扩展如何工作?

扩展是基于 Web 技术构建的,例如 HTML、JavaScript 和 CSS。它们在单独的沙盒执行环境中运行,并与 Chrome 浏览器交互。

扩展允许您通过使用 API 修改浏览器行为和访问 Web 内容来“扩展”浏览器。扩展通过最终用户 UI 和开发人员 API 进行操作:

扩展用户界面 这为用户提供了一种一致的方式来管理他们的扩展。

扩展的API允许浏览器本身的扩展的代码访问功能:激活标签,修改网的请求,等等。

要创建扩展程序,您需要组合构成扩展程序的一些资源——清单、JavaScript 和 HTML 文件、图像等。对于开发和测试,您可以使用扩展开发者模式将这些“解压”加载到 Chrome 中一旦您对您的扩展程序感到满意,您就可以将其打包并分发给用户

 用户如何获得扩展?

大多数 Chrome 用户从Chrome Web Store获得扩展程序世界各地的开发人员在 Chrome 网上应用店中发布他们的扩展程序,在那里进行审查并向最终用户提供。

某些组织使用企业策略在其用户的设备上安装扩展程序。这些扩展程序可以从 Chrome 网上应用店获取或托管在组织的网络服务器上。

您可以通过Chrome Developer Dashboard分发您的扩展程序,将它们发布到Chrome Web Store有关详细信息,请参阅 Chrome 网上应用店开发人员文档

 关于扩展政策的说明

Chrome 网上应用店中的扩展程序必须遵守Chrome 网上应用店政策在开始时,请记住以下几点:

  • 扩展必须满足一个定义狭窄且易于理解单一目的单个扩展可以包含多个组件和一系列功能,只要一切都有助于实现一个共同的目的。
固定 AMP 验证器扩展的屏幕截图
  • 用户界面应该是最小的并且有意图。它们的范围可以从一个简单的图标,例如上面显示的 AMP 验证器] amp-validator扩展,到打开一个带有表单的新窗口,例如下面显示Google 类似页面扩展。
Google 类似页面扩展的屏幕截图

 hello world Extensions 扩展

使用这个快速的 Hello Extensions 示例向扩展迈出一小步。首先创建一个新目录来存储扩展的文件,或者从示例页面下载它们

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

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

每个扩展都需要一个清单,尽管大多数扩展只使用清单不会做太多事情。对于此快速入门,该扩展程序在action字段下声明了一个弹出文件和图标

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

hello_extensions.png 右键保存 下 载,然后创建一个名为 的文件hello.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": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  },
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+F",
        "mac": "MacCtrl+Shift+F"
      },
      "description": "Opens hello.html"
    }
  }
}

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

  1. chrome://extensions在浏览器中导航到您还可以通过单击多功能框右上角的 Chrome 菜单,将鼠标悬停在更多工具上并选择扩展程序来访问此页面
  2. 选中Developer Mode旁边的框
  3. 单击Load Unpacked Extension并选择“Hello Extensions”扩展的目录。

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

 接下来是什么?

  1. 遵循入门教程
  2. 探索扩展示例
  3. 订阅Chromium-extensions Google 群组
点击广告,支持我们为你提供更好的服务

html5 svg夜空中星星流星动画场景特效

有机水果蔬菜HTML5网站模板

html5图标下拉搜索框自动匹配代码

小众时尚单品在线电子商务网站模板

css鼠标跟随文字模糊特效

响应式太阳能能源公司网站模板

响应式咖啡饮品宣传网站模板

html5 canvas进度条圆环图表统计动画特效

HTML5数字产品服务公司网站模板

html5 canvas彩色碎片组合球形旋转动画特效

HTML5现代家居装潢公司网站模板

响应式时尚单品在线商城网站模板

js+css3抽奖转盘旋转点餐代码

中小型创意设计服务公司网站模板

HTML5 Canvas竖直流动线条背景动画特效

现代时尚家具公司网站模板

jQuery右端悬浮带返回顶部特效

网页设计开发公司网站模板

canvas炫酷鼠标移动文字粒子特效

css+js实现的颜色渐变数字时钟动画特效

点击广告,支持我们为你提供更好的服务
 工具推荐 更多»
点击广告,支持我们为你提供更好的服务