65.9K
CodeProject 正在变化。 阅读更多。
Home

开发和发布 Chrome 应用

Sumanta Mishra
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.20/5 (3投票s)

2016年1月14日

CPOL

6分钟阅读

viewsIcon

15454

本技巧指南介绍如何开发一个基础的 Chrome 应用，在 Chrome 中本地运行，以及发布到 Chrome Web Store。

引言

就像 iOS 和 MacOS 应用的 Apple Store、Android 应用的 PlayStore 一样，Google 也推出了自己的 Chrome Web Store。考虑到开发复杂桌面应用日益增长的需求和技术可行性，开发者们正对 Chrome 应用开发表现出浓厚的兴趣。

Chrome 应用和 Chrome 扩展的区别

Chrome 应用 通常被称为打包应用 (packaged app)，可以直接从您的 PC 运行，除非应用程序本身需要，否则不一定需要互联网连接。打包应用以 .crx 格式打包，这是一种特殊的 ZIP 存档。这些包包含一些必需的文件以及应用所需的资源。您可以通过在 Chrome 浏览器的地址栏中输入 "chrome://apps/" 来查看所有已安装的 Chrome 应用列表。

Chrome 扩展 在开发、打包和安装过程方面与 Chrome 应用非常相似。但正如其名称（扩展）所示，它们可以修改或扩展 Chrome 浏览器的功能，因为它们可以访问 Chrome API。一个主要区别是，扩展可以在扩展栏中添加一个按钮，用作扩展的快捷方式。您可以通过在 Chrome 浏览器的地址栏中输入 "chrome://extensions" 来查看 Chrome 扩展列表。本文不涉及扩展的内容。

必备组件

如果谈论开发 Chrome 应用的先决条件，它需要：

  • 在您的系统上安装 Chrome 浏览器
  • 一款支持 HTML、JavaScript 和 CSS 等的良好文本编辑器
  • 了解 HTML、JavaScript、CSS 以及任何您偏好的 JavaScript 框架（如果您的应用需要）

Chrome 应用的组成部分

Chrome 应用包内所需的四个基本项：

  • manifest（清单）
  • background script（背景脚本）
  • icon files（图标文件）
  • source code for the app（应用源代码）

如何创建 Manifest

Manifest 文件的名称应为 manifest.json。manifest.json 的结构应如下所示：

{
"manifest_version": 2,
"name":
"HelloWorldApp",
"short_name":
"HelloWorldApp",
"description": "",
"version": "0.0.1",
"minimum_chrome_version":
"38",
 
"icons": {
"16":
"assets/icon_16.png",
"128":
"assets/icon_128.png"
},
 
"app": {
"background": {
"scripts":
["background.js"]
}
}
}

上面 JSON 的属性将在下面进行解释：

  • name 和 shortname 属性是应用程序的名称。
  • icons 属性需要 16x16 和 128x128 像素尺寸的图标文件名，并且路径应在 JSON 的 "icons" 属性对应的位置标明。
  • scripts 属性接受一个数组，其中应包含 "background.js" 文件名。
  • 其他属性不言而喻。

如何创建背景脚本文件

推荐的背景脚本文件名是 background.js。背景脚本文件的结构应如下所示：

chrome.app.runtime.onLaunched.addListener(function(launchData)
{
chrome.app.window.create(
'index.html',
{
id: 'mainWindow',
bounds: {width: 800, height: 600}
}
);
});

当应用程序启动时，会触发一个 chrome.app.runtime.onLaunched 事件，它会查找启动器 HTML 文件，在本例中是 "index.html"。Bounds 属性接受应用程序窗口的 width（宽度）和 height（高度）。

还有其他一些事件，例如 chrome.runtime.onInstalled 和 chrome.runtime.onSuspend，可以在背景脚本文件中设置相应的处理程序。

如何准备图标文件

建议提供两张图片。一个图标尺寸为 16x16 像素，另一个为 128x128 像素。如果没有，那么两个图标尺寸都为 128x128 像素，Chrome 会根据需要进行缩放。它接受各种图像格式，但 PNG 格式效果最好，因为它支持透明度。

应用程序的源代码

这基本上是您的应用程序包所需的 HTML、JavaScript、CSS 文件以及其他资源，如音频、视频等。

开发 Chrome 应用的 IDE

我使用了两种方式来开发、测试和运行 Chrome 应用：

选项一

  1. 使用任何支持 HTML、JS 和 CSS 智能提示的编辑器。
  2. 准备所有必需的项。
  3. 按照启动您的应用部分所述的手动过程运行构建。

选项二

这是创建新项目并在 Chrome 中启动的最简单方法。Google 发布了一款名为Chrome Dev Editor 的 Chrome IDE。这个编辑器使得 Chrome 应用的创建和运行变得容易。以下是创建项目和运行的几个步骤：

第一步：访问 Web Store，搜索 Chrome Dev Editor，并将其添加到 Chrome。

第二步：启动 Chrome Dev Editor。

第三步：转到主菜单（左上角），然后单击“新建项目”。这将打开下面的对话框：

输入项目名称，然后从下拉列表中选择“JavaScript Chrome App”。

第四步：然后单击“CREATE”按钮。这将创建一个新的 Chrome 应用项目，其中包含所有必需的文件。

开发过程中需要注意的事项

使用 HTML、JavaScript 和 CSS 开发 Chrome 应用与开发 Web 应用有所不同。以下是开发 Chrome 应用时需要注意的几点：

  • HTML 页面中的任何类型的 JavaScript 都不起作用。
  • <script> 标签内的 JavaScript 不起作用。JavaScript 仅在写入独立的 .js 文件并使用以下方式导入时才起作用：
    <script src="main.js"></script>
  • 内联事件处理程序，如 onclick、onload 等，不起作用。需要使用 JavaScript 中的 querySelectors 来声明。内联事件处理程序的示例：
    <body onload="onloadHandler()"></body>
<div onclick="onClickHandler()"></div>
  • <a> 标签导航不起作用。
  • 对外部资源的访问受到限制。例如，将在线图片的路径分配给 <img> 标签不起作用。要访问图片，需要将该图片保存在应用包内，或者将该图片加载为 blob 并分配给 <img> 标签。
  • HTML 的 alert 不起作用。要显示任何对话框，需要使用自定义对话框或 bootstrap 对话框。
  • 嵌入任何对象，如 Flash 对象，不起作用。

启动您的应用

如果您使用 Chrome Dev Editor，只需单击一下即可。通过单击“运行”按钮（位于编辑器左上角），构建的应用就会启动。

要手动启动 Chrome 应用，则需要遵循以下步骤：

  • 在 Chrome 浏览器中打开 "chrome://extensions"。
  • 勾选 "Developer Mode"（开发者模式）复选框以启用开发者模式。
  • 单击 "Load unpacked extension…"（加载未打包的扩展...）按钮。
  • 浏览并选择应用程序文件夹，然后单击“OK”（确定）。应用程序将列在扩展页面上。
  • 通过单击“Launch”（启动）按钮来启动应用程序。

在 Chrome Web Store 中发布您的应用

要发布您的 Chrome 应用，Google 会收取 5 美元的费用，这是一次性费用，用于使用 Chrome Web Store。除了费用外，如 Chrome 开发者网站所述，还需要遵循一些步骤：

  1. 创建应用的 zip 文件。
  2. 登录 Chrome 开发者控制台。
  3. 上传您的应用（上传 .zip 文件，而不是 .crx）。
  4. 选择一个支付系统（如果您的应用不是免费的）。如果您的应用是免费的，则可以跳过此步骤。
  5. 获取应用限制并完成应用的编码。
  6. 获取应用 ID。
  7. 获取 OAuth 令牌。
  8. 完成应用。
  9. 提供商店内容。
  10. 支付开发者注册费。
  11. 发布您的应用。

在 Chrome 开发者文档中可以找到有关发布 Chrome 应用的更详细文档。

欲进一步阅读，请参阅 Chrome 开发者文档。

© . All rights reserved.