{"id":21475826,"url":"https://github.com/shakyshane/html-injector","last_synced_at":"2025-05-05T22:37:53.024Z","repository":{"id":19526681,"uuid":"22774071","full_name":"shakyShane/html-injector","owner":"shakyShane","description":"BrowserSync html injector","archived":false,"fork":false,"pushed_at":"2018-01-13T14:57:15.000Z","size":272,"stargazers_count":78,"open_issues_count":11,"forks_count":21,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-12T21:17:43.781Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/shakyShane.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":"2014-08-08T23:11:34.000Z","updated_at":"2023-05-20T12:57:17.000Z","dependencies_parsed_at":"2022-08-23T20:30:49.371Z","dependency_job_id":null,"html_url":"https://github.com/shakyShane/html-injector","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakyShane%2Fhtml-injector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakyShane%2Fhtml-injector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakyShane%2Fhtml-injector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakyShane%2Fhtml-injector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shakyShane","download_url":"https://codeload.github.com/shakyShane/html-injector/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252588483,"owners_count":21772687,"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-11-23T10:46:14.099Z","updated_at":"2025-05-05T22:37:53.009Z","avatar_url":"https://github.com/shakyShane.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### HTML Injector [![Build Status](https://travis-ci.org/shakyShane/html-injector.svg?branch=master)](https://travis-ci.org/shakyShane/html-injector)\n[Browsersync](http://www.browsersync.io/) plugin for injecting HTML changes without reloading the browser. Requires an existing page with a `\u003cbody\u003e` tag.\n\n## Install (Node V4.0.0 \u0026 above)\n\n```bash\n$ npm i browser-sync bs-html-injector\n```\n\n## Install (Node V0.10.x 0.12.x)\n\n```bash\n$ npm i browser-sync bs-html-injector@2\n```\n\n## Examples \u0026 Recipes including html-injection\n* [Examples folder](https://github.com/shakyShane/html-injector/tree/master/examples)\n* [HTML/CSS injection example](https://github.com/BrowserSync/recipes/tree/master/recipes/html.injection)\n* [Grunt, SASS, HTML/CSS injection example](https://github.com/BrowserSync/recipes/tree/master/recipes/grunt.html.injection)\n\n## Options\n\n**files** - String|Array\nFile watching patterns that will trigger the injection. NOTE: Ensure you are \nnot also watching the same file through the regular Browsersync\nconfig - this will cause a full reload and the inject will not happen\n\n```js\nbrowserSync.use(require(\"bs-html-injector\"), {\n    files: [\"app/*.html\", \"app/templates/**\"]\n});\n```\n\n**restrictions** - Array\nLimit the comparisons to a certain elements.\n\n```js\nbrowserSync.use(require(\"bs-html-injector\"), {\n    files: \"app/*.html\",\n    restrictions: ['#header', '#footer']\n});\n```\n\n**excludedTags** - Array\nWhen working from scratch within the `body` tag, the plugin will work just fine. But when you start\nworking with nested elements, you might want to add the following configuration to improve the \ninjecting.\n\n```js\nbrowserSync.use(require(\"bs-html-injector\"), {\n    files: \"app/*.html\",\n    excludedTags: [\"BODY\"]\n});\n```\n\n\n### Example\nCreate a file called `bs.js` and enter the following: (update the paths to match yours)\n\n```js\n// requires version 2.0 of Browsersync or higher.\nvar browserSync  = require(\"browser-sync\").create();\nvar htmlInjector = require(\"bs-html-injector\");\n\n// register the plugin\nbrowserSync.use(htmlInjector, {\n    // Files to watch that will trigger the injection\n    files: \"app/*.html\" \n});\n\n// now run Browsersync, watching CSS files as normal\nbrowserSync.init({\n  files: \"app/styles/*.css\"\n});\n```\n\n### Gulp example\n\n```js\nvar gulp         = require(\"gulp\");\nvar browserSync  = require(\"browser-sync\").create();\nvar htmlInjector = require(\"bs-html-injector\");\n\n/**\n * Start Browsersync\n */\ngulp.task(\"browser-sync\", function () {\n    browserSync.use(htmlInjector, {\n        files: \"app/*.html\"\n    });\n    browserSync.init({\n        server: \"test/fixtures\"\n    });\n});\n\n/**\n * Default task\n */\ngulp.task(\"default\", [\"browser-sync\"], function () {\n    gulp.watch(\"test/fixtures/*.html\", htmlInjector);\n});\n```\n\n### Grunt example\n```js\n// This shows a full config file!\nmodule.exports = function (grunt) {\n    grunt.initConfig({\n        watch: {\n            files: 'app/scss/**/*.scss',\n            tasks: ['bsReload:css']\n        },\n        sass: {\n            dev: {\n                files: {\n                    'app/css/main.css': 'app/scss/main.scss'\n                }\n            }\n        },\n        browserSync: {\n            dev: {\n                options: {\n                    watchTask: true,\n                    server: './app',\n                    plugins: [\n                        {\n                            module: \"bs-html-injector\",\n                            options: {\n                                files: \"./app/*.html\"\n                            }\n                        }\n                    ]\n                }\n            }\n        },\n        bsReload: {\n            css: \"main.css\"\n        }\n    });\n\n    // load npm tasks\n    grunt.loadNpmTasks('grunt-contrib-sass');\n    grunt.loadNpmTasks('grunt-contrib-watch');\n    grunt.loadNpmTasks('grunt-browser-sync');\n\n    // define default task\n    grunt.registerTask('default', ['browserSync', 'watch']);\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshakyshane%2Fhtml-injector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshakyshane%2Fhtml-injector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshakyshane%2Fhtml-injector/lists"}