{"id":26106991,"url":"https://github.com/raido/ember-window-messenger","last_synced_at":"2025-10-06T03:47:04.704Z","repository":{"id":3790720,"uuid":"43807354","full_name":"raido/ember-window-messenger","owner":"raido","description":"This aims to be an simple window postMessage services provider.","archived":false,"fork":false,"pushed_at":"2023-10-27T19:46:37.000Z","size":5407,"stargazers_count":19,"open_issues_count":8,"forks_count":7,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T13:54:06.127Z","etag":null,"topics":["addon","communication","ember","postmessage"],"latest_commit_sha":null,"homepage":"https://raido.github.io/ember-window-messenger","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/raido.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-10-07T09:53:34.000Z","updated_at":"2024-05-30T02:56:09.000Z","dependencies_parsed_at":"2024-11-18T00:46:44.108Z","dependency_job_id":null,"html_url":"https://github.com/raido/ember-window-messenger","commit_stats":{"total_commits":202,"total_committers":6,"mean_commits":"33.666666666666664","dds":0.08415841584158412,"last_synced_commit":"1fd4c2574a6e2662d8879deb74e784fd83634b93"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raido%2Fember-window-messenger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raido%2Fember-window-messenger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raido%2Fember-window-messenger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raido%2Fember-window-messenger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/raido","download_url":"https://codeload.github.com/raido/ember-window-messenger/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248182080,"owners_count":21060893,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["addon","communication","ember","postmessage"],"created_at":"2025-03-09T22:12:30.961Z","updated_at":"2025-10-06T03:46:59.684Z","avatar_url":"https://github.com/raido.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ember-window-messenger\n\n[![CI](https://github.com/raido/ember-window-messenger/actions/workflows/ci.yml/badge.svg)](https://github.com/raido/ember-window-messenger/actions/workflows/ci.yml)\n[![npm version](https://badge.fury.io/js/ember-window-messenger.svg)](https://badge.fury.io/js/ember-window-messenger)\n\nThis Ember addon is a lightweight postMessage client/server implementation. It is built on promises so the `fetch` and `rpc` methods can be used directly in your route `model()` hooks.\n\nFor changelog see [CHANGELOG.md](https://github.com/raido/ember-window-messenger/blob/main/CHANGELOG.md)\n\n**It supports JSON only messages for now**\n\n\nCompatibility\n------------------------------------------------------------------------------\n\n* Ember.js v3.20 or above\n* Ember CLI v3.20 or above\n* Node.js v12 or above\n\n## Usage\n\n`ember install ember-window-messenger`\n\n#### Configuration\n\nAdd `target:origin` map to your `config/environment.js`. This effectively defines which targets (windows, frames) is your app communicating with.\n\n```javascript\nAPP: {\n  // Here you can pass flags/options to your application instance\n  // when it is created\n  'ember-window-messenger': {\n    'parent': 'http://localhost:4200',\n    'target-1': 'http://localhost:4200',\n    'target-2': 'http://localhost:4200',\n    'popup': 'http://localhost:4200'\n  }\n}\n```\n\nThis list is also used for validation, to check if message comes from an allowed origin.\n\n### Examples\n\nIf you dare, fire up the dummy app in this addon and test it out. Below are the basic examples, see dummy app for more.\n\n#### Setup server on parent\n\n```javascript\n// app/service/your-server.js\nimport Service, { inject as service } from '@ember/service';\n\nexport default class YourServerService extends Service {\n  @service('window-messenger-server');\n  server;\n\n  setup() {\n    this.server.on('demo-data', this.onDemoDataRequest);\n  }\n\n  teardown() {\n    this.server.off('demo-data', this.onDemoDataRequest);\n  }\n\n  onDemoDataRequest = (resolve, reject, query) =\u003e {\n    resolve('Some data');\n  }\n}\n\n// app/routes/your-route.js\nimport Route from '@ember/routing/route';\nimport { inject as service } from '@ember/service';\n\nexport default class YourRoute extends Route {\n  @service('your-server');\n  yourServer;\n\n  activate() {\n    super.activate();\n    this.yourServer.setup();\n  }\n\n  deactivate() {\n    super.deactivate();\n    this.yourServer.teardown();\n  }\n}\n```\n\n#### Fetch from parent\n\n```javascript\nimport Route from '@ember/routing/route';\nimport { inject as service } from '@ember/service';\n\nexport default class YourRoute extends Route {\n  @service('window-messenger-client')\n  client;\n\n  model() {\n    return this.client.fetch('demo-data');\n  }\n}\n```\n\n#### Fetch from a specific target\n\nThis can be used from parent window to frames/tabs communication.\n\n```javascript\nimport Route from '@ember/routing/route';\nimport { inject as service } from '@ember/service';\n\nexport default class YourRoute extends Route {\n  @service('window-messenger-client')\n  client;\n\n  model() {\n    return this.client.fetch('popup:demo-data');\n  }\n}\n```\n\n#### Execute RPC call\n\nInternally it is the same as `fetch`, but provides semantic sugar to your app code.\n\n```javascript\nimport Controller from '@ember/controller';\nimport { inject as service } from '@ember/service';\nimport { action } from '@ember/object';\n\nexport default class YourController extends Controller {\n  @service('window-messenger-client')\n  client;\n\n  @action\n  runMe() {\n    this.client.rpc('start-worker').then((response) =\u003e {\n      // handle response here\n    });\n  }\n}\n```\n\n### iFrames, popup windows\n\nIf you want to communicate with an iframe or a popup window opened with `window.open`, then you have to register your window instance on the client with matching target name from `config/environment` map.\n\n#### iFrame\n\n```javascript\n// app/components/x-frame.js\nimport Component from '@glimmer/component';\nimport { inject as service } from '@ember/service';\n\nexport default class XFrameComponent extends Component {\n  @service('window-messenger-client')\n  client;\n\n  register(frameElement) {\n    this.client.addTarget(this.args.target, frameElement.contentWindow);\n  },\n\n  unregister() {\n    this.client.removeTarget(this.args.target);\n  }\n}\n```\n```html\n\u003c!-- app/components/x-frame.hbs --\u003e\n\u003c!-- Install ember-render-modifiers for did-insert/will-destory modifiers --\u003e\n\u003ciframe \n  ...attributes\n  {{did-insert this.register}}\n  {{will-destory this.unregister}}\n\u003e\u003c/iframe\u003e\n\n\u003c!-- app/templates/your-route.hbs --\u003e\n\u003cXFrame src=\"\u003curl\u003e\" @target=\"target-1\"/\u003e\n```\n#### Popup with window.open\n\n```javascript\n// app/controller/your-controller.js\nimport Controller from '@ember/controller';\nimport { inject as service } from '@ember/service';\nimport { action } from '@ember/object';\nimport { tracked } from '@glimmer/tracking';\n\nexport default class YourController extends Controller {\n  @service('window-messenger-client')\n  client;\n\n  @tracked\n  model = null;\n\n  @action\n  openPopup() {\n    let win = window.open('/some/path', 'Example popup', 'toolbar=no,resizable=no,width=400,height=400');\n    this.client.addTarget('popup', win);\n  }\n\n  @action\n  fetchFromPopup() {\n    this.client.fetch('popup:some-data').then((name) =\u003e {\n      this.model = name;\n    });\n  }\n}\n```\n\n#### Open popup if it isn't already open, or has been closed by the user\n\n```javascript\n// app/controller/your-controller.js\nimport Controller from '@ember/controller';\nimport { inject as service } from '@ember/service';\nimport { action } from '@ember/object';\n\nexport default class YourController extends Controller {\n  @service('window-messenger-client')\n  client;\n\n  @action\n  openPopup() {\n    if (!this.client.hasTarget('popup')) {\n      let win = window.open('/some/path', 'Example popup', 'toolbar=no,resizable=no,width=400,height=400');\n      this.client.addTarget('popup', win);\n    }\n  }\n}\n```\n\n\nLicense\n------------------------------------------------------------------------------\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraido%2Fember-window-messenger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraido%2Fember-window-messenger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraido%2Fember-window-messenger/lists"}