Note: 一个初步的 Chrome Packaged App 写法

chanjarster 发布于2019-07-25 13:22 / 2577人阅读

摘要：主要看文档里的两个页面代码基本上和官方给的一样我放在仓库里了后面就记一些我关心的点了资源相对路径问题首先是目录结构主要是文件我没有放在根目录然后是注意这里的相对路径是从根目录而不是路径作为基准的和插件的启动方式不同不能通过声明一般扩展是

主要看 Chrome App 文档里的两个页面:
Chrome App Lifecycle
Create Your First App

代码基本上和官方给的一样, 我放在仓库里了:
https://code.csdn.net/jiyinyiyong/demo-packaged-app/tree/master
后面就记一些我关心的点了:

资源相对路径问题

首先是目录结构, 主要是 HTML 文件, 我没有放在根目录:

➤➤ tree
.
├── README.md
├── css
│   └── main.css
├── html
│   └── app.html
├── js
│   ├── bg.js
│   └── main.js
└── manifest.json

3 directories, 6 files

然后是 js/bg.js, 注意这里的 HTML 相对路径,
是从 app 根目录而不是 bg.js 路径作为基准的:

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create("html/app.html", {
    "bounds": {
      "width": 400,
      "height": 500
    }
  });
});

Packaged App 和插件的启动方式不同, 不能通过 manifest.json 声明,
一般扩展是需要手动声明使用版本的, 这里的例子不用..

然后是 app.html, 注意, 这里 JS CSS 又是根据文件的相对路径来的:




  APp
  
  


hello APp

之所以特别关注相对路径, 是因为 HTML 会是 Jade 生成的, 不方便任意使用路径,
设置为了 HTML 能在 App 或者 server 同时运行, 必需事先了解.

开启 DevTools

App 的调试需要在 chrome://flags 开启对应的选项, 否则没有 DevTools..

Find "Experimental Extension APIs", and click its "Enable" link.

页面的 Reload

App 打开后, 似乎屏蔽了刷新的机制, 只能从页面上手动触发..
Console 调用 location.reload() 无法对页面进行刷新
还好, chrome.runtime.reload() 还是能正常使用的.
https://developer.chrome.com/extensions/runtime#method-reload

还有需要注意的是, App 的权限和 Extension 不同, Extension 里获取不到 App
就是说, 我用 Chrome Extension 来 reload 这个 App 就不成功了.
不过 App 的一个好处可以直接使用 TCP, 这就有可能通过网络检测自动刷新页面了...
http://developer.chrome.com/apps/app_network

GPU云服务器云服务器计算机的初步学习 Packaged 红米note3手机的云服务器 sql的写法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/39063.html

Chrome Packaged App的一些坑

摘要：私有，元素和子元素的文本将不可选，但是，子元素可以通过重设回可选。当内容过长时无法向下滚动解决方法最近在写Http Craft——一个开源HTTP请求模拟的Chrome App过程中遇到了一个头疼的问题，作为一个CSS挫人，记录一下无法对应用内的文本进行选择无法对应用内的文本进行选择（input和textarea可以选择）解决方法：需要向css样式中添加如下样式 bod...

GitChat 2019-08-28 17:55 评论0 收藏0
Spring Boot 2.0 外部化配置介绍

摘要：可以使用外部化配置来方便在不同环境的运行同样的程序文件文件环境变量命令行参数内置顺序实现了很多按以下顺序进行合理的相同属性的覆盖目录下的全局设置属性，如果激活测试用例上的注解测试用例上的注解。简介在应用中管理配置并不是一个容易的任务，尤其是在应用需要部署到多个环境中时。通常会需要为每个环境提供一个对应的属性文件，用来配置各自的数据库连接信息、服务器信息和第三方服务账号等。通常的应用...

lmxdawn 2019-08-16 13:38 评论0 收藏0
初步整理的关于 Progressive Web Apps 的资料

摘要：在上看到发的视频被狂转开始注意之前几乎对这个词语没有印象看到是在的演讲还以为是新技术在上找一下这次好多个视频是关于的视频的内容主要是讲网站优化分别用做例子可惜没有大概要等小右补方案应该没有问题从视频看优化的效果非常显著本来好几秒的在 Twitter 上看到 Addy Osmani 发的视频被狂转, 开始注意https://twitter.com/addyosmani/status/7...

luffyZh 2019-08-19 18:24 评论0 收藏0
spring boot学习(6)— 配置信息及其读取优先级

摘要：优先级如下使用文件使用文件，会根据以下目录去寻找，添加到中，优先级依次递增。目录下目录工程根目录工程跟目录下的目录加载顺序从优先级高的先加载。属性值怎么取优先级高的会覆盖优先级低的。但是在同等目录下，优先级高于文件的配置信息。 1. properties 信息从哪里取在不同的环境，我们需要使用不同的配置，Spring boot 已经提供了相关功能，可以是 properties 文件，...

stormzhang 2019-08-16 16:15 评论0 收藏0
Java Service Provider Interface

摘要：之前的作用范围其中驱动通常使用来引入所需要的驱动。在编译期间不用引入具体的具体实现类不管还是等。所以包的应该设置为。用于从中找到接口的实现类。文件中有两个驱动名。而不是通过来找实现类的。是通过找一个固定包下的固定类类而是找固定文件下的内容。之前 maven 的runtime作用范围 showImg(https://segmentfault.com/img/remote/1460000...

jaysun 2019-08-16 12:30 评论0 收藏0