{"id":19623074,"url":"https://github.com/fusepilot/create-cep-extension","last_synced_at":"2025-07-23T08:07:47.418Z","repository":{"id":18209713,"uuid":"83373387","full_name":"fusepilot/create-cep-extension","owner":"fusepilot","description":"A near zero config approach to creating CEP extensions with Webpack and React.","archived":false,"fork":false,"pushed_at":"2022-12-07T17:27:36.000Z","size":2149,"stargazers_count":87,"open_issues_count":42,"forks_count":16,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-07-06T00:02:50.617Z","etag":null,"topics":["adobe","cep-extension","extendscript","react","webpack"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fusepilot.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":"2017-02-28T01:00:54.000Z","updated_at":"2024-05-08T15:22:00.000Z","dependencies_parsed_at":"2023-01-13T19:42:54.697Z","dependency_job_id":null,"html_url":"https://github.com/fusepilot/create-cep-extension","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"purl":"pkg:github/fusepilot/create-cep-extension","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fusepilot%2Fcreate-cep-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fusepilot%2Fcreate-cep-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fusepilot%2Fcreate-cep-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fusepilot%2Fcreate-cep-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fusepilot","download_url":"https://codeload.github.com/fusepilot/create-cep-extension/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fusepilot%2Fcreate-cep-extension/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266640830,"owners_count":23960809,"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","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"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":["adobe","cep-extension","extendscript","react","webpack"],"created_at":"2024-11-11T11:31:35.113Z","updated_at":"2025-07-23T08:07:47.378Z","avatar_url":"https://github.com/fusepilot.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e Notice: I encourage you to check out [parcel-cep-plugin](https://github.com/fusepilot/parcel-plugin-cep). It's a more maintainable approach to the same problem that has a _much_ smaller codebase than a fork [create-react-app](https://github.com/facebookincubator/create-react-app) ever will. [Parcel](https://github.com/parcel-bundler/parcel) also has many [benefits](https://github.com/parcel-bundler/parcel#features) that should be enticing enough to consider switching.\n\n# Create CEP Extension\n\nCreate CEP Extensions with no build configuration. Closely matches functionality from [Create React App](https://github.com/facebookincubator/create-react-app).\n\n- [Getting Started](#getting-started) – How to create a new app.\n- [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/create-cep-extension-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.\n\nCreate React App works on macOS, Windows, and Linux.\u003cbr\u003e\nIf something doesn’t work please [file an issue](https://github.com/facebookincubator/create-react-app/issues/new).\n\n## Quick Overview\n\n```sh\nnpm install -g create-cep-extension\n\ncreate-cep-extension my-cep-extension\ncd my-cep-extension\nnpm start\n```\n\nThen open [http://localhost:3000/](http://localhost:3000/) to see your app.\u003cbr\u003e\nWhen you’re ready to deploy to production, create a minified bundle with `npm run build`.\n\n\u003cimg src='https://camo.githubusercontent.com/506a5a0a33aebed2bf0d24d3999af7f582b31808/687474703a2f2f692e696d6775722e636f6d2f616d794e66434e2e706e67' width='600' alt='npm start'\u003e\n\n### Get Started Immediately\n\nYou **don’t** need to install or configure tools like Webpack or Babel.\u003cbr\u003e\nThey are preconfigured and hidden so that you can focus on the code.\n\nJust create a project, and you’re good to go.\n\n## Getting Started\n\n### Installation\n\nInstall it once globally:\n\n```sh\nnpm install -g create-cep-extension\n```\n\n**You’ll need to have Node \u003e= 4 on your machine**.\n\n**We strongly recommend to use Node \u003e= 6 and npm \u003e= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects.\n\n**This tool doesn’t assume a Node backend**. The Node installation is only required for Create React App itself.\n\n### Creating an App\n\nTo create a new app, run:\n\n```sh\ncreate-cep-extension my-cep-extension\ncd my-cep-extension\n```\n\nIt will create a directory called `my-cep-extension` inside the current folder.\u003ccep-extension\nInside that directory, it will generate the initial project structure and install the transitive dependencies:\n\n```\nmy-cep-extension\n  README.md\n  node_modules/\n  package.json\n  .gitignore\n  .env\n  extendscript/\n    index.jsx\n  public/\n    favicon.ico\n    index.html\n  src/\n    App.css\n    App.js\n    App.test.js\n    index.css\n    index.js\n    logo.svg\n```\n\nNo configuration or complicated folder structures, just the files you need to build your app.\u003cbr\u003e\nOnce the installation is done, you can run some commands inside the project folder:\n\n### `npm start` or `yarn start`\n\nRuns the app in development mode.\u003cbr\u003e\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.\u003cbr\u003e\nYou will see the build errors and lint warnings in the console.\n\n\u003cimg src='https://camo.githubusercontent.com/41678b3254cf583d3186c365528553c7ada53c6e/687474703a2f2f692e696d6775722e636f6d2f466e4c566677362e706e67' width='600' alt='Build errors'\u003e\n\n### `npm test` or `yarn test`\n\nRuns the test watcher in an interactive mode.\u003cbr\u003e\nBy default, runs tests related to files changes since the last commit.\n\n[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/create-cep-extension-scripts/template/README.md#running-tests)\n\n### `npm run build` or `yarn build`\n\nBuilds the app for production to the `build` folder.\u003cbr\u003e\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\u003cbr\u003e\nYour app is ready to be deployed!\n\n### `npm run archive` or `yarn archive`\n\nCreates a ZXP archive of the `build` folder to the `archive` folder.\u003cbr\u003e\n\nYou can then send the ZXP archive to your users to install using a ZXP installer. For instance:\n\n- [aescripts + aeplugins ZXP Installer](http://aescripts.com/learn/zxp-installer/)\n- [ZXP Installer](http://zxpinstaller.com/)\n\n## Environment Variables\n\nYou can customize the name of the extension and multiple other variables by modifying the `.env` file.\n\n```bash\nNAME=\"My Extension\"\nBUNDLE_ID=\"com.mycompany.myextension\"\n```\n\n### Hosts\n\nBy default, the extension will target all known Adobe hosts. To target specific hosts, uncomment the `HOSTS` variable to `.env` and modify the list of the hosts you want to target.\n\nFor example, to target just Illustrator and After Effects, you would add this to your `.env` file:\n\n```bash\nHOSTS=\"ILST, AEFT\"\n```\n\nAnd to target specific versions:\n\n```bash\nHOSTS=\"ILST, IDSN@*, PHXS@6.0, AEFT@[5.0,10.0]\"\n```\n\nThis will target all versions of Illustrator and In Design, Photoshop 6.0, and After Effects 5.0 - 10.0.\n\n### Type\n\nSets the type of window. Options are `ModalDialog`, `Modeless`, `Panel` is default.\n\n```bash\nUI_TYPE=ModalDialog\n```\n\n### Icon\n\nTo add a custom panel icon, add all [icon files](https://github.com/Adobe-CEP/CEP-Resources/blob/master/CEP_8.x/Documentation/CEP%208.0%20HTML%20Extension%20Cookbook.md#high-dpi-panel-icons) inside the `public` folder and set their paths inside your `.env` file:\n\n```bash\nICON_NORMAL=\"./assets/icon-normal.png\"\nICON_ROLLOVER=\"./assets/icon-rollover.png\"\nICON_DARK_NORMAL=\"./assets/icon-dark.png\"\nICON_DARK_ROLLOVER=\"./assets/icon-dark-rollover.png\"\n```\n\n### Cerificate Variables\n\nIn order to create a valid ZXP, you will need to provide the following variables replaced with the correct information inside your `.env`.\n\n```bash\nCERTIFICATE_COUNTRY=\"US\"\nCERTIFICATE_PROVINCE=\"CA\"\nCERTIFICATE_ORG=\"MyCompany\"\nCERTIFICATE_NAME=\"com.mycompany\"\nCERTIFICATE_PASSWORD=\"mypassword\"\n```\n\n## Communicating with Extendscript\n\nThere are few functions that you can import from the `cep-interface` package to ease Extendscript communication from CEP.\n\n### `loadExtendscript(extendScriptFileName: string): Promise`\n\nLoads and evaluates the specified file in the src/extendscript directory. Returns a promise with the result.\n\n```javascript\nimport { loadExtendscript } from 'cep-interface';\n\nloadExtendscript('index.jsx');\n```\n\n### `evalExtendscript(code: string): Promise`\n\nEvaluates the specified code. Returns a Promise.\n\n```javascript\nimport { evalExtendscript } from 'cep-interface';\n\nevalExtendscript('$.writeln(\"Hello Foo\");'); // writes \"Hello Foo\" to the info panel\n```\n\nIf you return a JSON string using [json2](https://github.com/douglascrockford/JSON-js) or similar from Extendscript, you can get the parsed result.\n\n```javascript\nimport { evalExtendscript } from 'cep-interface';\n\nevalExtendscript('JSON.stringifiy({foo: \"bar\"});')\n  .then(result =\u003e console.log(result)) // prints {foo: \"bar\"}\n  .catch(error =\u003e console.warn(error));\n```\n\n## Other functions\n\nThere are a few other functions available in addition.\n\n### `openURLInDefaultBrowser(url: string)`\n\n```javascript\nimport { openURLInDefaultBrowser } from 'cep-interface';\n\nopenURLInDefaultBrowser('www.google.com');\n```\n\nOpens the url in the default browser. Will also work when viewing outside the target application in a browser.\n\n## Contributing\n\nWe'd love to have your helping hand on `create-cep-extension`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started.\n\n## Todo\n\n- Improve target host configuration per [#4](https://github.com/fusepilot/create-cep-extension/pull/4).\n- Create `.jsxbin`'s automatically and smoothly. Adobe has made this nearly impossible to do on macOS, so not sure if its worth the trouble. Especially since .jsxbin doesn't really deter hackers.\n- Testing.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffusepilot%2Fcreate-cep-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffusepilot%2Fcreate-cep-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffusepilot%2Fcreate-cep-extension/lists"}