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

Question

我们正在使用 Ember CLI 开发一个 Chrome 扩展，但是很难让 routes/resources 与 Chrome 一起作为 很好地发挥作用索引 路由未正确触发。

我们采取的步骤：

使用 Ember CLI 创建默认应用程序：ember new myapp。
我们没有定义任何路由，因为我们应该得到为我们生成的索引。
构建：ember build --environment production.
在dist/文件夹中放一个manifest.json文件来定义扩展。
在 Chrome 中，我们 'Load an unpacked extension...' 并将其指向 dist/ 文件夹。

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

然而，由于它是一个 Chrome 扩展，它在使用空路由时不会加载 index.html，这样就可以 chrome-extension://(extension_id)/ 给出一个错误 'This webpage is not found' 正如我推测的 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' });
});

或者，您可以将位置类型更改为 'hash':

locationType: 'hash'

在这种情况下，它将允许在没有上面的附加路由的情况下转到 index.html，但是路由如何能够挂断它呢？例如，转到 chrome-extension://(extension_id)/some_other_action 永远不会使 Ember 应用程序首先加载。

问题：如何在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={}

在public/文件夹下放一个manifest.json文件定义扩展名

没什么特别的

定义基本路线

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

构建应用程序

ember build --environment production

在Chrome中，'Load an unpacked extension...'指向dist/文件夹

最后，将浏览器指向：

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

非常感谢 Justin McNally 和他的 ember-cli-chrome 源代码，为正确设置 locationType 提供了一些指导。

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

How to configure Ember routes in a Chrome extension?

javascript

google-chrome

google-chrome-extension

ember.js