admin管理员组文章数量:1538733
chrome app开发
- 一 概述
- 二 开发流程
- 第1步：创建清单
- 第2步：创建后台脚本
- 第3步：创建一个窗口页面
- 第4步：创建图标
- 第5步：启动您的应用
- 打开浏览器可扩展api选项
- 加载您的应用
- 执行应用
转载自 https://developer.chrome/apps/first_app
一 概述
chrome 提供了一个强大的api开发库，依赖于chrome谷歌浏览器，可以轻松开发chrome插件。笔者刚好需要开发usb管理多个个插件，找了很多资料，最终决定使用chrome的api来实现。
二 开发流程
第1步：创建清单
首先创建一个新文件夹 newProject，以下都是在此文件夹下创建
创建manifest.json文件（Formats：Manifest Files 详细描述了这个清单）：
{
“name”: “Hello World!”,
“description”: “My first Chrome App.”,
“version”: “0.1”,
“manifest_version”: 2,
“app”: {
“background”: {
“scripts”: [“background.js”]
}
},
“icons”: { “16”: “calculator-16.png”, “128”: “calculator-128.png” }
}
指定了创建窗口的名称 描述 版本 和 加载的后台脚本文件
第2步：创建后台脚本
接下来创建一个background.js 使用以下内容调用的新文件：
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create(‘window.html’, {
‘outerBounds’: {
‘width’: 400,
‘height’: 500
}
});
});
指定chrome创建的窗口执行的脚本文件为 window.html，可以自己按需求修改对应名称。
在上面的示例代码中，onLaunched事将在用户启动应用程序时触发，然后立即打开一个指定宽度和高度的应用程序窗口。
第3步：创建一个窗口页面
创建window.html文件：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>Hello, world!</div>
</body>
</html>
第4步：创建图标
把应用的图标复制到当前文件夹下，作为chrome应用的显示图片。
第5步：启动您的应用
打开浏览器可扩展api选项
许多Chrome Apps API仍处于试验阶段，因此您应该启用可扩展API，以便您可以尝试使用它们：
- 打开谷歌浏览器
- 在地址栏输入：chrome:// flags
- 找到可扩展api选项，enabel
- 重新启动谷歌浏览器
加载您的应用
打开谷歌浏览器，点击左上角的 选项->更多工具->扩展程序
确保打开开发者模式：
然后可以看到：
点击 加载已解压的扩展程序，选择刚开始创建的文件夹 newProject
执行应用
添加完成，点击浏览器左上角菜单，出现创建的应用程序
点击图标就可以打开应用。
版权声明：本文标题：chrome app之创建第一个开发程序 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1726983816a1093115.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论