Extension Started with Tailwind and separate folder for separate components

Author: vintageplayer

.github/workflows/build.yml

@@ -0,0 +1,30 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: build
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm ci
+    - run: npm run build --if-present
+    - run: npm test

.gitignore

@@ -0,0 +1,4 @@
+npm-debug.log
+node_modules/
+dist/
+tmp/

.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+    "typescript.tsdk": "./node_modules/typescript/lib",
+    "files.eol": "\n",
+    "json.schemas": [
+        {
+            "fileMatch": [
+                "/manifest.json"
+            ],
+            "url": "http://json.schemastore.org/chrome-manifest"
+        }
+    ]
+}

.vscode/tasks.json

@@ -0,0 +1,33 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "command": "npm",
+    "tasks": [
+        {
+            "label": "install",
+            "type": "shell",
+            "command": "npm",
+            "args": ["install"]
+        },
+        {
+            "label": "update",
+            "type": "shell",
+            "command": "npm",
+            "args": ["update"]
+        },
+        {
+            "label": "test",
+            "type": "shell",
+            "command": "npm",
+            "args": ["run", "test"]
+        },
+        {
+            "label": "build",
+            "type": "shell",
+            "group": "build",
+            "command": "npm",
+            "args": ["run", "watch"]
+        }
+    ]
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Tomofumi Chiba
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,70 @@
+# Chrome Extension TypeScript Starter
+
+![build](https://github.com/chibat/chrome-extension-typescript-starter/workflows/build/badge.svg)
+
+Chrome Extension, TypeScript and Visual Studio Code
+
+## Prerequisites
+
+* [node + npm](https://nodejs.org/) (Current Version)
+
+## Option
+
+* [Visual Studio Code](https://code.visualstudio.com/)
+
+## Includes the following
+
+* TypeScript
+* Webpack
+* React
+* Jest
+* Example Code
+    * Chrome Storage
+    * Options Version 2
+    * content script
+    * count up badge number
+    * background
+
+## Project Structure
+
+* src/typescript: TypeScript source files
+* src/assets: static files
+* dist: Chrome Extension directory
+* dist/js: Generated JavaScript files
+
+## Setup
+
+```
+npm install
+```
+
+## Import as Visual Studio Code project
+
+...
+
+## Build
+
+```
+npm run build
+```
+
+## Build in watch mode
+
+### terminal
+
+```
+npm run watch
+```
+
+### Visual Studio Code
+
+Run watch mode.
+
+type `Ctrl + Shift + B`
+
+## Load extension to chrome
+
+Load `dist` directory
+
+## Test
+`npx jest` or `npm run test`

jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+    "roots": [
+        "src"
+    ],
+    "transform": {
+        "^.+\\.ts$": ["ts-jest", { tsconfig: "tsconfig.test.json" }]
+    },
+};