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

Question

我们正在使用 Ember CLI 开发一个 Chrome 扩展程序，但由于 Index 路由未正确触发，因此难以让路由/资源与 Chrome 完美配合。

我们采取的步骤：

• 使用 Ember CLI 创建默认应用程序：ember new myapp。
• 我们没有定义任何路线，因为我们应该得到为我们生成的索引。
• 构建：ember build --environment production。
• 在 dist/ 文件夹中放置一个 manifest.json 文件来定义扩展名。
• 在 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',
    ...
  }
}

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

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 提供了一些建议。