创建基于ts+webpack的chrome插件项目
参考文档 - webpack https://www.webpackjs.com/guides/
参考文档 - webpack loader https://www.webpackjs.com/loaders/
参考文档 - tsconfig.json https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
自动化创建工程
手动创建工程目录,然后在该目录执行以下脚本内容
# 初始化工程(不使用npm init)
echo >> package.json '{'
echo >> package.json ' "name": "crx-demo",'
echo >> package.json ' "version": "1.0.0",'
echo >> package.json ' "description": "根据Demo模板自动化创建的crx工程",'
echo >> package.json ' "private": true,'
echo >> package.json ' "scripts": {'
echo >> package.json ' "build": "webpack --config webpack.prod.js",'
echo >> package.json ' "watch": "webpack --config webpack.prod.js --watch",'
echo >> package.json ' "start": "webpack-dev-server --config webpack.dev.js --open"'
echo >> package.json ' },'
echo >> package.json ' "keywords": [],'
echo >> package.json ' "author": "Demo",'
echo >> package.json ' "license": "ISC",'
echo >> package.json ' "dependencies": {},'
echo >> package.json ' "devDependencies": {'
echo >> package.json ' "@babel/core": "^7.9.6",'
echo >> package.json ' "@babel/plugin-transform-runtime": "^7.9.6",'
echo >> package.json ' "@babel/preset-env": "^7.9.6",'
echo >> package.json ' "babel-loader": "^8.1.0",'
echo >> package.json ' "copy-webpack-plugin": "^11.0.0",'
echo >> package.json ' "ts-loader": "^9.3.1",'
echo >> package.json ' "typescript": "^4.7.4",'
echo >> package.json ' "uglifyjs-webpack-plugin": "^2.2.0",'
echo >> package.json ' "webpack": "^5.74.0",'
echo >> package.json ' "webpack-cli": "^4.10.0",'
echo >> package.json ' "webpack-dev-server": "^4.9.3",'
echo >> package.json ' "webpack-merge": "^5.8.0"'
echo >> package.json ' }'
echo >> package.json '}'
# wepack的配置文件(生产和开发环境都需要的配置)
echo >> webpack.common.js "const path = require('path');"
echo >> webpack.common.js ""
echo >> webpack.common.js "module.exports = {"
echo >> webpack.common.js " entry: {"
echo >> webpack.common.js " bg: './src/bg.ts',"
echo >> webpack.common.js " page: './src/page.ts'"
echo >> webpack.common.js " },"
echo >> webpack.common.js " output: {"
echo >> webpack.common.js " filename: '[name].js',"
echo >> webpack.common.js " path: path.resolve(__dirname, 'dist', 'js')"
echo >> webpack.common.js " },"
echo >> webpack.common.js ""
echo >> webpack.common.js " resolve: {"
echo >> webpack.common.js " extensions: ['.ts', '.js' ]"
echo >> webpack.common.js " },"
echo >> webpack.common.js " "
echo >> webpack.common.js " module: {"
echo >> webpack.common.js " rules: ["
echo >> webpack.common.js " { test: /\.ts$/, loader: 'ts-loader' },"
echo >> webpack.common.js " {"
echo >> webpack.common.js " test: /\.js$/,"
echo >> webpack.common.js " exclude: /(node_modules|bower_components)/,"
echo >> webpack.common.js " use: {"
echo >> webpack.common.js " loader: 'babel-loader',"
echo >> webpack.common.js " options: {"
echo >> webpack.common.js " presets: ['@babel/preset-env'],"
echo >> webpack.common.js " plugins: ['@babel/transform-runtime']"
echo >> webpack.common.js " }"
echo >> webpack.common.js " }"
echo >> webpack.common.js " }"
echo >> webpack.common.js " ]"
echo >> webpack.common.js " }"
echo >> webpack.common.js "};"
# ts配置文件
echo >> tsconfig.json '{'
echo >> tsconfig.json ' "compilerOptions": {'
echo >> tsconfig.json ' "moduleResolution": "node",'
echo >> tsconfig.json ' "outDir": "./dist/",'
echo >> tsconfig.json ' "noImplicitAny": true,'
echo >> tsconfig.json ' "module": "es6",'
echo >> tsconfig.json ' "target": "es5",'
echo >> tsconfig.json ' "allowJs": true'
echo >> tsconfig.json ' }'
echo >> tsconfig.json '}'
# webpack开发环境配置文件
echo >> webpack.dev.js "const {merge} = require('webpack-merge');"
echo >> webpack.dev.js "const common = require('./webpack.common.js');"
echo >> webpack.dev.js ""
echo >> webpack.dev.js "module.exports = merge(common, {"
echo >> webpack.dev.js " mode: 'development',"
echo >> webpack.dev.js " devtool: 'inline-source-map',"
echo >> webpack.dev.js " devServer: {"
echo >> webpack.dev.js " static: './dist'"
echo >> webpack.dev.js " }"
echo >> webpack.dev.js "});"
# webpack生产环境配置文件
echo >> webpack.prod.js "const {merge} = require('webpack-merge');"
echo >> webpack.prod.js "const UglifyJSPlugin = require('uglifyjs-webpack-plugin');"
echo >> webpack.prod.js "const common = require('./webpack.common.js');"
echo >> webpack.prod.js "const copy = require('copy-webpack-plugin')"
echo >> webpack.prod.js ""
echo >> webpack.prod.js "module.exports = merge(common, {"
echo >> webpack.prod.js " mode: 'production',"
echo >> webpack.prod.js " devtool: 'source-map',"
echo >> webpack.prod.js " plugins: ["
echo >> webpack.prod.js " new UglifyJSPlugin({"
echo >> webpack.prod.js " sourceMap: true"
echo >> webpack.prod.js " }),"
echo >> webpack.prod.js " new copy({"
echo >> webpack.prod.js " patterns: ["
echo >> webpack.prod.js " {"
echo >> webpack.prod.js " from: __dirname + '/manifest.json',"
echo >> webpack.prod.js " to: __dirname + '/dist/manifest.json'"
echo >> webpack.prod.js " }"
echo >> webpack.prod.js " ]"
echo >> webpack.prod.js " })"
echo >> webpack.prod.js " ]"
echo >> webpack.prod.js "});"
# 创建源码目录层次
mkdir src
# 创建ts入口
echo >> src/bg.ts "console.log('bg...');"
echo >> src/page.ts "console.log('page...');"
# 创建manifest文件
echo >> manifest.json '{'
echo >> manifest.json ' "name": "Chrome Extensions",'
echo >> manifest.json ' "description": "Base Level Extension",'
echo >> manifest.json ' "version": "1.0",'
echo >> manifest.json ' "manifest_version": 2,'
echo >> manifest.json ' "background": {'
echo >> manifest.json ' "scripts": ['
echo >> manifest.json ' "js/bg.js"'
echo >> manifest.json ' ]'
echo >> manifest.json ' },'
echo >> manifest.json ' "content_scripts": ['
echo >> manifest.json ' {'
echo >> manifest.json ' "matches": ['
echo >> manifest.json ' "*://*/*"'
echo >> manifest.json ' ],'
echo >> manifest.json ' "js": ['
echo >> manifest.json ' "js/page.js"'
echo >> manifest.json ' ],'
echo >> manifest.json ' "run_at": "document_start"'
echo >> manifest.json ' }'
echo >> manifest.json ' ],'
echo >> manifest.json ' "permissions": ['
echo >> manifest.json ' "cookies",'
echo >> manifest.json ' "webRequest",'
echo >> manifest.json ' "webRequestBlocking",'
echo >> manifest.json ' "storage",'
echo >> manifest.json ' "browsingData",'
echo >> manifest.json ' "tabs",'
echo >> manifest.json ' "*://*/*"'
echo >> manifest.json ' ]'
echo >> manifest.json '}'
# 创建README.md
echo >> README.md '# 使用说明'
echo >> README.md ''
echo >> README.md '## 文件目录说明'
echo >> README.md ''
echo >> README.md '* `dist` -- 文件输出目录(生产环境编译后出现)'
echo >> README.md '* `dist/js/bg.js` -- 自动生成的js打包文件(生产环境编译后出现),注意,bg是background.js,page是content.js'
echo >> README.md '* `dist/js/bg.js.map` -- source map文件(生产环境编译后出现),注意,bg是background.js,page是content.js'
echo >> README.md '* `src` -- 源码目录'
echo >> README.md '* `src/bg.ts` -- bg源码入口文件'
echo >> README.md '* `src/page.ts` -- page源码入口文件'
echo >> README.md ''
echo >> README.md '## 项目初始化'
echo >> README.md '```'
echo >> README.md 'npm install'
echo >> README.md '```'
echo >> README.md ''
echo >> README.md '### 执行生产环境的编译'
echo >> README.md '```'
echo >> README.md 'npm run build'
echo >> README.md '```'
echo >> README.md ''
echo >> README.md '### 启动开发环境自动编译和预览'
echo >> README.md '```'
echo >> README.md 'npm run start'
echo >> README.md '```'
echo >> README.md ''
echo >> README.md '### 启动生产环境自动编译'
echo >> README.md '```'
echo >> README.md 'npm run watch'
echo >> README.md '```'
# 创建.gitignore
echo >> .gitignore '.DS_Store'
echo >> .gitignore 'dist/'
echo >> .gitignore '.env.local'
echo >> .gitignore '.env.*.local'
echo >> .gitignore 'npm-debug.log*'
echo >> .gitignore 'yarn-debug.log*'
echo >> .gitignore 'yarn-error.log*'
echo >> .gitignore '.idea'
echo >> .gitignore '.vscode'
echo >> .gitignore '*.ntvs*'
echo >> .gitignore '*.njsproj'
echo >> .gitignore '*.sw?'
echo >> .gitignore '*.rsuser'
echo >> .gitignore '*.suo'
echo >> .gitignore '*.user'
echo >> .gitignore '*.userosscache'
echo >> .gitignore '*.sln.docstates'
echo >> .gitignore '*.userprefs'
echo >> .gitignore 'mono_crash.*'
echo >> .gitignore '[Dd]ebug/'
echo >> .gitignore '[Dd]ebugPublic/'
echo >> .gitignore '[Rr]elease/'
echo >> .gitignore '[Rr]eleases/'
echo >> .gitignore 'x64/'
echo >> .gitignore 'x86/'
echo >> .gitignore '[Aa][Rr][Mm]/'
echo >> .gitignore '[Aa][Rr][Mm]64/'
echo >> .gitignore 'bld/'
echo >> .gitignore '[Bb]in/'
echo >> .gitignore '[Oo]bj/'
echo >> .gitignore '[Ll]og/'
echo >> .gitignore '[Ll]ogs/'
echo >> .gitignore '.vs/'
echo >> .gitignore 'Generated\ Files/'
echo >> .gitignore '[Tt]est[Rr]esult*/'
echo >> .gitignore '[Bb]uild[Ll]og.*'
echo >> .gitignore '*.VisualState.xml'
echo >> .gitignore 'TestResult.xml'
echo >> .gitignore 'nunit-*.xml'
echo >> .gitignore '[Dd]ebugPS/'
echo >> .gitignore '[Rr]eleasePS/'
echo >> .gitignore 'dlldata.c'
echo >> .gitignore 'BenchmarkDotNet.Artifacts/'
echo >> .gitignore 'project.lock.json'
echo >> .gitignore 'project.fragment.lock.json'
echo >> .gitignore 'artifacts/'
echo >> .gitignore 'StyleCopReport.xml'
echo >> .gitignore '*_i.c'
echo >> .gitignore '*_p.c'
echo >> .gitignore '*_h.h'
echo >> .gitignore '*.ilk'
echo >> .gitignore '*.meta'
echo >> .gitignore '*.obj'
echo >> .gitignore '*.iobj'
echo >> .gitignore '*.pch'
echo >> .gitignore '*.pdb'
echo >> .gitignore '*.ipdb'
echo >> .gitignore '*.pgc'
echo >> .gitignore '*.pgd'
echo >> .gitignore '*.rsp'
echo >> .gitignore '*.sbr'
echo >> .gitignore '*.tlb'
echo >> .gitignore '*.tli'
echo >> .gitignore '*.tlh'
echo >> .gitignore '*.tmp'
echo >> .gitignore '*.tmp_proj'
echo >> .gitignore '*_wpftmp.csproj'
echo >> .gitignore '*.log'
echo >> .gitignore '*.vspscc'
echo >> .gitignore '*.vssscc'
echo >> .gitignore '.builds'
echo >> .gitignore '*.pidb'
echo >> .gitignore '*.svclog'
echo >> .gitignore '*.scc'
echo >> .gitignore '_Chutzpah*'
echo >> .gitignore 'ipch/'
echo >> .gitignore '*.aps'
echo >> .gitignore '*.ncb'
echo >> .gitignore '*.opendb'
echo >> .gitignore '*.opensdf'
echo >> .gitignore '*.sdf'
echo >> .gitignore '*.cachefile'
echo >> .gitignore '*.VC.db'
echo >> .gitignore '*.VC.VC.opendb'
echo >> .gitignore '*.psess'
echo >> .gitignore '*.vsp'
echo >> .gitignore '*.vspx'
echo >> .gitignore '*.sap'
echo >> .gitignore '*.e2e'
echo >> .gitignore '$tf/'
echo >> .gitignore '*.gpState'
echo >> .gitignore '_ReSharper*/'
echo >> .gitignore '*.[Rr]e[Ss]harper'
echo >> .gitignore '*.DotSettings.user'
echo >> .gitignore '_TeamCity*'
echo >> .gitignore '*.dotCover'
echo >> .gitignore '.axoCover/*'
echo >> .gitignore '!.axoCover/settings.json'
echo >> .gitignore '*.coverage'
echo >> .gitignore '*.coveragexml'
echo >> .gitignore '_NCrunch_*'
echo >> .gitignore '.*crunch*.local.xml'
echo >> .gitignore 'nCrunchTemp_*'
echo >> .gitignore '*.mm.*'
echo >> .gitignore 'AutoTest.Net/'
echo >> .gitignore '.sass-cache/'
echo >> .gitignore '[Ee]xpress/'
echo >> .gitignore 'publish/'
echo >> .gitignore '*.[Pp]ublish.xml'
echo >> .gitignore '*.azurePubxml'
echo >> .gitignore '*.pubxml'
echo >> .gitignore '*.publishproj'
echo >> .gitignore 'PublishScripts/'
echo >> .gitignore '*.nupkg'
echo >> .gitignore '*.snupkg'
echo >> .gitignore '**/[Pp]ackages/*'
echo >> .gitignore '!**/[Pp]ackages/build/'
echo >> .gitignore '*.nuget.props'
echo >> .gitignore '*.nuget.targets'
echo >> .gitignore 'csx/'
echo >> .gitignore '*.build.csdef'
echo >> .gitignore 'ecf/'
echo >> .gitignore 'rcf/'
echo >> .gitignore 'AppPackages/'
echo >> .gitignore 'BundleArtifacts/'
echo >> .gitignore 'Package.StoreAssociation.xml'
echo >> .gitignore '_pkginfo.txt'
echo >> .gitignore '*.appx'
echo >> .gitignore '*.appxbundle'
echo >> .gitignore '*.appxupload'
echo >> .gitignore '*.[Cc]ache'
echo >> .gitignore '!?*.[Cc]ache/'
echo >> .gitignore 'ClientBin/'
echo >> .gitignore '~$*'
echo >> .gitignore '*~'
echo >> .gitignore '*.dbmdl'
echo >> .gitignore '*.dbproj.schemaview'
echo >> .gitignore '*.jfm'
echo >> .gitignore '*.pfx'
echo >> .gitignore '*.publishsettings'
echo >> .gitignore 'orleans.codegen.cs'
echo >> .gitignore 'Generated_Code/'
echo >> .gitignore '_UpgradeReport_Files/'
echo >> .gitignore 'Backup*/'
echo >> .gitignore 'UpgradeLog*.XML'
echo >> .gitignore 'UpgradeLog*.htm'
echo >> .gitignore 'ServiceFabricBackup/'
echo >> .gitignore '*.rptproj.bak'
echo >> .gitignore '.ntvs_analysis.dat'
echo >> .gitignore 'node_modules/'
echo >> .gitignore '*.plg'
echo >> .gitignore '*.opt'
echo >> .gitignore '*.vbw'
echo >> .gitignore '*.binlog'
echo >> .gitignore '.localhistory/'
echo >> .gitignore 'cache'