{"id":15130391,"url":"https://github.com/koribot/bte","last_synced_at":"2026-01-17T03:47:06.113Z","repository":{"id":252111188,"uuid":"834416329","full_name":"koribot/BTE","owner":"koribot","description":"A boiler template for creating chrome extension with typescript, Tailwind, webpack and Hot-reloading via websocket `chrome.runtime.reload` and `chrome.tabs.reload`","archived":false,"fork":false,"pushed_at":"2024-08-11T14:44:52.000Z","size":596,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-11T17:56:27.278Z","etag":null,"topics":["boilerplate-template","chrome-extension","chrome-extension-starter","hotreloading","tailwindcss","typescript","vanilla-javascript","webpack"],"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/koribot.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-27T07:46:41.000Z","updated_at":"2024-08-11T14:44:55.000Z","dependencies_parsed_at":"2024-12-19T02:22:29.882Z","dependency_job_id":"a5844869-5213-48dc-9637-911cf87e0659","html_url":"https://github.com/koribot/BTE","commit_stats":null,"previous_names":["koribot/boiler-template-extension","koribot/bte"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koribot%2FBTE","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koribot%2FBTE/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koribot%2FBTE/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koribot%2FBTE/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/koribot","download_url":"https://codeload.github.com/koribot/BTE/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247393540,"owners_count":20931809,"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":["boilerplate-template","chrome-extension","chrome-extension-starter","hotreloading","tailwindcss","typescript","vanilla-javascript","webpack"],"created_at":"2024-09-26T02:46:38.647Z","updated_at":"2026-01-17T03:47:06.087Z","avatar_url":"https://github.com/koribot.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BTE - BOILER TEMPALTE FOR BUILDING EXTENSION\n\n\n## FEATURES\n - Hot-reload \n   - it does not preserve state it uses:\n     - `chrome.runtime.reload` and `chrome.tabs.reload`\n     - websocket\n        - hot-reload.js\n        - socket.script.js\n - Typescript\n - Webpack builder\n - Tailwind `postcss`\n\n\n\n## FOLDER STRUCTURE\n - The folder structure is un-opinionated, I just arrange the folder base on my likings\n    - 📁 css\n       - all styles css\n    - 📁 .dist-build\n       - This Is Where The Compiled Typescript, And Files Goes In\n    - 📁 .production-build\n       - production ready using webpack, does not include `zipped` version\n    - 📁 html\n       - all the static html of your extension\n          - popup.html\n          - ....\n    - 📁 scripts\n       - all your scripts\n         - content scripts\n         - background scripts\n         - popup scripts\n    - 📁 lib-js\n         - This is for already build 3rd party libraries in vanila javasript such as minified/uglified jquery, tailwind, and others\n         - I suggest do not put any `.ts` files on this folder as it is ignored by typescript only put \"optimized\" version of `.js` file here\n    - 📁 utils/socket.script.js \n        - This is for development, it connects hot-reload.js to socket.script.js via websocket then socket.script.js communicate with background script to do ***`chrome.runtime.reload`*** and ***`chrome.tabs.reload`***\n        - This will not be included when you build your project\n    \n- ⚙️ manifest.json\n       - Without this the project wont load on browser, lastest version is manifest v3\n       - check [https://developer.chrome.com/docs/extensions/reference/manifest](url)\n  \n   ***You can make as much folder as you want you just need to configure `tsconfig.json` and webpack.config.js***\n\n## HOW TO RUN\n - Install Dev Depencies\n   - yarn install\n - yarn dev\n   - `.dev-build` will be created, use this one to `load unpacked` on the browser\n   - Hot reload ready using websocket\n - Go to [chrome://extensions/](url) and Enable Developer mode \n   - Click ***`Load unpacked`*** and load `\"your project directory\"/src` \n  \n\n    ***\n    YOU NEED TO MANUALLY RELOAD IT FIRST TO ESTABLISH ***`WS`*** CONNECTION (WORKING ON THIS ONE SO YOU WONT NEED TO MANUALLY RELOAD AT FIRST)\n \n    \n\n    YOU ALSO NEED TO ENABLE ***`DEVELOPER MODE`*** FIRST\n\n    [chrome://extensions/](url)\n    ***\n\n## BUILD FOR PRODUCTION\n - yarn build\n   - This uses webpack you can configure it in ***`webpack/webpack.common.config.js`*** and ***`webpack/webpack.prod.js`***\n    -You need to commment several codes when you run build:\n    \n    - You need to comment several codes before running `yarn build` as all this code is for development purpose only\n      - at background.script.ts\n         ```\n        \u003echrome.runtime.onMessage.addListener((request, sender, sendResponse) =\u003e {\n        \u003e  /***COMMENT THIS LINES OF CODES WHEN YOU BUILD THE PROJECT FOR PRODUCTION SO IT WILL NOT BE INCLUDED*/\n        \u003e if (request.type === \"reload\") {\n        \u003e  }\n        \u003e /************************************************************************/\n        \u003e});\n        ```\n      - at manifest.json\n        ```\n          {\n          \"matches\": [\"\u003call_urls\u003e\"],\n          \"js\": [\"dist/utils/socket.script.js\"]\n          },\n        ```\n\n - yarn build-vite\n   - This uses vite but there is problem with copying of the folders, ***`vite.cofig.js`*** 🚧\n      - refer to [issue #1 - vite](https://github.com/koribot/BTE/issues/1)\n  ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoribot%2Fbte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkoribot%2Fbte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoribot%2Fbte/lists"}