{"id":14989148,"url":"https://github.com/lisonge/tampermonkey-webpack-plugin","last_synced_at":"2025-04-12T01:10:46.793Z","repository":{"id":65380547,"uuid":"345692269","full_name":"lisonge/tampermonkey-webpack-plugin","owner":"lisonge","description":null,"archived":false,"fork":false,"pushed_at":"2022-03-07T12:55:50.000Z","size":81,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-25T20:51:11.221Z","etag":null,"topics":["tampermonkey","webpack","webpack-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/lisonge.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}},"created_at":"2021-03-08T14:56:02.000Z","updated_at":"2022-08-25T04:27:36.000Z","dependencies_parsed_at":"2023-02-20T23:31:06.291Z","dependency_job_id":null,"html_url":"https://github.com/lisonge/tampermonkey-webpack-plugin","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lisonge%2Ftampermonkey-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lisonge%2Ftampermonkey-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lisonge%2Ftampermonkey-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lisonge%2Ftampermonkey-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lisonge","download_url":"https://codeload.github.com/lisonge/tampermonkey-webpack-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248501861,"owners_count":21114684,"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":["tampermonkey","webpack","webpack-plugin"],"created_at":"2024-09-24T14:17:46.235Z","updated_at":"2025-04-12T01:10:46.774Z","avatar_url":"https://github.com/lisonge.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\n * @Date: 2021-03-09 14:10:07\n * @LastEditors: lisonge\n * @Author: lisonge\n * @LastEditTime: 2021-03-14 17:35:21\n--\u003e\n\n# deprecated,  suggested use \u003chttps://github.com/lisonge/vite-plugin-monkey.git\u003e, it is better\n\n# tampermonkey-webpack-plugin\n\n- Insert UserScriptHeaderComment to output file\n\n- Code hot reload with webpack-dev-server\n\n- Full typescript support\n\n## Installation\n\n```shell\npnpm i -D tampermonkey-webpack-plugin\n```\n\n## Usage\n\n### production mode\n\n```ts\nimport { TampermonkeyWebpackPlugin } from 'tampermonkey-webpack-plugin';\nnew TampermonkeyWebpackPlugin({\n  minAlignSpace: 4,\n  header: {\n    author: 'author',\n    name: ['Tampermonkey-hot', ['zh', '油猴脚本-热重载']],\n    description: ['description', ['zh', '描述']],\n    namespace: 'https://dev.songe.li/',\n    icon: 'https://cdn.jsdelivr.net/gh/lisonge/src@main/svg/tampermonkey.svg',\n    version: '1.0.1',\n    include: [/https:\\/\\/dev\\.songe\\.li.*/, 'https://dev.songe.li/*'],\n    grant: ['unsafeWindow', 'GM_setValue', 'GM_setValue', 'GM_xmlhttpRequest'],\n    externals: [['tag', 'value']],\n  },\n});\n```\n\n```shell\nnpx webpack --mode=production --progress --config webpack.config.ts\n```\n\n### development mode\n\n```ts\nimport path from 'path';\nimport { Configuration } from 'webpack';\nimport { CleanWebpackPlugin } from 'clean-webpack-plugin';\nimport { TampermonkeyWebpackPlugin } from 'tampermonkey-webpack-plugin';\nimport { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';\n\n\nexport default {\n  devtool: 'inline-source-map', // necessary\n  output: {\n    publicPath: 'http://127.0.0.1:8080/', // necessary\n  },\n  plugins: [\n    new TampermonkeyWebpackPlugin({\n      minAlignSpace: 4,\n      header: {\n        author: 'author',\n        name: ['Tampermonkey-hot', ['zh', '油猴脚本-热重载']],\n        description: ['description', ['zh', '描述']],\n        namespace: 'https://dev.songe.li/',\n        icon:\n          'https://cdn.jsdelivr.net/gh/lisonge/src@main/svg/tampermonkey.svg',\n        version: '1.0.1',\n        include: [/https:\\/\\/dev\\.songe\\.li.*/, 'https://dev.songe.li/*'],\n        grant: [\n          'unsafeWindow',\n          'GM_setValue',\n          'GM_setValue',\n          'GM_xmlhttpRequest',\n        ],\n        externals: [['tag', 'value']],\n      },\n      devServer: {\n        proxyUserJsFileName: 'dev-server-proxy.user.js',\n      },\n    }),\n  ],\n  devServer: {\n    host: '127.0.0.1',\n    port: 8080,\n    filename: 'index.js', // necessary\n    disableHostCheck: true, // necessary\n    headers: {\n      'Access-Control-Allow-Origin': '*',\n      'Access-Control-Allow-Headers': '*',\n    }, // necessary\n  } as WebpackDevServerConfiguration,\n} as Configuration;\n```\n\n```shell\nnpx webpack serve --mode=development --config webpack.config.ts\n```\n\nyour console will log `proxy script url`, it should be `http://${host}:${port}/${proxyUserJsFileName}`\n\nif the url end with '.user.js', visit it in the browser address bar\n\ntampermonkey will auto guide the installation\n\n## Note\n\nAccording to the way tampermonkey works, when use webpack-dev-server\n\nin fact your code will work between `origin-host` and `server-host`\n\nso we need to modify some configuration\n\n```ts\nconst host = '127.0.0.1';\nconst port = 8080;\n\n// webpack-dev-server hot-reload default use relative path\n// code will work between `origin-host` and `server-host`\n// we need set absolute URL\nconfig.output.publicPath = `http://${host}:${port}/`;\n\n// tampermonkey use single .js file\nconfig.devtool = 'inline-source-map';\n\nconfig.devServer = {\n  host,\n  port,\n  filename: 'index.js', // because config.ouput.filename may use [hash], so devServer.filename must be static\n  disableHostCheck: true, // code will work between `origin-host` and `server-host`\n  headers: {\n    'Access-Control-Allow-Origin': '*',\n    'Access-Control-Allow-Headers': '*',\n  }, // code will work between `origin-host` and `server-host`\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flisonge%2Ftampermonkey-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flisonge%2Ftampermonkey-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flisonge%2Ftampermonkey-webpack-plugin/lists"}