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

分类:前端,爬虫 2021-08-16T21:11:34    136人阅读   

本页面简要介绍了 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 群组
支付宝打赏 微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

服务器费用不足...

INSPINIA - 响应CRM后台模板 附加前端单页滚动模板

jquery顶部导航浮动二级菜单

svg旋转动画loading特效

5套响应式大型在线商城HTML5模板_各行业电商模板HTML框架 - MyStore

仿微信聊天主界面html

响应式图文博客网站HTML模板

手机短信验证码注册H5页面

网上书店HTML模板_Bootstrap网上书城电商HTML5模板 - BookStore

挂号预约手机端页面Vue代码

jquery产品介绍列表切换

unicorn后台管理模版

layui后台HTML框架管理系统模板

手机端邀请好友统计页面

微信助力活动模板 bootstrap框架手机网页模板

2048小游戏html代码

layui房产物业管理系统OA模板

仿天猫购物详情页h5页面

新闻列表jquery.SuperSlide整体切换

Bootstrap电商系统管理模板_换肤HTML5后台系统UI框架 - AdminDesigns1.5

3套CRM,CMS,etc系统后台模板 bootstrap数据管理页面 - Adminto v1.5

服务器费用不足...
 工具推荐 更多»