{"id":13472510,"url":"https://github.com/pacexy/mv3-hot-reload","last_synced_at":"2025-04-09T10:09:38.679Z","repository":{"id":38409931,"uuid":"384653072","full_name":"pacexy/mv3-hot-reload","owner":"pacexy","description":"Enable hot reloading for content script and background script (service worker) in MV3.","archived":false,"fork":false,"pushed_at":"2024-08-24T13:50:44.000Z","size":125,"stargazers_count":83,"open_issues_count":6,"forks_count":14,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-02T05:09:33.637Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/pacexy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2021-07-10T08:49:02.000Z","updated_at":"2024-12-17T08:24:30.000Z","dependencies_parsed_at":"2024-10-30T03:50:29.805Z","dependency_job_id":null,"html_url":"https://github.com/pacexy/mv3-hot-reload","commit_stats":{"total_commits":21,"total_committers":4,"mean_commits":5.25,"dds":0.1428571428571429,"last_synced_commit":"b8a9c4e2acf688ffd7b0a45e7c9e208c020293e3"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pacexy%2Fmv3-hot-reload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pacexy%2Fmv3-hot-reload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pacexy%2Fmv3-hot-reload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pacexy%2Fmv3-hot-reload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pacexy","download_url":"https://codeload.github.com/pacexy/mv3-hot-reload/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248018061,"owners_count":21034048,"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":[],"created_at":"2024-07-31T16:00:55.237Z","updated_at":"2025-04-09T10:09:38.656Z","avatar_url":"https://github.com/pacexy.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# mv3-hot-reload\n\nEnable hot reloading for content script and background script (service worker) in MV3.\n\n## Install\n\n```\nyarn add mv3-hot-reload\n```\n\n## How to use\n\n### 1. Inject the code for hot reloading\n\n#### Leverage Webpack's \"multi-main entry\" (Recommended)\n\n```ts\n// webpack.config.ts\nconst isDev = process.env.NODE_ENV === 'development'\n\n/**\n * @param entryType specify the entry type for different entry names than 'content' or 'background'\n */\nfunction getEntry(name: string, entryType?: 'content' | 'background') {\n  return [path.join(srcDir, name), ...(isDev ? [`mv3-hot-reload/${entryType ?? name}`] : [])]\n}\n\nconst webpackConfig = {\n  // ...\n  entry: {\n    // ...\n    background: getEntry('background'),\n    content: getEntry('content'),\n    anotherContentScript: getEntry('anotherContentScriptFolder', 'content'),\n  },\n}\n```\n\n#### Import files into your background script (service worker) and content script\n\nThe code for hot reloading will only execute when `process.env.NODE_ENV === 'development'`.\n\n```ts\n// background.ts\nimport 'mv3-hot-reload/background'\n\n// your code...\n```\n\n```ts\n// content.ts\nimport 'mv3-hot-reload/content'\n\n// your code...\n```\n\n### 2. Add a script to your `package.json` and run it before development\n\nExample:\n\n```diff\n    \"watch:src\": \"webpack --config webpack/webpack.dev.js --watch\",\n+   \"watch:dist\": \"mv3-hot-reload\",\n+   \"dev\": \"concurrently yarn:watch:*\",\n```\n\n## mv3-hot-reload.config.js (Optional)\n\n```js\nmodule.exports = {\n  // Specify the port of hot reload server, defaults to 9012\n  port: 9012,\n  // Specify the directory you want to watch, defaults to 'dist'\n  directory: 'dist',\n  // Specifies an array of filenames that should be excluded in watched directory\n  exclude: [],\n}\n```\n\nIf you want to set the port, you also need to expose it with `process.env.MV3_HOT_RELOAD_PORT` to\nthe client side.\n\nAn example:\n\n```js\n// webpack.config.js\n\nconst config = require('./mv3-hot-reload.config')\n\nmodule.exports = {\n  // ...\n  plugins: [\n    new webpack.EnvironmentPlugin({\n      MV3_HOT_RELOAD_PORT: config.port,\n    }),\n  ],\n}\n```\n\n## Example\n\n[pacexy/chrome-extension-typescript-starter](https://github.com/pacexy/chrome-extension-typescript-starter)\n\n## Credits\n\nThe implementation of hot reloading in mv3 refers to [theprimone/violet](https://github.com/theprimone/violet).\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpacexy%2Fmv3-hot-reload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpacexy%2Fmv3-hot-reload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpacexy%2Fmv3-hot-reload/lists"}