Question

We are developing a Chrome extension using Ember CLI, but are having difficulty getting the routes/resources to play nicely with Chrome as the Index route is not being fired correctly. The steps we have taken: Create the default application using Ember CLI: ember new myapp. We do not define any routes as we should get the Index generated for us. Build: ember build --environment production. Put a manifest.json file to define the extension in the dist/ folder. In Chrome we 'Load an unpacked extension...' and point it to the dist/ folder. Normally, if the Ember application was hosted on a server, going to where Ember serves the application, like hxxp://localhost:4200/, would load the application and all routes would hang off that. However, as it's a Chrome extension, it doesn't load the index.html when using the empty route, such that going to chrome-extension://(extension_id)/ gives an error 'This webpage is not found' as I presume Chrome doesn't redirect to index.html by default. If you point the extension to chrome-extension://(extension_id)/index.html it loads the Ember application, but then Ember gives an error: Uncaught UnrecognizedURLError: /index.html One way around this is to define an index.html route in the router as below, but this isn't ideal: Router.map(function() { this.resource('index', { path: '/index.html' }); }); Alternatively, you can change the location type to 'hash': locationType: 'hash' In this instance, it will allow going to index.html without the additional route above, but then how are routes able to hang off this? For example, going to chrome-extension://(extension_id)/some_other_action would never cause the Ember App to load in the first place. Question: How can Ember routes be declared in a Chrome Extension?

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文件来定义公共/文件夹中的扩展名

这里没什么特别的

定义基本路线

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的一些指示。

How to configure Ember routes in a Chrome extension?

1 个答案: