如何在Chrome扩展程序中配置Ember路由？

Question

我们正在使用Ember CLI开发Chrome扩展程序，但由于Index路由未正确触发，因此很难让路由/资源与Chrome良好匹配。

我们采取的步骤：

通常情况下，如果Ember应用程序托管在服务器上，那么前往Ember为应用程序提供服务的地方（如hxxp：// localhost：4200 / ）将加载应用程序，并且所有路由都会挂起。

但是，由于它是Chrome扩展程序，因此在使用空路径时不会加载index.html ，因此转到chrome-extension：//（extension_id）/会出现错误'找不到此网页'，因为我认为Chrome默认情况下不会重定向到index.html 。

如果您将扩展名指向chrome-extension：//（extension_id）/ index.html，则会加载Ember应用程序，但是Ember会给出错误：

Uncaught UnrecognizedURLError：/index.html

解决此问题的一种方法是在路由器中定义index.html路由，如下所示，但这并不理想：

Router.map(function() {
    this.resource('index', { path: '/index.html' });
});

或者，您可以将位置类型更改为“哈希”：

locationType: 'hash'

在这种情况下，它将允许转到index.html而没有上面的附加路由，但那么路由如何能够挂起呢？ 例如，转到chrome-extension：//（extension_id）/ some_other_action永远不会导致Ember App首先加载。

问题：如何在Chrome扩展程序中声明Ember路由？

Answer 1

完成这些完整的步骤后，您就可以为具有工作路线的Chrome构建一个应用程序：

使用Ember CLI创建默认应用程序

ember new myapp

更新config / environment.js文件以包含'locationType：hash'

module.exports = function(environment) {
  var ENV = {
    ...
    locationType: 'hash',
    ...
  }
}

现在使用'hash'，意味着您需要使用以下模式：

chrome-extension://(extension_id)/index.html#/about?myparam={}

放置manifest.json文件以定义public / folder中的扩展名

这里没什么特别的

定义基本路线

Router.map(function() {
    this.route('about');
});

构建应用程序

ember build --environment production

在Chrome中，“加载解压缩的扩展名...”并将其指向dist /文件夹

最后，将浏览器指向：

chrome-extension://(extension_id)/index.html#/about

我要感谢Justin McNally和他的ember-cli-chrome源代码，以获取正确设置locationType的一些指示。