第一个 Chrome 扩展 - "操作指南"

• 下载源代码 - 5.8 KB

引言

我最近才开始接触 JavaScript 和 Web 开发，这对我这样一个主要从事后端数据库 C# 开发、大部分开发生涯都花在后台程序和服务上的开发者来说，简直是全新的世界。

所以请不要评判我在这篇文章中 "JavaScript 的质量"，我在这里是个新手，很有可能可以用更优雅/更简洁的方式来写。当然，如果你比我更懂 JavaScript（这并不难！:))，我将非常感谢任何建议。

背景

我有一个用 JavaScript 写的小工具，是为我女儿学校的功课写的，可以帮助计算德语中所说的 "Schlussrechnung" - 我在网上找到的最佳翻译是 "rule of three"（三法则）。

虽然我之前可以将它托管在我的网络空间上，但我认为，将其作为一个小弹出窗口，位于 Chrome 的右上角，作为一个扩展程序，会更加优雅。不幸的是，Google 网站上的 "第一个扩展程序" 教程并没有解释如何处理事件处理器以及 "内联脚本" 究竟意味着什么。所以我不得不深入研究一下。在搜索了一些教程并整合了各种信息后，我终于开发出了一个可用的 Chrome 扩展程序 "X-Calc"，今天我想与大家分享。

如何开始

编写自己的 Chrome 扩展程序并不难。你需要的最小文件是：

• 一个名为 "manifest.json" 的文件，它定义了你的扩展程序（我稍后会讲到）。
• 你的主 HTML 文件，在本例中，是 "xr.html" 文件。
• 你的 JavaScript 文件（请将其与 HTML 分开！），这里我们使用 "xr.js"。
• 一个 .png 文件，作为你扩展程序的工具栏图标。尺寸：19x19px。
• 一个 128x128px 的 .png 文件，作为你扩展程序的 Chrome 网上应用店图标。
• 如果你计划创建 "选项" 页面，你需要一个单独的 .html 文件用于选项。

将这些文件放在硬盘上的一个新文件夹中。就这些！
在我的例子中，我还添加了一个小的 .CSS 样式表文件，但这更多是我学习阶段的产物。

所以你的目录结构看起来会是这样的

manifest.json

此文件是 Chrome 与你的 html/js 文件之间的链接。它包含扩展程序的名称、描述、区域设置、图标、策略、权限、主文件（点击扩展程序按钮时启动的文件）以及运行你的扩展程序所需的所有技术细节。

这个文件显示了该文件的最小内容

• 名称、描述、图标
• 启动主文件
• 添加右键菜单项 "选项..." 所需的代码

{
  "manifest_version": 2,

  "name": "X-Calc",
  "description": "Calculates the missing value. Enter 3 values, 
                  leave any text box blank. X-Calc will calculate the missing value.",
  "version": "1.0",
  "offline_enabled": true,
  "icons": {
    "128": "xr128.png"
  },
  "options_ui": {
    "chrome_style": true,
    "page": "xroptions.html"
  },
  "browser_action": {
    "default_icon": "xr.png",
    "default_popup": "xr.html"
  }
}

我们一行一行地讨论，以便你了解你在做什么

• "manifest_version": 2 -- 这是 Google 设置的当前清单版本
• "name": "X-Calc" -- 你的扩展程序的名称，将显示在 Chrome 网上应用店中
• "description": "free-text...", -- 输入你的扩展程序的简要描述。最多 132 个字符。不允许使用 HTML。
• "version": "1.0", -- 你的版本字符串。
•  
• "offline_enabled": true, -- 如果你的扩展程序不需要互联网连接，请将其设置为 true
• "icons": {
• "128": "xr128.png" -- Chrome 网上应用店图标文件的文件名。
• },
•  
• "options_ui": {
• "chrome_style": true,
• "page": "xroptions.html" -- 你的选项页面的 HTML 文件。会生成一个漂亮的 Chrome 弹出窗口
• },
•  
• "browser_action": {
• "default_icon": "xr.png", -- 此图标显示在 Chrome 扩展程序区域的右上角。19x19px
• "default_popup": "xr.html" -- 这是点击扩展程序按钮时将加载的 HTML 页面。
• }

当然，"options_ui" 部分是可选的。我的扩展程序不需要任何选项，我只是将其包含在此作为演示。当你右键单击我的扩展程序时，会出现一个 "选项" 菜单项（由这个 "options_ui" 标志引起），并且选项页面会在一个漂亮的 Chrome 风格弹出窗口中打开。

你的第二个选择是，如果你不想要这样的 Chrome 风格的选项页面，可以将 "options_ui" 替换为以下一行，添加到你的 manifest.json 文件中：

"options_page": "xroptions.html",

然后你的选项对话框将作为一个新标签页在 Chrome 中打开。
如果你不添加任何 "options" 到你的 manifest 中，扩展程序将没有 "选项" 菜单项，这对于许多小型扩展程序来说也是可以的。

要了解 manifest.json 文件允许/可能做什么，请查看 Google manifest 文件格式，我发现它有点长，但仍然很有用。

xr.htm 和 xr.js

我学到的一个重要一点是，你必须将 JavaScript 代码与 HTML 分开，无论你的应用程序有多么 "微小"。Google 不允许内联脚本，也就是说，脚本直接放在 .html 文件中。
没有办法软化这个政策。

在 HTML 中定义按钮或控件时，也不允许使用 onclick="buttonClicked" 语法。你必须以不同的方式挂载你的事件。对于 onkeypress 以及所有其他易于连接的 JavaScript 事件也一样。解决这个问题的方法（也是这篇教程文章的主要原因之一）可以在 xr.js 文件的末尾找到。

在移除了脚本后，我的 xr.html 文件中只剩下文本框、按钮和一些基本样式（我不是 CSS 专家，请原谅我 :)）。
你可以随心所欲地设计任何 HTML 页面，Chrome 都会打开它。

脚本部分并不复杂，所以我在这里删减了代码以减小文件大小，因为我想专注于这个最重要的部分：挂载事件。

看看这是怎么做的

function CheckKey(e) {
    // Just waiting for ENTER key...
}

function Clear() {
    // Clear all text boxes and set the background color back to white...
}

function Calculate() { 
    // Calculate the rule of three...
}

// This is, what we want to focus on:
function onLoad() {
  
  // This is, how you hook to events in a Chrome Extension:
  // Basically, like document.getElementById, just put a hash # in front of your control's id
  document.querySelector('#calc' ).addEventListener('click', Calculate);
  document.querySelector('#clear').addEventListener('click', Clear);
  
  document.querySelector('#LT').addEventListener('keypress', CheckKey);
  document.querySelector('#RT').addEventListener('keypress', CheckKey);
  document.querySelector('#LB').addEventListener('keypress', CheckKey);
  document.querySelector('#RB').addEventListener('keypress', CheckKey);
}

// You have to hook on 'DOMContentLoaded' which is raised, when the extension has 
// loaded your page. I call my method "onLoad" here.
document.addEventListener('DOMContentLoaded', onLoad);

你必须在页面加载后手动添加事件监听器。.html 文件中不允许内联内容。

将扩展程序加载到 Chrome

要加载/测试你的扩展程序，你有两个选择：

1. 将你的 Chrome 置于 "开发者模式"。这可以通过打开 chrome://extensions/ 并勾选顶部的 "开发者模式" 复选框来完成。

   

2. 从 Chrome 网上应用店获取 Chrome Apps and Extension Developer Tool，它在重新加载和查看错误消息时会提供一些帮助。

   

在这篇文章中，我将使用 Apps and Extension Developer Tool，因为我发现它确实是一个有用的小工具。
(我将从现在开始称这个很长的工具名称为 Apps-Tool。)

当你第一次打开 Apps-Tool 时，它会在顶部显示两个选项卡：应用和扩展程序。

选择 "扩展程序" 选项卡，然后点击 "加载已解压的扩展程序" 按钮。这允许你将任何包含至少一个 manifest.json 文件的文件夹直接加载到 Chrome 中。
如果你的 manifest 文件中有任何错误，它们会立即显示出来。

当你成功加载了你的扩展程序后，Apps-Tool 会像这样显示它为 "已解压"

看到左上角的那个拼图图标了吗？这就是如果你在 manifest 文件中省略了 "icons" "128" 部分时，你的扩展程序的样子！一旦你添加了它（当然，并且在文件夹中有图像文件），你就会看到当你的扩展程序从 Chrome 网上应用店加载时它的样子。

现在打开你的 Chrome 浏览器。可能会有一个关于 "停用未打包的扩展程序" 的警告 - 当然，你选择 *不* 停用它们 :)。你的扩展程序应该出现在 Chrome 的右上角，也就是扩展程序工具栏。

显示的图标是你为 "browser_action" 的 "default_icon" 在 manifest 文件中设置的图标。

现在试试吧！右键单击图标查看 "选项" 菜单项，或者直接单击按钮，让扩展程序从 manifest 文件中打开其 "default_popup" 页面。

处理错误

这就是我发现 Apps-Tool 非常有用的地方。为了演示，我在我的 JavaScript 程序中添加了一些错误。当扩展程序运行时发生任何错误时，Apps-Tool 会记录这些错误，甚至提供一个 "查看详情" 链接，直接跳转到代码并用红色显示错误行！

这就是为什么我喜欢这个工具，尤其是因为它帮助我这个 JavaScript 的纯新手解决了一些问题。

当您点击 "查看详情" 时，会显示错误

我希望这个小教程能帮助你开始创建自己的 Chrome 扩展程序。对我来说，这只是个开始，我有点 "尝到了血的滋味，现在想要更多……更多更多……"，也许外面也有人有类似的的想法，正在考虑如何开始，也许这能帮助到那个人！

下一步该怎么做...

好了，如果你完成了你的扩展程序，就该把它 "打包"（打包成一个 .zip 文件）并上传到 Chrome 网上应用店，这样其他人就可以下载和使用了。

这一步需要注册一个 Google 开发者账户，并支付一次性 5 美元的费用。

市面上有许多关于是创建专门的开发者账户还是使用个人账户更好的文章。我强烈建议你稍微搜索一下网络，了解什么最适合你的需求。

我既不建议 "创建专用账户"，也不建议 "使用个人账户"。说实话，我自己也还没有决定。仍在考虑什么才是最好的。我应该创建一个开发者账户并将其注册用于 Chrome 和 Android 吗？我应该保持简单，使用我的个人账户吗？但是我在 Google Cloud 中有 *大量的数据和文件*，我的整个家庭都在云端，我们使用电话号码（双重认证）保护了账户，我不认为我希望账户公开。另一方面，当我需要作为我的 "开发者身份" 做事情时，切换账户就很麻烦……

在我看来，这是一个你应该花时间认真考虑的主题。发布本身并不难——难的是发布 *之前的* 步骤。你必须做出的决定。

祝你一切顺利，也许可以在这里留下你的第一个已发布扩展程序的链接！

欢迎讨论和留言，分享你的方法。你创建了专用账户吗？分享你的想法，也许它们也能帮助其他新手做出决定。

历史

• 2015-05-04 发布
• 2015-05-05 修正了一些拼写错误和损坏的图片链接