{"id":13606022,"url":"https://github.com/altrusl/vite-plugin-html-injection","last_synced_at":"2025-04-09T16:05:48.489Z","repository":{"id":187377147,"uuid":"676785491","full_name":"altrusl/vite-plugin-html-injection","owner":"altrusl","description":"Vite plugin for injecting html, js, css code snippets into index.html","archived":false,"fork":false,"pushed_at":"2025-01-30T04:25:05.000Z","size":160,"stargazers_count":33,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-09T16:05:42.704Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/altrusl.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":"2023-08-10T02:33:29.000Z","updated_at":"2025-04-09T15:54:23.000Z","dependencies_parsed_at":"2024-01-07T18:05:17.922Z","dependency_job_id":"a205fb75-e91e-4386-8867-a28d44274139","html_url":"https://github.com/altrusl/vite-plugin-html-injection","commit_stats":null,"previous_names":["altrusl/vite-plugin-html-injection"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/altrusl%2Fvite-plugin-html-injection","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/altrusl%2Fvite-plugin-html-injection/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/altrusl%2Fvite-plugin-html-injection/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/altrusl%2Fvite-plugin-html-injection/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/altrusl","download_url":"https://codeload.github.com/altrusl/vite-plugin-html-injection/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248065289,"owners_count":21041871,"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-08-01T19:01:05.292Z","updated_at":"2025-04-09T16:05:48.473Z","avatar_url":"https://github.com/altrusl.png","language":"TypeScript","funding_links":[],"categories":["Plugins"],"sub_categories":["Framework-agnostic Plugins"],"readme":"# Html Injection Vite Plugin\n\n[![NPM](https://img.shields.io/npm/v/vite-plugin-html-injection)](https://www.npmjs.com/package/vite-plugin-html-injection)\n[![NPM downloads](https://img.shields.io/npm/dt/vite-plugin-html-injection)](https://www.npmjs.com/package/vite-plugin-html-injection)\n\n[🇬🇧 English](README.md) | [🇪🇸 Español](README.es.md) | [🇷🇺 Русский](README.ru.md) | [🇨🇳 中文](README.zh.md)\n\nVite plugin for injecting HTML, JS, and CSS code snippets into `index.html`.\n\n## Purpose\n\nOften, when developing front-end applications, it is necessary to integrate various libraries into the `index.html` file - for example, you might want to include code for Google Analytics, PWA service workers, Open Graph and Twitter Card meta data, Splash screens, Customer support widgets, and much more.\n\nAs a result, `index.html` becomes bloated and hard to manage.\n\nThis plugin allows you to store code snippets in separate files, keeping `index.html` clean and pristine, and inject them at build time. There is no need for special placeholder tags in the `index.html` as well.\n\nThe plugin also supports `Vite dev server HMR`, which means you can edit code snippets and see the results immediately in the browser.\n\nAdditionally, the plugin allows for different configurations in development and production modes. By specifying the `buildModes` property, you can enable or disable specific code snippets depending on the environment, simplifying development and reducing unnecessary code in Dev mode.\n\n## Description\n\nThere are three `types` of code snippets - `raw`, `js`, and `css`. `raw` snippets are injected as-is, while `js` and `css` snippets are wrapped in `\u003cscript\u003e` and `\u003cstyle\u003e` tags respectively. The default `type` value is `raw`.\n\nThere are four places where you can inject a code snippet into the `index.html`:\n- The beginning of the `\u003chead\u003e` tag (`head-prepend`)\n- The end of the `\u003chead\u003e` tag (`head`)\n- The beginning of the `\u003cbody\u003e` tag (`body-prepend`)\n- The end of the `\u003cbody\u003e` tag (`body`)\n\nCorresponding `injectTo` values are: `head-prepend`, `head`, `body-prepend`, and `body`.\n\n\u003cbr\u003e\n\n## Installation\n\n\n```bash\npnpm add vite-plugin-html-injection -D\n```\n```bash\nyarn add vite-plugin-html-injection -D\n```\n```bash\nnpm i vite-plugin-html-injection -D\n```\n\n\u003cbr\u003e\n\n## Usage\n\n1. Add **`vite-plugin-html-injection`** to your Vite plugins with required configuration:\n\n```js\n// vite.config.js\n\nimport { defineConfig } from \"vite\";\nimport { htmlInjectionPlugin } from \"vite-plugin-html-injection\";\n\nexport default defineConfig({\n  plugins: [\n    htmlInjectionPlugin({\n      // transformation order - set to \"pre\" to use env variable replacement in html files\n      // See https://vite.dev/guide/api-plugin.html#transformindexhtml\n      order: \"pre\",\n      // example injections\n      injections: [\n        {\n          // (optional) injection name\n          name: \"Open Graph\",\n          // path to the code snippet file relative to Vite project root\n          path: \"./src/injections/open-graph.html\",\n          // (optional) code snippet type: raw | js | css\n          type: \"raw\",\n          // where to inject: head | body | head-prepend | body-prepend\n          injectTo: \"head\",\n          // (optional) which modes apply to: dev | prod | both\n          buildModes: \"both\",\n        },\n        {\n          name: \"Google analytics\",\n          path: \"./src/injections/ga.html\",\n          type: \"raw\",\n          injectTo: \"body\",\n          buildModes: \"prod\",\n        },\n      ],\n    }),\n  ],\n});\n```\n\n\u003e #### Hint:\n\u003e\n\u003e You can place config object in a separate json file and import it in the vite.config.js\n\n\u003cbr\u003e\n\n2. Create corresponding code snippets:\n\n```html\n\u003c!-- ./src/injections/open-graph.html --\u003e\n\n\u003c!-- Facebook Meta Tags --\u003e\n\u003cmeta property=\"og:url\" content=\"https://www.acme.com/\" /\u003e\n\u003cmeta property=\"og:type\" content=\"website\" /\u003e\n\u003cmeta property=\"og:title\" content=\"My Acme website\" /\u003e\n\u003cmeta property=\"og:description\" content=\"Welcome to my Acme website\" /\u003e\n\u003cmeta property=\"og:image\" content=\"https://www.acme.com/logo.png\" /\u003e\n```\n\n```html\n\u003c!-- ./src/injections/ga.html --\u003e\n\n\u003c!-- Google tag (gtag.js) --\u003e\n\u003cscript async src=\"https://www.googletagmanager.com/gtag/js?id=G-8W4X32XXXX\" /\u003e\n\u003cscript\u003e\n  window.dataLayer = window.dataLayer || [];\n  function gtag() {\n    dataLayer.push(arguments);\n  }\n  gtag(\"js\", new Date());\n\n  gtag(\"config\", \"G-8W4X32XXXX\");\n\u003c/script\u003e\n```\n\n\u003cbr\u003e\n\nThat's it. After running `npm serve` or `npm build` command the code snippets will be injected.\n\n\u003cbr\u003e\n\n## Signature\n\nThe plugin is strongly typed. Here is the signature of its configuration:\n\n```ts\nexport interface IHtmlInjectionConfig {\n  injections: IHtmlInjectionConfigInjection[];\n  order?: \"pre\" | \"post\";\n}\n\nexport interface IHtmlInjectionConfigInjection {\n  name?: string;\n  path: string;\n  type?: \"raw\" | \"js\" | \"css\"; // default is 'raw'\n  injectTo: \"head\" | \"body\" | \"head-prepend\" | \"body-prepend\";\n  buildModes?: \"dev\" | \"prod\" | \"both\"; // default is 'both'\n}\n```\n\n\u003cbr\u003e\n\n## If you like it, star it\n\nThank you!\n\n\u003cbr\u003e\n\n## Contributing\n\n\nYou are welcome to make suggestions through [GitHub Issues](https://github.com/vite-plugin-html-injection/issues) or extend functionality by [forking, modifying, and making a PR](https://github.com/vite-plugin-html-injection/pulls) to this Vite plugin.\n\n\u003cbr\u003e\n\n## License\n\nMIT License © 2023-2025\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faltrusl%2Fvite-plugin-html-injection","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faltrusl%2Fvite-plugin-html-injection","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faltrusl%2Fvite-plugin-html-injection/lists"}