{"id":21434407,"url":"https://github.com/serguun42/serguun42-webpack-userscript","last_synced_at":"2026-04-18T01:01:40.784Z","repository":{"id":128965910,"uuid":"481014484","full_name":"serguun42/serguun42-webpack-userscript","owner":"serguun42","description":"Fork of webpack-userscript plugin","archived":false,"fork":false,"pushed_at":"2022-04-13T00:46:47.000Z","size":11,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-16T22:46:51.685Z","etag":null,"topics":["greasemonkey","tampermonkey","userscript","violentmonkey","webpack"],"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/serguun42.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":"2022-04-13T00:19:18.000Z","updated_at":"2022-04-13T17:33:01.000Z","dependencies_parsed_at":"2023-06-15T01:45:08.050Z","dependency_job_id":null,"html_url":"https://github.com/serguun42/serguun42-webpack-userscript","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/serguun42/serguun42-webpack-userscript","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serguun42%2Fserguun42-webpack-userscript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serguun42%2Fserguun42-webpack-userscript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serguun42%2Fserguun42-webpack-userscript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serguun42%2Fserguun42-webpack-userscript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/serguun42","download_url":"https://codeload.github.com/serguun42/serguun42-webpack-userscript/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serguun42%2Fserguun42-webpack-userscript/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31952206,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"ssl_error","status_checked_at":"2026-04-18T00:39:20.671Z","response_time":62,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["greasemonkey","tampermonkey","userscript","violentmonkey","webpack"],"created_at":"2024-11-22T23:35:44.276Z","updated_at":"2026-04-18T01:01:40.761Z","avatar_url":"https://github.com/serguun42.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# serguun42-webpack-userscript\n\nThis is fork of [webpack-userscript by MomoCow](https://github.com/momocow/webpack-userscript) for limited purposes. Consider using [the original npm package](https://www.npmjs.com/package/webpack-userscript).\n\n* Only purpose of this plugin is to upgrade it for webpack 5+ versions\n* * `peerDependencies` in [package.json](./package.json) are set to `\"webpack\": \"\u003e=4.0.0\"`\n* * [Main file](./lib/index.js) updated with `compilation.hooks.processAssets` – webpack's 5+ API\n* Cut off SSRI and ProxyConfig\n* No explicit support for hot reload from original\n\n⏬ Original README below ⏬\n\n-----\n\n# webpack-userscript\n[![Build Status](https://travis-ci.org/momocow/webpack-userscript.svg?branch=master)](https://travis-ci.org/momocow/webpack-userscript)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n[![npm](https://img.shields.io/npm/v/webpack-userscript.svg)](https://www.npmjs.com/webpack-userscript)\n[![Gitmoji](https://img.shields.io/badge/gitmoji-%20😜%20😍-FFDD67.svg?style=flat-square)](https://gitmoji.carloscuesta.me/)\n\nA Webpack4+ plugin for userscript projects. 🙈\n\n\u003e The package has been renamed from `webpack-tampermonkey`.\n\n## Features\n- Combine your userscript development with Webpack\n  \u003e With powerful Webpack support, you can even package everything in your userscript, e.g. icons and json data.\n- Ability to generate userscript headers\n- Ability to generate both `.user.js` and `.meta.js`\n  \u003e `.meta.js` is used for update check containing headers only.\n- Properly track files in watch mode\n  \u003e Including external header files and package.json.\n- Helper mode to integrate with Webpack Dev Server and TamperMonkey.\n  \u003e Additionally ouput proxy scripts along with main userscripts, which looks similar with `*.meta.js` but with additional `@require` meta field to include the main userscript, then you can set your TamperMonkey not to cache external files. It's useful when the script is under development.\n- Support generating SRIs for `@require` and `@resource` URLs if the protocol is either `http` or `https`.\n  \u003e since v2.5.0\n\n## Installation\n```bash\nnpm i webpack-userscript -D\n```\n\n## Usage\n\n### webpack.config.js\n\nInclude the plugin in the `webpack.config.js` as the following example.\n\n```js\nconst WebpackUserscript = require('webpack-userscript')\n\nmodule.exports = {\n  plugins: [\n    new WebpackUserscript()\n  ]\n}\n```\n\n## Examples\n\n### Hot Development\nThe following example can be used in development mode with the help of [`webpack-dev-server`](https://github.com/webpack/webpack-dev-server).\n\n`webpack-dev-server` will build the userscript in **watch** mode. Each time the project is built, the `buildNo` variable will increase by 1.\n\n\u003e **Notes**: `buildNo` will be reset to 0 if the dev server is terminated. In this case, if you expect the build version to be persisted during dev server restarting, you can use the `buildTime` variable instead.\n\nIn the following configuration, a portion of the `version` contains the `buildNo`; therefore, each time there is a build, the `version` is also increased so as to indicate a new update available for the script engine like Tampermonkey or GreaseMonkey.\n\nAfter the first time starting the `webpack-dev-server`, you can install the script via `http://localhost:8080/\u003cproject-name\u003e.user.js` (the URL is actually refered to your configuration of `webpack-dev-server`). Once installed, there is no need to manually reinstall the script until you stop the server. To update the script, the script engine has an **update** button on the GUI for you.\n\n- `webpack.config.dev.js`\n```js\nconst path = require('path')\nconst WebpackUserscript = require('webpack-userscript')\nconst dev = process.env.NODE_ENV === 'development'\n\nmodule.exports = {\n  mode: dev ? 'development' : 'production',\n  entry: path.resolve(__dirname, 'src', 'index.js'),\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: '\u003cproject-name\u003e.user.js'\n  },\n  devServer: {\n    contentBase: path.join(__dirname, 'dist')\n  },\n  plugins: [\n    new WebpackUserscript({\n      headers: {\n        version: dev ? `[version]-build.[buildNo]` : `[version]`\n      }\n    })\n  ]\n}\n```\n\n### Integration with Webpack Dev Server and TamperMonkey\nIf you feel tired with firing the update button on TamperMonkey GUI, maybe you can have a try at proxy script.\n\nA proxy script actually looks similar with the content of `*.meta.js` except that it contains additional `@require` field to include the main userscript. A proxy script is used since TamperMonkey has an option that makes external scripts always be update-to-date without caching, and external scripts are included into userscripts via the `@require` meta field. (You may also want to read this issue, [Tampermonkey/tampermonkey#767](https://github.com/Tampermonkey/tampermonkey/issues/767#issuecomment-542813282))\n\nTo avoid caching and make the main script always be updated after each page refresh, we have to make our main script **\"an external resource\"**. That is where the proxy script comes in, it provides TamperMonkey with a `@require` pointint to the URL of the main script on the dev server, and each time you reload your testing page, it will trigger the update.\n\n\u003e Actually it requires 2 reloads for each change to take effect on the page. The first reload trigger the update of external script but without execution (it runs the legacy version of the script), the second reload will start to run the updated script. \n\u003e \n\u003e I have no idea why TamperMonkey is desinged this way. But..., it's up to you!\n\nTo enable the proxy script, provide a `proxyScript` configuration to the plugin constructor.\n\nSet `proxyScript.enable` to `true` will always enable proxy script, or you can provide a function that returns boolean. In the example below, the proxy script is enabled if the environment contains a variable, `LOCAL_DEV`, which is equal to `\"1\"`.\n\n`baseUrl` should be the base URL of the dev server, and the `filename` is for the proxy script.\n\nAfter starting the dev server, you can find your proxy script under `\u003cbaseUrl\u003e/\u003cfilename\u003e`. In the example below, assume the entry filename is `index.js`, you should visit `http://127.0.0.1:12345/index.proxy.user.js` to install the proxy script on TamperMonkey.\n\n\u003e Notes that the leaf values of `proxyScript` with also be interpolated; that is, template variables which can be found [here](#dataobject) are also supported inside these string settings.\n\n```js\nnew WebpackUserscript({\n  // \u003c...your other configs...\u003e,\n  proxyScript: {\n    baseUrl: 'http://127.0.0.1:12345',\n    filename: '[basename].proxy.user.js',\n    enable: () =\u003e process.env.LOCAL_DEV === '1'\n  }\n})\n```\n\n### Other\nOther examples can be found under [the test fixture folder](./test/fixtures).\n\n## Configuration\n### WebpackUserscript\nThe `WebpackUserscript` constructor has the following signature.\n```js\nnew WebpackUserscript(options)\n```\n\n### options\n\u003e Also see [the schema of options](./lib/schemas/options.json).\n\n```ts\ntype WebpackUserscriptOptions =\n  WPUSOptions |\n  HeaderFile |   // shorthand for WPUSOptions.headers\n  HeaderProvider // shorthand for WPUSOptions.headers\n```\n\n#### WPUSOptions\n```ts\ninterface WPUSOptions {\n  headers: HeaderFile | HeaderProvider | HeaderObject\n\n  /**\n   * Output *.meta.js or not\n   */\n  metajs: boolean\n\n  /**\n   * Rename all .js files to .user.js files.\n   */\n  renameExt: boolean\n\n  /**\n   * Prettify the header\n   */\n  pretty: boolean\n\n  /**\n   * Base URL for downloadURL.\n   * If not provided, it will be set to `updateBaseUrl` if `updateBaseUrl` is provided\n   */\n  downloadBaseUrl: string\n\n  /**\n   * Base URL for updateURL\n   * If not provided, it will be set to `downloadBaseUrl` if `downloadBaseUrl` is provided\n   */\n  updateBaseUrl: string\n\n\n  /**\n   * Looks similar with `*.meta.js` but with additional `@require` meta field to include the main userscript.\n   * It can be useful if you set the TamperMonkey not to cache external files.\n   */\n  proxyScript: {\n    /**\n     * filename template of the proxy script, defaults to \"[basename].proxy.user.js\"\n     */\n    filename: string\n\n    /**\n     * Base URL of the dev server\n     */\n    baseUrl: string\n\n    /**\n     * Whether to enable proxy script generation,\n     * default value depends on whether `process.env.WEBPACK_DEV_SERVER` is `\"true\"` or not\n     */\n    enable: boolean | (() =\u003e boolean)\n  }\n\n  ssri: boolean | {\n    /**\n     * URL filters.\n     * Each of them is actually testing against a string compound of the meta field and the url.\n     * For example, if a header is provided as `{ require: \"http://example.com/sth.js\" }`,\n     * a string of \"// @require http://example.com/sth.js\" is tested with the provided filters.\n     */\n    include: string | RegExp | string[] | RegExp[]\n    exclude: string | RegExp | string[] | RegExp[]\n\n    /**\n     * @see https://github.com/npm/ssri#--integritystreamopts---integritystream\n     */\n    algorithms: (\"sha256\" | \"sha384\" | \"sha512\")[]\n    integrity: string\n    size: number\n  }\n}\n```\n\n#### HeaderFile\nA path to a js or json file which exports a header object or a header provider function.\n\n```ts\ntype HeaderFile = string\n```\n\n#### HeaderProvider\nA function that returns a header object.\n\n```ts\ntype HeaderProvider = (data: DataObject) =\u003e HeaderObject\n```\n\n#### HeaderObject\nA header object, whose leaves are webpack-like template strings in `[\u003cvar_name\u003e]` format. Available variables can be found at [DataObject](#dataobject).\n\n\u003e Also see [explicit-config/webpack.config.js](./test/fixtures/explicit-config/webpack.config.js#L13) and [template-strings/webpack.config.js](./test/fixtures/template-strings/webpack.config.js#L16).\n\n```ts\ntype HeaderObject = Record\u003cstring, string | Array\u003cstring\u003e\u003e\n```\n\n#### DataObject\nLocal variables used to interpolate the templates of a [HeaderObject](#headerobject).\n\n```ts\ninterface DataObject {\n  /**\n   * Hash of Webpack compilation\n   */\n  hash: string\n\n  /**\n   * Webpack chunk hash\n   */\n  chunkHash: string\n\n  /**\n   * Webpack chunk name\n   */\n  chunkName: string\n\n  /**\n   * Entry file path, which may contain queries\n   */\n  file: string\n\n  /**\n   * just like `file` but without queries\n   */\n  filename: string\n\n  /**\n   * just like `filename` but without file extension, i.e. \".user.js\" or \".js\"\n   */\n  basename: string\n\n  /**\n   * Query string\n   */\n  query: string\n\n  /**\n   * Build number\n   */\n  buildNo: number\n\n  /**\n   * the 13-digits number represents the time the script is built\n   */\n  buildTime: number\n\n  /**\n   * Info from package.json\n   */\n  name: string\n  version: string\n  description: string\n  author: string\n  homepage: string\n  bugs: string // URL\n}\n```\n\n\u003e Also see [template-strings/webpack.config.js](./test/fixtures/template-strings/webpack.config.js#L16).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserguun42%2Fserguun42-webpack-userscript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fserguun42%2Fserguun42-webpack-userscript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserguun42%2Fserguun42-webpack-userscript/lists"}