-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 652310c
Showing
21 changed files
with
1,371 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
pnpm-debug.log* | ||
lerna-debug.log* | ||
|
||
node_modules | ||
dist | ||
dist-ssr | ||
*.local | ||
|
||
# Editor directories and files | ||
.vscode/* | ||
!.vscode/extensions.json | ||
.idea | ||
.DS_Store | ||
*.suo | ||
*.ntvs* | ||
*.njsproj | ||
*.sln | ||
*.sw? |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
# React + Vite Chrome Extension Starter | ||
|
||
![react-vite-chrome-extension](./assets/cover.png) | ||
|
||
This project is a boilerplate for creating a Google Chrome Extension with React + Vitejs + TailwindCSS. | ||
|
||
- [React](https://reactjs.org/) | ||
- [Vite](https://vitejs.dev/) | ||
- [Tailwind CSS](https://tailwindcss.com/) | ||
|
||
## :bulb: Preview | ||
|
||
![react-vite-chrome-extension](./assets/preview.png) | ||
|
||
## :package: Requirements | ||
|
||
- Nodejs v16 LTS | ||
|
||
## :atom_symbol: Development | ||
|
||
- Clone this repository | ||
|
||
``` | ||
git clone https://github.com/timelessco/react-vite-chrome-extension | ||
``` | ||
|
||
- Install dependencies | ||
|
||
``` | ||
yarn install | ||
``` | ||
|
||
- Start Development Server | ||
|
||
``` | ||
yarn dev | ||
``` | ||
|
||
## :computer: Production | ||
|
||
- Building the chrome extension for production | ||
|
||
``` | ||
yarn build | ||
``` | ||
|
||
## :rocket: Usage | ||
|
||
- You can find the chrome extension contents in the `dist` folder | ||
- Open `chrome://extension` and turn on Developer Mode. | ||
- Click the `Load unpacked extension` button. | ||
- Now, select the `dist` folder. | ||
- Your extension is ready to use. | ||
|
||
### :hamburger: Additional Details | ||
|
||
- This boilerplate can be extended even further using [Chrome Extension APIs](https://developer.chrome.com/docs/extensions/reference/) | ||
- You can use [Content Scripts](https://developer.chrome.com/docs/extensions/mv3/content_scripts/) to inject content into the page or accessing the DOM conent. | ||
- By using the [Message Passing](https://developer.chrome.com/extensions/messaging) API, you can communicate with the content script and the popup. | ||
|
||
## :green_heart: Message | ||
|
||
I hope you find this useful. If you have any questions, please create an issue. | ||
|
||
## :mortar_board: License | ||
|
||
- MIT |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Vite + React</title> | ||
</head> | ||
<body> | ||
<div id="root"></div> | ||
<script type="module" src="/src/main.jsx"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
{ | ||
"name": "react-vite-chrome-extension", | ||
"private": true, | ||
"version": "0.0.0", | ||
"type": "module", | ||
"author": { | ||
"name": "mcnaveen" | ||
}, | ||
"scripts": { | ||
"dev": "vite", | ||
"build": "vite build", | ||
"preview": "vite preview" | ||
}, | ||
"dependencies": { | ||
"react": "^18.2.0", | ||
"react-dom": "^18.2.0" | ||
}, | ||
"devDependencies": { | ||
"@types/react": "^18.0.15", | ||
"@types/react-dom": "^18.0.6", | ||
"@vitejs/plugin-react": "^2.0.0", | ||
"autoprefixer": "^10.4.7", | ||
"postcss": "^8.4.14", | ||
"tailwindcss": "^3.1.6", | ||
"vite": "^3.0.0" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
module.exports = { | ||
plugins: { | ||
tailwindcss: {}, | ||
autoprefixer: {}, | ||
}, | ||
} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
{ | ||
"name": "react-vite-chrome-extension", | ||
"description": "Starter pack for Chrome extension development uses React + Vite", | ||
"version": "0.0.1", | ||
"manifest_version": 3, | ||
"icons": { | ||
"16": "logo16.png", | ||
"48": "logo48.png", | ||
"128": "logo128.png" | ||
}, | ||
"action": { | ||
"default_popup": "index.html", | ||
"default_icon": { | ||
"16": "logo16.png", | ||
"48": "logo48.png", | ||
"128": "logo128.png" | ||
} | ||
}, | ||
"permissions": [ | ||
"storage", | ||
"tabs" | ||
], | ||
"homepage_url": "https://timeless.co" | ||
} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
#root { | ||
max-width: 1280px; | ||
margin: 0 auto; | ||
padding: 2rem; | ||
text-align: center; | ||
} | ||
|
||
.logo { | ||
height: 6em; | ||
padding: 1.5em; | ||
will-change: filter; | ||
} | ||
.logo:hover { | ||
filter: drop-shadow(0 0 2em #646cffaa); | ||
} | ||
.logo.react:hover { | ||
filter: drop-shadow(0 0 2em #61dafbaa); | ||
} | ||
|
||
@keyframes logo-spin { | ||
from { | ||
transform: rotate(0deg); | ||
} | ||
to { | ||
transform: rotate(360deg); | ||
} | ||
} | ||
|
||
@media (prefers-reduced-motion: no-preference) { | ||
a:nth-of-type(2) .logo { | ||
animation: logo-spin infinite 20s linear; | ||
} | ||
} | ||
|
||
.card { | ||
padding: 2em; | ||
} | ||
|
||
.read-the-docs { | ||
color: #888; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import { useState } from "react"; | ||
import Header from "./components/header"; | ||
import Hello from "./components/hello"; | ||
|
||
function App() { | ||
return ( | ||
<div className="w-96"> | ||
<Header /> | ||
<Hello /> | ||
</div> | ||
); | ||
} | ||
|
||
export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import React from "react"; | ||
|
||
function Header() { | ||
return ( | ||
<nav className="flex items-center justify-between flex-wrap bg-teal-500 p-6"> | ||
<div className="flex items-center flex-shrink-0 text-white mr-6"> | ||
<span className="font-semibold text-xl tracking-tight"> | ||
React + Vite Chrome Extension | ||
</span> | ||
</div> | ||
</nav> | ||
); | ||
} | ||
|
||
export default Header; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import React from "react"; | ||
|
||
function Hello() { | ||
return ( | ||
<div className="flex items-center justify-center flex-wrap p-6"> | ||
<div className="flex items-center flex-shrink-0 text-gray-600 mr-6"> | ||
<span className="font-semibold text-3xl"> | ||
👋 Hello from Timeless.co | ||
</span> | ||
</div> | ||
</div> | ||
); | ||
} | ||
|
||
export default Hello; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
@tailwind base; | ||
@tailwind components; | ||
@tailwind utilities; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import React from 'react' | ||
import ReactDOM from 'react-dom/client' | ||
import App from './App' | ||
import './index.css' | ||
|
||
ReactDOM.createRoot(document.getElementById('root')).render( | ||
<React.StrictMode> | ||
<App /> | ||
</React.StrictMode> | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
/** @type {import('tailwindcss').Config} */ | ||
module.exports = { | ||
content: ["./src/**/*.{js,jsx,ts,tsx}"], | ||
theme: { | ||
extend: {}, | ||
}, | ||
plugins: [], | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import { defineConfig } from 'vite' | ||
import react from '@vitejs/plugin-react' | ||
|
||
// https://vitejs.dev/config/ | ||
export default defineConfig({ | ||
plugins: [react()] | ||
}) |
Oops, something went wrong.