{"id":15943888,"url":"https://github.com/brandonhellman/webextension-create","last_synced_at":"2025-03-28T15:33:07.921Z","repository":{"id":55939233,"uuid":"200292111","full_name":"brandonhellman/webextension-create","owner":"brandonhellman","description":null,"archived":false,"fork":false,"pushed_at":"2020-12-05T18:40:27.000Z","size":1592,"stargazers_count":8,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-29T14:13:10.516Z","etag":null,"topics":["chrome","firefox"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/brandonhellman.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-08-02T20:10:33.000Z","updated_at":"2024-10-14T20:09:36.000Z","dependencies_parsed_at":"2022-08-15T09:50:56.814Z","dependency_job_id":null,"html_url":"https://github.com/brandonhellman/webextension-create","commit_stats":null,"previous_names":["kadauchi/webextension-create"],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonhellman%2Fwebextension-create","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonhellman%2Fwebextension-create/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonhellman%2Fwebextension-create/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonhellman%2Fwebextension-create/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brandonhellman","download_url":"https://codeload.github.com/brandonhellman/webextension-create/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222149842,"owners_count":16939406,"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":["chrome","firefox"],"created_at":"2024-10-07T08:05:25.801Z","updated_at":"2024-10-30T02:07:54.369Z","avatar_url":"https://github.com/brandonhellman.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WebExtension Create\n\nCreate web extensions with no build configuration. Inspired by [create-react-app](https://github.com/facebook/create-react-app).\n\n## Quick Start\n\n```sh\nnpx webextension-create\ncd my-webextension\nnpm start\n```\n\nThen open your browser and load the unpacked folder. Any changes you make will automatically reload your extension.\n\nWhen you are ready to publish your extension run `npm run build` to create all of the folders you'll need to upload.\n\nYou don't need to install or configure tools like Webpack or Babel. Everything is preconfigured and hidden so you can focus on the code.\n\n## Creating a Web Extension\n\nTo create a new web extension you can use:\n\n### npx\n\n```sh\nnpx webextension-create\n```\n\nThis will initiate the CLI asking for a project name and choice of template that will generate one of the following project structures:\n\n#### template: `javascript`\n\n```\nmy-webextension\n├── node_modules\n├── src\n│   ├── background.js\n│   ├── content_script.js\n│   ├── icon.png\n│   ├── manifest.json\n│   ├── popup.html\n│   └── popup.js\n├── .gitignore\n├── package.json\n└── README.md\n```\n\n#### template: `react`\n\n```\nmy-webextension\n├── node_modules\n├── src\n│   ├── App.jsx\n│   ├── background.js\n│   ├── content_script.js\n│   ├── icon.png\n│   ├── manifest.json\n│   ├── popup.html\n│   └── popup.jsx\n├── .gitignore\n├── package.json\n└── README.md\n```\n\n#### template: `react-typescript`\n\n```\nmy-webextension\n├── node_modules\n├── src\n│   ├── App.tsx\n│   ├── background.ts\n│   ├── content_script.ts\n│   ├── icon.png\n│   ├── manifest.json\n│   ├── popup.html\n│   ├── popup.tsx\n│   └── webextension-env.d.ts\n├── .gitignore\n├── package.json\n├── README.md\n└── tsconfig.json\n```\n\n#### template: `typescript`\n\n```\nmy-webextension\n├── node_modules\n├── src\n│   ├── background.ts\n│   ├── content_script.ts\n│   ├── icon.png\n│   ├── manifest.json\n│   ├── popup.html\n│   ├── popup.ts\n│   └── webextension-env.d.ts\n├── .gitignore\n├── package.json\n├── README.md\n└── tsconfig.json\n```\n\nOnce the setup if finished you can run\n\n```sh\ncd my-webextension\n```\n\nNow that you are inside the newly created project you can run some built in commands:\n\n### `npm run start`\n\nCompiles the extension into `./build/unpacked` to be that can be loaded into [Chrome](#load-into-chrome) or [Firefox](#load-into-firefox) for development.\n\nThe extension will automatically reload when you save changes.\n\n#### Load into Chrome\n\n1. Open Chrome\n2. Go to `chrome://extensions`\n3. Turn on `Developer mode`\n4. Click `Load unpacked`\n5. Select folder `./build/unpacked`\n\n#### Load into Firefox\n\n1. Open Firefox\n2. Go to `about:debugging`\n3. Click `Load Temporary Add-on...`\n4. Open `./build/unpacked/manifest.json`\n\n### `npm run build`\n\nCompiles the extension into `./build/unpacked` and then packages that into production ready zips at `./build/{target}-{version}.zip`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrandonhellman%2Fwebextension-create","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrandonhellman%2Fwebextension-create","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrandonhellman%2Fwebextension-create/lists"}