diff --git a/.gitignore b/.gitignore index ab62c51..311aeb9 100644 --- a/.gitignore +++ b/.gitignore @@ -15,6 +15,7 @@ pnpm-lock.yaml build types index.js +!**/index.js # ignore ide settings .idea diff --git a/CHANGELOG.md b/CHANGELOG.md index 2dc2f28..f8e9cfb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,10 @@ Summary 5. version timestamp follow the yyyy.MM.dd format ``` +## 0.8.1 [2022.09.09] + +- docs: add zn_CN readme + ## 0.8.0 [2022.09.05] - remove: qwik framework boilerplate diff --git a/README_zh.md b/README_zh.md index d83f261..c87b638 100644 --- a/README_zh.md +++ b/README_zh.md @@ -10,12 +10,14 @@ > Chrome 插件生成器，支持多种框架模板！ -- 🚀 迅速的热更能力(采用 [Vite2](https://vitejs.dev)) +- 🚀 敏捷的热更能力(采用 [Vite2](https://vitejs.dev)) - 🥡 开箱即用 - 🌈 多种前端框架支撑 (9+) - 🥢 支撑 TypeScript 以及 JavaScript - 🌗 明亮以及暗黑模式 +[EN](./README.md) · [中文](./README_zh.md) + ## 安装 > Node >= 14.18.0 diff --git a/bin.ts b/bin.ts new file mode 100644 index 0000000..3022b3a --- /dev/null +++ b/bin.ts @@ -0,0 +1,3 @@ +#!/usr/bin/env node + +import './index.js' diff --git a/index.ts b/index.ts index 6cf26b2..4d9cc11 100755 --- a/index.ts +++ b/index.ts @@ -1,6 +1,3 @@ -#!/usr/bin/env node - -// @ts-check import * as fs from 'fs' import * as path from 'path' import minimist from 'minimist' diff --git a/package.json b/package.json index 0e8a634..754942f 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,11 @@ { "name": "create-chrome-ext", - "version": "0.8.0", + "version": "0.8.1", "type": "module", "description": "Scaffolding your chrome extension, multiple boilerplates supported!", "author": "yalda", "license": "MIT", - "main": "index.js", + "main": "bin.js", "bin": { "create-chrome-ext": "index.js", "crx": "index.js" diff --git a/template-stencil-js/package.json b/template-stencil-js/package.json new file mode 100644 index 0000000..214c6e3 --- /dev/null +++ b/template-stencil-js/package.json @@ -0,0 +1,36 @@ +{ + "name": "chrome-extension-stencil-js", + "version": "0.0.0", + "author": "", + "description": "", + "type": "module", + "license": "MIT", + "keywords": [ + "chrome-extension", + "stencil", + "vite", + "create-chrome-ext" + ], + "engines": { + "node": ">=14.18.0" + }, + "scripts": { + "s:build": "stencil build", + "s:start": "stencil build --dev --watch --serve", + "s:test": "stencil test --spec --e2e", + "s:test.watch": "stencil test --spec --e2e --watchAll", + "s:generate": "stencil generate", + "dev": "vite", + "build": "vite build", + "build.client": "vite build --outDir server/public", + "preview": "vite preview", + "fmt": "prettier --write '**/*.{jsx,js,json,css,md}'" + }, + "devDependencies": { + "@crxjs/vite-plugin": "^1.0.12", + "@stencil/core": "2.13.0", + "express": "4.17.2", + "prettier": "^2.7.1", + "vite": "^2.9.13" + } +} diff --git a/template-stencil-js/public/icons/logo.ico b/template-stencil-js/public/icons/logo.ico new file mode 100644 index 0000000..29fcda0 Binary files /dev/null and b/template-stencil-js/public/icons/logo.ico differ diff --git a/template-stencil-js/public/icons/logo.svg b/template-stencil-js/public/icons/logo.svg new file mode 100644 index 0000000..e4101ab --- /dev/null +++ b/template-stencil-js/public/icons/logo.svg @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/template-stencil-js/public/img/logo-128.png b/template-stencil-js/public/img/logo-128.png new file mode 100644 index 0000000..188fbc2 Binary files /dev/null and b/template-stencil-js/public/img/logo-128.png differ diff --git a/template-stencil-js/public/img/logo-16.png b/template-stencil-js/public/img/logo-16.png new file mode 100644 index 0000000..c8fc861 Binary files /dev/null and b/template-stencil-js/public/img/logo-16.png differ diff --git a/template-stencil-js/public/img/logo-34.png b/template-stencil-js/public/img/logo-34.png new file mode 100644 index 0000000..2bf45ed Binary files /dev/null and b/template-stencil-js/public/img/logo-34.png differ diff --git a/template-stencil-js/public/img/logo-48.png b/template-stencil-js/public/img/logo-48.png new file mode 100644 index 0000000..78b6a92 Binary files /dev/null and b/template-stencil-js/public/img/logo-48.png differ diff --git a/template-stencil-js/src/assets/logo.png b/template-stencil-js/src/assets/logo.png new file mode 100644 index 0000000..5d28df6 Binary files /dev/null and b/template-stencil-js/src/assets/logo.png differ diff --git a/template-stencil-js/src/background/index.js b/template-stencil-js/src/background/index.js new file mode 100644 index 0000000..dfd2da5 --- /dev/null +++ b/template-stencil-js/src/background/index.js @@ -0,0 +1,3 @@ +console.info('chrome-ext template-stencil-js background script') + +export {} diff --git a/template-stencil-js/src/components/app-options/app-options.css b/template-stencil-js/src/components/app-options/app-options.css new file mode 100644 index 0000000..0337edf --- /dev/null +++ b/template-stencil-js/src/components/app-options/app-options.css @@ -0,0 +1,33 @@ +main { + text-align: center; + padding: 1em; + margin: 0 auto; +} + +h3 { + color: #673ab8; + text-transform: uppercase; + font-size: 1.5rem; + font-weight: 200; + line-height: 1.2rem; + margin: 2rem auto; +} + +h6 { + font-size: 0.5rem; + color: #333333; + margin: 0.5rem; +} + +a { + font-size: 0.5rem; + margin: 0.5rem; + color: #cccccc; + text-decoration: none; +} + +@media (min-width: 480px) { + h3 { + max-width: none; + } +} diff --git a/template-stencil-js/src/components/app-options/app-options.jsx b/template-stencil-js/src/components/app-options/app-options.jsx new file mode 100644 index 0000000..6109ee2 --- /dev/null +++ b/template-stencil-js/src/components/app-options/app-options.jsx @@ -0,0 +1,25 @@ +import { Component, Prop, h } from '@stencil/core' + +@Component({ + tag: 'app-options', + styleUrl: 'app-options.css', +}) +export class AppOptions { + @Prop() crx: string = '' + + render() { + return ( +
+

Options Page!

+ +
v 0.0.0
+ + + Power by {this.crx} + +
+ ) + } +} + +export default AppOptions diff --git a/template-stencil-js/src/components/app-popup/app-popup.css b/template-stencil-js/src/components/app-popup/app-popup.css new file mode 100644 index 0000000..0337edf --- /dev/null +++ b/template-stencil-js/src/components/app-popup/app-popup.css @@ -0,0 +1,33 @@ +main { + text-align: center; + padding: 1em; + margin: 0 auto; +} + +h3 { + color: #673ab8; + text-transform: uppercase; + font-size: 1.5rem; + font-weight: 200; + line-height: 1.2rem; + margin: 2rem auto; +} + +h6 { + font-size: 0.5rem; + color: #333333; + margin: 0.5rem; +} + +a { + font-size: 0.5rem; + margin: 0.5rem; + color: #cccccc; + text-decoration: none; +} + +@media (min-width: 480px) { + h3 { + max-width: none; + } +} diff --git a/template-stencil-js/src/components/app-popup/app-popup.jsx b/template-stencil-js/src/components/app-popup/app-popup.jsx new file mode 100644 index 0000000..67b27ad --- /dev/null +++ b/template-stencil-js/src/components/app-popup/app-popup.jsx @@ -0,0 +1,25 @@ +import { Component, Prop, h } from '@stencil/core' + +@Component({ + tag: 'app-popup', + styleUrl: 'app-popup.css', +}) +export class AppPopup { + @Prop() crx: string = '' + + render() { + return ( +
+

Popup Page!

+ +
v 0.0.0
+ + + Power by {this.crx} + +
+ ) + } +} + +export default AppPopup diff --git a/template-stencil-js/src/content/index.js b/template-stencil-js/src/content/index.js new file mode 100644 index 0000000..174b850 --- /dev/null +++ b/template-stencil-js/src/content/index.js @@ -0,0 +1,3 @@ +console.info('chrome-ext template-stencil-js content script') + +export {} diff --git a/template-stencil-js/src/global/app.css b/template-stencil-js/src/global/app.css new file mode 100644 index 0000000..f93ac38 --- /dev/null +++ b/template-stencil-js/src/global/app.css @@ -0,0 +1,45 @@ +/* + Global App CSS + ---------------------- + Use this file for styles that should be applied to all components. + For example, "font-family" within the "body" selector is a CSS property + most apps will want applied to all components. + + Any global CSS variables should also be applied here. +*/ + +:root { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, + 'Open Sans', 'Helvetica Neue', sans-serif; + font-size: 16px; + line-height: 24px; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } +} + +body { + min-width: 20rem; + margin: 0px; + padding: 0px; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, + 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; +} diff --git a/template-stencil-js/src/global/app.js b/template-stencil-js/src/global/app.js new file mode 100644 index 0000000..826167f --- /dev/null +++ b/template-stencil-js/src/global/app.js @@ -0,0 +1,7 @@ +export default async () => { + /** + * The code to be executed should be placed within a default function that is + * exported by the global script. Ensure all of the code in the global script + * is wrapped in the function() that is exported. + */ +}; diff --git a/template-stencil-js/src/index.js b/template-stencil-js/src/index.js new file mode 100644 index 0000000..94d1ecc --- /dev/null +++ b/template-stencil-js/src/index.js @@ -0,0 +1,2 @@ +export { Components, JSX } from './components'; +import '@stencil-community/router'; diff --git a/template-stencil-js/src/manifest.js b/template-stencil-js/src/manifest.js new file mode 100644 index 0000000..e41ff31 --- /dev/null +++ b/template-stencil-js/src/manifest.js @@ -0,0 +1,36 @@ +import { defineManifest } from '@crxjs/vite-plugin' + +export default defineManifest({ + name: 'create-chrome-ext', + description: '', + version: '0.0.0', + manifest_version: 3, + icons: { + 16: 'img/logo-16.png', + 32: 'img/logo-34.png', + 48: 'img/logo-48.png', + 128: 'img/logo-128.png', + }, + action: { + default_popup: 'popup.html', + default_icon: 'img/logo-48.png', + }, + options_page: 'options.html', + background: { + service_worker: 'src/background/index.js', + type: 'module', + }, + content_scripts: [ + { + matches: ['http://*/*', 'https://*/*'], + js: ['src/content/index.js'], + }, + ], + web_accessible_resources: [ + { + resources: ['img/logo-16.png', 'img/logo-34.png', 'img/logo-48.png', 'img/logo-128.png'], + matches: [], + }, + ], + permissions: [], +}) diff --git a/template-stencil-js/src/options.html b/template-stencil-js/src/options.html new file mode 100644 index 0000000..b78e1ef --- /dev/null +++ b/template-stencil-js/src/options.html @@ -0,0 +1,18 @@ + + + + + + + Chrome Extensioin + Stencil + JS + Vite App - Options + + + + + + + + + + + diff --git a/template-stencil-js/src/popup.html b/template-stencil-js/src/popup.html new file mode 100644 index 0000000..237ffa5 --- /dev/null +++ b/template-stencil-js/src/popup.html @@ -0,0 +1,19 @@ + + + + + + + Chrome Extensioin + Popup + JS + Vite App - Popup + + + + + + + + + + + + diff --git a/template-stencil-js/vite.config.js b/template-stencil-js/vite.config.js new file mode 100644 index 0000000..288f3ea --- /dev/null +++ b/template-stencil-js/vite.config.js @@ -0,0 +1,57 @@ +import { defineConfig } from 'vite' +import { resolve } from 'path' +import { crx } from '@crxjs/vite-plugin' +import vitePluginStencil from 'vite-plugin-stencil' + +import manifest from './src/manifest' + +export default defineConfig(({ mode }) => { + return { + build: { + emptyOutDir: true, + outDir: 'build', + rollupOptions: { + input: { + popup: resolve(__dirname, './src/popup.html'), + options: resolve(__dirname, './src/options.html'), + }, + output: { + chunkFileNames: 'assets/chunk-[hash].js', + }, + }, + }, + plugins: [ + crx({ manifest }), + vitePluginStencil({ + manifest: { + name: 'stencil crx', + short_name: 'stencil', + start_url: '/', + display: 'standalone', + icons: [ + { + src: 'assets/icon/icon.png', + sizes: '512x512', + type: 'image/png', + }, + ], + background_color: '#16161d', + theme_color: '#16161d', + }, + config: { + globalStyle: 'src/global/app.css', + globalScript: 'src/global/app.js', + taskQueue: 'async', + outputTargets: [ + { + type: 'www', + // comment the following line to disable service workers in production + serviceWorker: null, + baseUrl: 'https://myapp.local/', + }, + ], + }, + }), + ], + } +}) diff --git a/tsconfig.json b/tsconfig.json index f235a36..d3da3c6 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -98,6 +98,6 @@ // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ "skipLibCheck": true /* Skip type checking all .d.ts files. */ }, - "files": ["index.ts"], + "files": ["bin.ts", "index.ts"], "exclude": ["template-*"] }