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

Question

我们正在使用 Ember CLI 开发一个 Chrome 扩展，但是由于 Index 路由没有被正确触发，所以很难让路由/资源与 Chrome 很好地配合。

我们采取的步骤:

• 使用 Ember CLI 创建默认应用程序:ember new myapp。
• 我们不定义任何路由，因为我们应该为我们生成索引。
• 构建:ember build --environment production。
• 将 manifest.json 文件放在 dist/ 文件夹中以定义扩展。
• 在 Chrome 中，我们“加载解压缩的扩展程序...”并将其指向 dist/ 文件夹。

通常，如果 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 应用。

问题如何在 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 中，“加载一个解压的扩展...”并将其指向 dist/文件夹

最后，将浏览器指向:

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

感谢 Justin McNally 和他的 ember-cli-chrome正确设置 locationType 的一些指针的源代码。