{"id":17440241,"url":"https://github.com/mtoygar/ember-browser-extension","last_synced_at":"2026-02-10T15:01:27.149Z","repository":{"id":44116201,"uuid":"176586417","full_name":"mtoygar/ember-browser-extension","owner":"mtoygar","description":"a sample browser extension on top of Ember and webextension-polyfill ","archived":false,"fork":false,"pushed_at":"2022-12-09T16:24:07.000Z","size":3594,"stargazers_count":0,"open_issues_count":16,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-01T16:42:21.821Z","etag":null,"topics":["browser-extension","chrome-extension","ember","emberjs","firefox-addon","firefox-extension","webextension","webextension-api"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mtoygar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-19T19:41:03.000Z","updated_at":"2020-11-01T20:21:58.000Z","dependencies_parsed_at":"2023-01-25T14:45:25.816Z","dependency_job_id":null,"html_url":"https://github.com/mtoygar/ember-browser-extension","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mtoygar/ember-browser-extension","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mtoygar%2Fember-browser-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mtoygar%2Fember-browser-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mtoygar%2Fember-browser-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mtoygar%2Fember-browser-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mtoygar","download_url":"https://codeload.github.com/mtoygar/ember-browser-extension/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mtoygar%2Fember-browser-extension/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29303326,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-10T14:34:17.295Z","status":"ssl_error","status_checked_at":"2026-02-10T14:33:22.845Z","response_time":65,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["browser-extension","chrome-extension","ember","emberjs","firefox-addon","firefox-extension","webextension","webextension-api"],"created_at":"2024-10-17T14:08:06.885Z","updated_at":"2026-02-10T15:01:27.131Z","avatar_url":"https://github.com/mtoygar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ember-browser-extension\n\nThis repo is started to guide and facilitate developing a browser extension using Ember. It makes use of Ember and [Mozilla's webextension-polyfill](https://github.com/mozilla/webextension-polyfill) to create a maintainable and scalable extension.\n\n# Contained Examples\n\n## Popup\nThe ember app is booted inside a div(with id `chrome-app`) in `popup.html` using the `popup.js`. [Click to access related code.](https://github.com/mtoygar/ember-browser-extension/tree/master/chrome/popup)\n## Basic Content Script\nContains an example of a content script applicable to both Firefox and Chrome thanks to webextension-polyfill. [Click to access related code.](https://github.com/mtoygar/ember-browser-extension/blob/master/chrome/content-scripts/basic-content-script.js)\n## Content Script with Ember App\nContains an example of a content script build by Ember. The prepared example is inspired by the [ZenHub's extension](https://chrome.google.com/webstore/detail/zenhub-for-github/ogcgkffhplmphkaahpmffcafajaocjbd) and works on this repo's url(https://github.com/mtoygar/ember-browser-extension/). When user visited the repo, extension simply adds a button to the navigation bar and this button triggers ember boot when clicked. Therefore, when user click the button ember is booted and a location hash is added to the url. After this point, all routing and state management is done by using Ember. One can see the possible routes on [router.js](https://github.com/mtoygar/ember-browser-extension/blob/master/app/router.js)\n\nIt is also beneficial to add that the sample extension uses HashLocation routing. This way, Ember uses the hash part of the URL for its routing purposes. Moreover, when the user reloads the page, the content script detects if the extension's hash location is on the URL and automatically renders the ember route on the GitHub container.\n\n### Screenshot\n\n\u003cimg src=\"https://raw.githubusercontent.com/mtoygar/ember-browser-extension/master/docs/screenshots/nav-bar-and-container.png\" alt=\"content script backed by Ember App\" /\u003e\n\n## Installation\n\n* `git clone \u003crepository-url\u003e` this repository\n* `cd ember-browser-extension`\n* `yarn install`\n\n## Running / Development\n\n* `ember serve`\n* For `Chrome`:\n  * Navigate to chrome://extensions in your browser. You can also access this page by clicking on the Chrome menu on the top right side of the Omnibox, hovering over More Tools and selecting Extensions.\n  * Check the box next to Developer Mode.\n  * Click Load Unpacked Extension and select the directory for your \"Hello Extensions\" extension.\n* For `Firefox`:\n  * enter about:debugging in the URL bar\n  * click \"Load Temporary Add-on\"\n  * open the extension's directory and select any file inside the extension.\n\n## Further Reading / Useful Links\n\n* [ember.js](https://emberjs.com/)\n* [ember-cli](https://ember-cli.com/)\n* [Ember.Application(starting point of Ember application)](https://api.emberjs.com/ember/3.3/classes/Application)\n* [Firefox Add-ons Developer Guides](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)\n* [Chrome Extensions Developer Guides](https://developer.chrome.com/extensions)\n* [A framework for ambitious Chrome Extensions by Envoy Engineering](https://envoy.engineering/a-framework-for-ambitious-chrome-extensions-b08d1f4b944d)\n* [HashLocation Routing Ember Reference](https://api.emberjs.com/ember/release/classes/HashLocation)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmtoygar%2Fember-browser-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmtoygar%2Fember-browser-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmtoygar%2Fember-browser-extension/lists"}