{"id":20744412,"url":"https://github.com/authpass/frameit-chrome","last_synced_at":"2025-04-24T05:47:07.800Z","repository":{"id":56830804,"uuid":"293534836","full_name":"authpass/frameit-chrome","owner":"authpass","description":"Embed app store and play store screenshots in device frames with chrome headless.","archived":false,"fork":false,"pushed_at":"2024-04-21T16:17:44.000Z","size":4360,"stargazers_count":16,"open_issues_count":4,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-24T05:47:00.823Z","etag":null,"topics":["android","device-frames","fastlane","ios","screenshots"],"latest_commit_sha":null,"homepage":"","language":"Dart","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/authpass.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-07T13:24:02.000Z","updated_at":"2024-11-17T15:55:04.000Z","dependencies_parsed_at":"2022-09-09T17:11:40.650Z","dependency_job_id":null,"html_url":"https://github.com/authpass/frameit-chrome","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/authpass%2Fframeit-chrome","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/authpass%2Fframeit-chrome/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/authpass%2Fframeit-chrome/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/authpass%2Fframeit-chrome/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/authpass","download_url":"https://codeload.github.com/authpass/frameit-chrome/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250573343,"owners_count":21452345,"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":["android","device-frames","fastlane","ios","screenshots"],"created_at":"2024-11-17T07:15:25.733Z","updated_at":"2025-04-24T05:47:07.780Z","avatar_url":"https://github.com/authpass.png","language":"Dart","readme":"# frameit_chrome\n\nEmbed app store and play store screenshots in device frames. \nDrop in replacement for fastlane frameit.\n\n\u003e Also check out the blog article for [how to use frameit-chrome for flutter apps](https://codeux.design/articles/automatically-add-device-frames-and-text-to-app-screenshots/)\n\u003e for more details: https://codeux.design/articles/automatically-add-device-frames-and-text-to-app-screenshots/\n\nIt uses a simple dart script to locate localized screenshots and parses\n`title.strings` and `keyword.strings` and uses **chrome headless**\nto render the screenshot with some css and html magic.\n\n[![Example Screenshot](./_docs/example.png)](./_docs/example.png)\n\n* (Screenshots from [AuthPass Password Manager](https://authpass.app/))\n\n# Requirements\n\n* Dart 😅️ (for now)\n* Google Chrome executable. By default, will look into \n    `/Applications/Google Chrome.app/Contents/MacOS/Google Chrome`\n    (tested with Chrome 86.0.4240.30).\n* Screenshots and Device Frames.\n\n# Usage\n\n## Create screenshots\n\nUse any tool to create non-framed screenshots, for flutter I've used\n[screenshots package](https://pub.dev/packages/screenshots).\n\n## Download device frames\n \nDownload device frames from https://github.com/fastlane/frameit-frames\n to `$HOME/frameit-frames`.\n\n## Folder hierarchy\n\nPlace your screenshots into file hierarchy as used by fastlane.\n\n```bash\nmetadata/\n  android/ # \u003c-- `--base-dir` argument\n    en-US/\n      \u003cdevice-name\u003e-\u003cscreenshot-name\u003e.png\n      samsung-galaxy-s10-plus-password_generator.png # Example\n      title.strings\n      keyword.strings (optional)\n    de-DE/\n      \u003cdevice-name\u003e-\u003cscreenshot-name\u003e.png\n      samsung-galaxy-s10-plus-password_generator.png # Example\n      title.strings\n      keyword.strings (optional)\n    frameit.yaml (optional)\n  framed/ # \u003c-- output directory\n  ```\n\n* In the above example: `\u003cbase-dir\u003e` = `metadata/android`\n* Put Screenshots into `\u003cbase-dir\u003e/\u003clocale\u003e/images/`\n* a `title.strings` and `keyword.strings` into `\u003cbase-dir\u003e/\u003clocale\u003e/`\n* example `title.strings` (key must match part of the file name of the screenshot):\n    ```\n \"password_generator\" = \"Great password generator!\";\n    ```\n\n## Install `frameit_chrome`\n\n```shell script\npub global activate frameit_chrome\n```\n\n## Run `frameit_chrome.dart`:\n\n(Assumes [frameit-frames](https://github.com/fastlane/frameit-frames) downloaded to `$HOME/frameit-frames`)\n\n```shell script\npub global run frameit_chrome --base-dir=/myproject/fastlane/metadata/android --frames-dir=$HOME/frameit-frames/latest\n```\n\nOn non-mac platforms or when you've installed Google Chrome in non-default location:\n\n```shell script\npub global run frameit_chrome --base-dir=/myproject/fastlane/metadata/android --frames-dir=$HOME/frameit-frames/latest --chrome-binary=\"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome\"\n```\n\n# Example\n\nSee the [Example Directory](./example/README.md) as well as usage of AuthPass:\n\n* Android: https://github.com/authpass/authpass/tree/master/authpass/android/fastlane/metadata/android\n* iOS: https://github.com/authpass/authpass/tree/master/authpass/ios/fastlane/screenshots\n\n# TODO\n\n* Allow more customizations\n  * Frame screenshot overrides.\n  * CSS customizations.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fauthpass%2Fframeit-chrome","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fauthpass%2Fframeit-chrome","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fauthpass%2Fframeit-chrome/lists"}