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

Question

我们正在使用Ember CLI开发Chrome扩展程序，但是由于索引路由未正确触发，因此难以使路由/资源在Chrome中正常运行。

我们采取的步骤：

通常，如果Ember应用程序托管在服务器上，则转到ember为该应用程序提供服务的位置，例如hxxp：// localhost：4200 /，将加载该应用程序，并且所有路由都将挂断该应用程序。

然而，因为它是一个Chrome扩展，它不会加载的index.html使用空路由时，这样会//（EXTENSION_ID）/：铬扩展提供了一个错误“此网页未找到”我推测Chrome 默认不会重定向到index.html。

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

未捕获的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：哈希”

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

现在使用了“哈希”，这意味着您需要使用以下模式：

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

将manifest.json文件放在public /文件夹中定义扩展名

这里没什么特别的

定义基本路线

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的指针。