只需 5 分钟即可创建您的第一个超棒 Chrome 扩展程序！🔥🔥🔥（内含常见问题解答 🤔 => 😊）

常问问题

在这篇文章中，您将学习如何创建您的第一个 chrome 扩展程序，在每个主流浏览器中安装它，并获得指导您下一步的基础！

我们即将创建的扩展程序将显示一个随机笑话。扩展程序的名称为Joker。

步骤 1

准备一个新文件夹joker。首先创建manifest.json。它是任何扩展程序都需要的文件，也是入口点。将以下内容放入文件中：

{
  "manifest_version": 2,
  "name": "Joker",
  "description": "Why so serious?",
  "version": "1.0",
  "icons": { "128": "joker.png" },
  "browser_action": {
    "default_icon": "joker.png",
    "default_popup": "popup.html"
  }
}

大多数事情都是不言自明的。

让我们更仔细地看一下"browser_action"。这指定了，当我们点击扩展程序图标时，它会打开一个弹出窗口，该图标在扩展程序安装后会添加到浏览器的工具栏中。在弹出窗口中，我们将显示一个随机的笑话。

要查看可在此文件中指定的可能属性的完整列表，请参见此处。

现在让我们继续创建清单中指定的文件。

第 2 步

打开flaticon并查找您想要用于扩展程序的图标。确保图标大小为 128，png 格式。将图标另存为joker.png。

步骤3

popup.html使用以下内容创建：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Joker</title>
  <link rel="stylesheet" href="popup.css">
  <script src="popup.js"></script>
</head>

<body>
  <div id="joke"></div>
  <div id="one-more">Haha, one more!</div>
</body>

</html>

步骤4

现在，开始创作popup.css，让它变得漂亮起来！💁‍♀️

body {
  margin: 0;
  padding: 1em;
  min-width: 350px;
  background: #9550bb;
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 12px;
}

#joke {
  font-size: 3em;
}

#one-more {
  display: inline-block;
  cursor: pointer;
  font-size: 1.5em;
  margin-top: 1em;
  border-bottom: 2px solid;
}

#one-more:hover {
  border-bottom-color: transparent;
}

步骤5

创建popup.js我们需要的最后一个文件。

const getJoke = async () => {
  const joke = await fetch("https://icanhazdadjoke.com", { headers: { "Accept": "application/json" } })
    .then(response => response.json())
    .then(json => json.joke)
    .catch(() => "No Internet Connection");

  document.getElementById("joke").innerHTML = joke;
}

document.addEventListener("DOMContentLoaded", () => {
  getJoke(); // initial joke
  document.getElementById("one-more").addEventListener("click", getJoke);
});

步骤6

检查您是否拥有所有文件。请参阅http://github.com/penge/joker以获取参考。

您应该：

- manifest.json
- joker.png
- popup.html
- popup.css
- popup.js

步骤7

现在是时候在每个浏览器中尝试该扩展了！

铬合金：

打开chrome://extensions
单击“加载解压的版本”（如果没有看到按钮，请单击“开发者模式” ）
打开文件夹joker

火狐浏览器：

打开about:debugging#/runtime/this-firefox
单击加载临时附加组件...
打开文件夹中的任意文件joker

边缘：

打开edge://extensions
单击“加载解压后的文件”（如果没有看到按钮，请单击“开发者模式” ）
打开文件夹joker

歌剧：

打开opera://extensions
单击“加载解压的版本”（如果没有看到按钮，请单击“开发者模式” ）
打开文件夹joker

步骤8

享受扩展！🙂

常问问题

1. 我的扩展程序可以在任何操作系统和浏览器上运行吗？

您的扩展程序可在任何常见的操作系统（Windows、Linux、OSX、Chrome OS）以及任何支持Extensions API的基于 Chromium 的浏览器（Chrome、Edge、Opera）上运行，或使用WebExtensions API （一种常用 API）在很大程度上兼容的 Firefox浏览器上运行。只需进行少量甚至无需任何更改即可使其兼容，并且在其他地方看起来相同。

2. 有哪些好的入门资源？

您将非常乐意继续：

3. 我可以在哪里获得灵感？可以创作什么？有哪些可能性？

查看所有Chrome API的列表，它将为您提供有关可用 API 的良好概述，以及它们可以做什么的感觉，并且您可以基于它们进行创建。
检查清单文件格式摘要，因为这是每个扩展中的主要文件。

4. 文件夹结构是怎样的？

每个扩展都需要放在manifest.json根目录中。其他文件可以按您喜欢的任何方式组织。

5. 如何发布扩展程序？具体操作步骤是怎样的？

每个浏览器都有商店：

Chrome 网上应用店（一次性费用 5 美元；评论缓慢）
Firefox 附加组件（免费）
Edge 附加组件（免费）
Opera 插件（免费；立即发布）

然后，打包扩展程序（zip或crx）并提交审核。审核通过后，即可发布。

6. 有没有办法让扩展程序更快地发布？

一旦扩展程序处于待审核状态，您就无法中断或加快该流程（Web Store）。您可以做的是以某种方式开发扩展程序，以加快审核速度。以下是一些提示：

有良好的文档，描述所有必需和可选的权限，为什么需要它们，以及它们提供什么功能
如果可能的话，避免构建步骤（不进行转译、最小化、混淆）

7. 什么是必需权限和可选权限？

权限允许扩展程序使用一些有用的 API，并在此基础上构建一些功能。权限定义在中manifest.json。最常见的权限是“存储”和“标签”。完整列表请见。

将权限指定为必需意味着该权限在任何时候都需要才能正常运行（或提供基本功能）。另一方面，可选权限是一种很好的做法，表示只有当用户启用某些附加功能（通过复选框）时才需要这些权限。

8. 开发扩展的最佳方法是什么？

没有最好的方法。请根据你的需求选择合适的工具包。它可以是：JavaScript、JavaScript 模块、Typescript、带依赖项、不带依赖项、带 bundler 或不带 bundler。

没有构建步骤的好处是显而易见的：更容易、更快地开发、调试、发布和审查。

9. 哪里可以找到一些好的图标？

参见flaticon。

10. 扩展程序必须有弹窗吗？还有其他什么类型的 UI 可以实现？

弹出窗口是可选的。实际上，任何 UI 都是可选的。甚至可能存在一个根本没有 UI 的扩展程序！

除了弹出窗口之外，显示某些内容的其他方式是在新选项卡中（例如当用户单击工具栏图标时），或者用某些内容覆盖任何新选项卡。

让我们看看Joker可以如何改进！

更多笑话（更多 API）
按类别分类的笑话
离线笑话（json文件）
将笑话保存到收藏夹（稍后可以查看）
分享笑话（如果来自 API）
主题

感谢阅读！希望你玩得开心，学到新东西！ 🙂

GitHub 上的 Joker
网上商店上的 Joker

文章来源：https://dev.to/penge/create-your-first-awesome-chrome-extension-in-just-5-minutes-faq-included-2n5p

只需 5 分钟即可创建您的第一个超棒 Chrome 扩展程序！🔥🔥🔥（内含常见问题解答 🤔 => 😊）常见问题解答

只需 5 分钟即可创建您的第一个超棒 Chrome 扩展程序！🔥🔥🔥（内含常见问题解答 🤔 => 😊）

常问问题

步骤 1

第 2 步

步骤3

步骤4

步骤5

步骤6

步骤7

步骤8

常问问题