Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chrome 扩展 : 扩展是什么? #84

Open
XXHolic opened this issue Apr 24, 2021 · 0 comments
Open

Chrome 扩展 : 扩展是什么? #84

XXHolic opened this issue Apr 24, 2021 · 0 comments

Comments

@XXHolic
Copy link
Owner

XXHolic commented Apr 24, 2021

目录

引子

按照 Chrome 扩展 : 欢迎中的引导,接触到的相关介绍。

扩展是什么?

本页简要介绍了 Chrome 扩展,并介绍了如何创建一个 “Hello,World!” 扩展。

关于扩展

扩展是定制浏览体验的小型软件程序。它们允许用户以多种方式定制 Chrome 的功能和行为,例如:

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

这些只是扩展可以做的许多事情的几个例子。在 Chrome 网络商店 中可以看到成千上万个不同的已发布扩展示例。

扩展是如何工作的?

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

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

扩展用户接口 :这为用户管理其扩展提供了一致的方法。

扩展 API :扩展 API 允许扩展的代码访问浏览器本身的功能:激活选项卡、修改网络请求等等。

要创建扩展,你需要组装一些资源 -- 一个 manifest、JavaScript 和 HTML文件、图像和其它资源 -- 这些资源组成了扩展。对于开发和测试,你可以使用 扩展开发人员模式 将这些“未打包”加载到 Chrome 中。一旦你对扩展感到满意,就可以打包并分发给用户

用户如何获得扩展?

大多数 Chrome 用户从 Chrome 网络商店 获得扩展。全球的开发者在 Chrome 网络商店中发布他们的扩展,在那里扩展被审查并提供给终端用户。

你可以通过 Chrome 开发人员仪表板分发扩展,并将其发布到 Chrome 网络商店。有关更多信息,请参阅 Chrome 网络商店开发者文档

关于扩展原则的一个注意事项

Chrome 网络商店上的扩展必须遵守 Chrome 网络商店政策。在你开始时,请记住以下几点:

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

81-policy1

  • 用户界面应该是尽可能的小且能表达意图。它们可以是一个简单的图标,比如上面显示的 AMP validator 扩展,也可以是打开一个新窗口的表单,比如下面显示的 Google Similar Pages 扩展。

81-policy2

Hello extensions

通过这个快速的 Hello extensions 示例,初步进入扩展。首先创建一个新目录来存储扩展名的文件,或者从示例页下载它们。

接着,创建名为 manifest.json 的文件,并包含以下代码:

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

每个扩展都需要一个 manifest ,尽管大多数扩展仅仅依靠 manifest 做不了多少事情。对于此快速开始,扩展在 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 菜单,将鼠标悬停在更多工具上并选择扩展程序来访问此页。

81-step1

  1. 开启开发者模式
  2. 点击加载已解压的扩展,选择“ Hello Extensions ”扩展的文件夹。

81-step2

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

译者注

个人在按照文档做的时候,觉得有些地方漏了,添加了些补充:

  • 加载了扩展,默认图标是不展示的,需要点击地址栏右边的扩展图标才能找到扩展。

81-extensions

  • 按照上面的介绍,是需要一步一步自己添加,这是完整版本示例,该示例中由于由于配置了 background 字段,所以在浏览器加载了扩展后,会马上打开一个 Tab 页面。

接下来呢?

  1. 接着入门教程
  2. 探索扩展示例
  3. 订阅 chromium-extensions Google group

参考资料

🗑️

很早的时候就听闻了《DARK SOULS™ III》,我也很早买了这个游戏,也是在打骨折的时候买的。

前段时间终于开始玩了,经过了 4 个小时之后,最后决定还是要抽专门的时间玩才行。原因有:

  • 这个游戏机制之前从来没有接触过,跟之前接触的动作类游戏很不一样,操作要练习。
  • 对于没玩过这个,有些地方很容易被小怪阴死,看着像小怪,上去几下就被干死。
  • 一旦死亡或者在休息点恢复,当前场景下所有的怪都会重新刷新,这让我有些难受,推进剧情较费时。
  • 主线剧情没有明确的引导,走错路很容易被怪干死,想靠自己开荒探索,感觉不切实际,难以体验到游戏的乐趣。

81-poster

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant