# html-webpack-inject-string-plugin

> Injects a custom string either before, after, or replacing a specified string in html-webpack-plugin output

Latest version **1.0.5** (published 2022-09-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install html-webpack-inject-string-plugin
pnpm add html-webpack-inject-string-plugin
yarn add html-webpack-inject-string-plugin
bun add html-webpack-inject-string-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2022-09-03 |
| First published | 2019-11-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | smackjax |
| Maintainers | smackjax |
| Keywords | webpack, html-webpack-plugin, inject-string, custom, minimal |

## Links

- npm: https://www.npmjs.com/package/html-webpack-inject-string-plugin
- Repository: https://github.com/smackjax/html-webpack-inject-string-plugin
- Homepage: https://github.com/smackjax/html-webpack-inject-string-plugin#readme
- Issues: https://github.com/smackjax/html-webpack-inject-string-plugin/issues
- npm.io page: https://npm.io/package/html-webpack-inject-string-plugin

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2022-09-03
- 1.0.4 — 2022-09-03
- 1.0.3 — 2022-09-03
- 1.0.2 — 2019-11-22
- 1.0.1 — 2019-11-21
- 1.0.0 — 2019-11-21

## README

# HTML WEBPACK INJECT STRING PLUGIN
## What's this?
A dead simple plugin that searches each file output by html-webpack-plugin for a custom string(like a '\</body\>' tag) and prepends, replaces, or appends a custom string by injecting it, then returning the completed template.

## Install
`npm i -D html-webpack-inject-string-plugin html-webpack-plugin`

## Config default options 
```javascript

{
    // String to search for
    search: "",
    // String to inject
    inject: "",
    
    // (optional)Injects before found string
    prepend: true
    // (optional)Replaces found string with injection
    replace: false
    // (optional)Injects after found string
    append: false
    
    // (optional)Adds 'r\n\' before or after injection string
    newline: { before: true, after: true }
    // (optional)Enables console.log messages
    dev: false
}
```

## Usage (simple)
``` javascript
const htmlWebpackInjectStringPlugin = require('html-webpack-inject-string-plugin');
{   // ...webpack.config
    plugins: [
        // ...htmlWebpackPlugin({}),
         
        new htmlWebpackInjectStringPlugin({
            // String to search for
            search: "</body>",
            // String to inject
            inject: "<script>alert('injected')</script>"
            // Defaults to prepending injection before search string
        }),
    ]
}
```

## Usage (complex)
``` javascript
const htmlWebpackInjectStringPlugin = require('html-webpack-inject-string-plugin');
{   // ...webpack.config
    plugins: [
        // ...htmlWebpackPlugin({}),
        
        new htmlWebpackInjectStringPlugin({
            // String to search for
            search: "<div id='replace-me'></div>",
            // String to inject
            inject: "<script>alert('injected')</script>",
            
            // NOTE: All three of these can be used at the same time
            // which will inject the same string 3 times in a row
            prepend: true,
            replace: true,
            append: true,
            
            // Removes '\r\n' before and after the injection
            newline: false
            
            // Turns on console log messages if you want to see what it's doing
            dev: true
        }),
    ]
}
```

## Be aware
* Backslashes may need to be escaped twice(three slashes total), because it's run through a compiler first. 

## Wait, isn't this a little dangerous?
Yep! 

## So why would I use it?
Because sometimes it's just incredibly helpful. 

For instance I needed to inject a browser-sync script into each html-webpack file that contained a closing body tag.
I didn't want the boilerplate of adding it individually and conditionally(just in dev mode) to each page.

So I made this plugin to add it automatically and only where and when it was needed.

---
_Source: https://npm.io/package/html-webpack-inject-string-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._