??

? ?????? TypeScript, React, Tailwind CSS ? Webpack? ???? Chrome ?? ????? ???? ???? ??? ???????. ??? ???? ????? ?? "NoteMe"???? ???? ?? ????? ??????. ??? ???? ?? ??? ?????:

• ???? ?? ????? ?? ??? ????? ??
• ???? ?? ????? ?? ??? ??? ? ? ??? ??
• ?? ????? ?? ?? ?? ?? ??
• ???? ???? ??? ??? ?????
• ????? ???? ???? ???? ?? ???

?? ??

? ?????? ?? ??? ???? Chrome ?? ????? ???? ??? ?????. ? ?????? ???? ?? ?? ?? Chrome ?? ????? ???? ????? ? ?? ?? ?? ????? ?????. ? ??? ????? ?? ??? ?? ??? ??? ??? ?? ?? ???? ???? ?? ????. ??

?? ???? ????

???? ?? ?? ??? ?????.

• ?? ??: ????? ?? ?? ?????.
• ????: ???? ??? ??? ? ?? ??? ?????. ??? ??? ?????. ??? ??? ???. ??? ??? ?????. ???? ??? ??????(?? ???? ???? ?? ??? ???? ?? ??).
• ??: ???? ?? ??(????? ?? ?? ? ??)? ??? ????? ?? ??? ??? ??? ? ?? ?? ????. ??: ? ???? ??? ??? ??? ???? ?? ???? ???? ?? ??? ???? ????.

??? ?? ????? ???? ??? ??? ???? ???????.

?? ??

? ????? ???? ?? ???? ?? ??? ???? ??? ?????.

• Node.js(v18.16 LTS ??)
• NPM(Node Package Manager, Node.js? ?? ??? ??)
• ??????
• ??
• VS ?? ???(?? ??? ?? ???)

40,000???? ??

? ??? ? ?? ????? ?? ??? ?? ?? ??? ??? ?????. ??? ??????? ??? ? ?? ? ?? ?? ?????.

• ??? ????? ?? ????? DOM? ?? ?????? ??? ???? ??? ? ????.
• ??, ??, ??? ????? Chrome? ??? ??? ???? ?? ?? ?????.
• Chrome ???? ?? ??? API ??? ??? ??? ?? ??? ?? ?? ????? ??? ??? ???? ???? ??? ????? ??? ?????.
• ????? ????? ? ???? Chrome ???? ??? ??? ??? ???. ?? ??? ???? ???? ??? ?? ?? ?? ????? ?? ?????.
• ?? ? ??? ????? Chrome? ??? ??? ???? ?? ?? ??? ?????.

?? ???? ??

Chrome ?? ????? ?? ???? ??? ???? ???, ?? ????? ??? ?? ?????.json ??? ?????. ??? ???? ???? ??? ????? ????? ???? ? ??? ?? ??? ?? ???? ??? ???????. ? ??? ?? ???? ???? ??? ? ????? ????? ??? ????? ?? ????? ???? ? ????.

1??: ????? ?? ???? ?? ???

????? ????? ?? ???? ??? ???? ???. ?? bash ????? ???? ?????.json ??? ?? ?? ??? ??? ? ????.

#!/bin/bash

bash_script_absolute_path=$(pwd)
declare public_paths=("public" "public/assets" "public/assets/images")
declare source_paths=("src" "src/lib" "src/scripts" "src/scripts/background" "src/scripts/content" "src/scripts/injected" "src/scripts/popup" "src/styles")
declare public_directory_path="public"
declare manifest_file="manifest.json"
declare project_name="note-me"

create_directory () {
? ? if [ ! -d "" ]; then
? ? ? ? mkdir 
? ? fi
}

create_file () {
? ? if [ ! -e "/" ]; then
? ? ? ? touch /
? ? fi
}

create_public_directories () {
? ? for public_path in "${public_paths[@]}";
? ? do
? ? ? ? create_directory $public_path
? ? done
}

create_source_directories () {
? ? for source_path in "${source_paths[@]}";
? ? do
? ? ? ? create_directory $source_path
? ? done
}

execute () {
? ? echo "creating project struture at "${bash_script_absolute_path}
? ? create_directory $project_name
? ? cd $bash_script_absolute_path"/"$project_name
? ? create_public_directories
? ? create_source_directories
? ? create_file $manifest_file $public_directory_path
? ? echo "done creating project struture at "${bash_script_absolute_path}" with project name "$project_name
}

execute

???? ??? ?? ????? ??? ?? ???? ?????.

2??: ?? ????? ?? ?????.json ??? ??? ?? ????? ???.

{
? ? "manifest_version": 3,
? ? "name": "NoteMe",
? ? "version": "1.0",
? ? "description": "A Chrome extension built with React and TypeScript using Webpack.",
? ? "action": {
? ? ? "default_popup": "popup.html",
? ? ? "default_icon": "app-icon.png"
? ? },
? ? "background": {
? ? ? "service_worker": "background.js",
? ? ? "type": "module"
? ? },
? ? "content_scripts": [
? ? ? {
? ? ? ? "matches": ["<all_urls>"],
? ? ? ? "js": ["content.js"],
? ? ? ? "run_at": "document_end"
? ? ? }
? ? ],
? ? "permissions": [
? ? ? "storage",
? ? ? "activeTab",
? ? ? "scripting",
? ? ? "webNavigation"
? ? ],
? ? "host_permissions": ["<all_urls>"],
? ? "web_accessible_resources": [
? ? ? {
? ? ? ? "resources": ["styles.css", "sidebar-open.png", "sidebar-close.png"],
? ? ? ? "matches": ["<all_urls>"]
? ? ? }
? ? ]
? }

????:

• ?? ???? .js???. .ts ??? Chrome ???? ??? ? ??? .js ??? ????? ?????.
• ?? ??? ? ??? ?? ????? Chrome? ??? ?? ?????? ??? ? ??? ???.
• app-icon.png, sidebar-open.png ? sidebar-close.png? ? ?? ??? ??? ?????. ? ??? ?? ??? ????? ??? ??? ?? ? ????.
• manifest.json ??? ????? ??? ? dist ????? ?? ??? ????? ???. ?? ????? ?? ???? ?? ?? ??? ???? ????? ???? ???.

3??: npm ??? ? ??? ??

• ?? ??? ???? ?????? npm? ????? ??? ?????: npm init -y
• ??? ?? ???? ????? devDependency ??? ?????. ?? ??? ??????. npm i --save-dev @types/chrome @types/react @types/react-dom autoprefixer copy-webpack-plugin css-loader mini-css-extract-plugin postcss postcss-loader style-loader tailwindcss ts-loader typescript webpack ??-cli ??-??-??
• ???? ??? ??? ??? ???? ?????. npm i --save ?? ?? ?

4??: Manifest.json?? ???? ?? ???

manifest.json?? ???? backgroun.ts, content.ts ? popup.html ??? ?????.

• background.ts: src/scripts/Background ????? ? ??? ?????
• content.ts: src/scripts/content ????? ? ??? ?????
• popup.html ?? ????? ? ??? ?????

5??: ?? ? ?? ?? ????

?? ????? popup.html ??? ?? ??? ?????.

#!/bin/bash

bash_script_absolute_path=$(pwd)
declare public_paths=("public" "public/assets" "public/assets/images")
declare source_paths=("src" "src/lib" "src/scripts" "src/scripts/background" "src/scripts/content" "src/scripts/injected" "src/scripts/popup" "src/styles")
declare public_directory_path="public"
declare manifest_file="manifest.json"
declare project_name="note-me"

create_directory () {
? ? if [ ! -d "" ]; then
? ? ? ? mkdir 
? ? fi
}

create_file () {
? ? if [ ! -e "/" ]; then
? ? ? ? touch /
? ? fi
}

create_public_directories () {
? ? for public_path in "${public_paths[@]}";
? ? do
? ? ? ? create_directory $public_path
? ? done
}

create_source_directories () {
? ? for source_path in "${source_paths[@]}";
? ? do
? ? ? ? create_directory $source_path
? ? done
}

execute () {
? ? echo "creating project struture at "${bash_script_absolute_path}
? ? create_directory $project_name
? ? cd $bash_script_absolute_path"/"$project_name
? ? create_public_directories
? ? create_source_directories
? ? create_file $manifest_file $public_directory_path
? ? echo "done creating project struture at "${bash_script_absolute_path}" with project name "$project_name
}

execute

??:

?? ??? ? ?? ???? ?????.

1. chrome.runtime.onInstalled.addListener? ??? ??? ????? ?? ????? ??? ??? ?????. ?? ?? ??? ??? Chrome ??? ?? ???(???? ??)? ????? ? ??? ? ????.
2. chrome.runtime.onMessage.addListener? ??? ??? ????? ????? ???? ?? ??????? ???? ?? ??? ?????.

?? import ?? src/lib ?????? ???? ?????. ?? ? ??? src/lib? ???? ?? ??? ????(?: ??? ? ?? ????)?? ???? ?????.

6??: src/lib ???? ????

src/lib ?????? ?? ????? ?? ??? ?? ????. ??? ??? ?? ?? ??? ?? ?????.

• ?? ?? ????: ??? ???? ?? React ?? ??? ???? ????.
• lib/comComponents/ContentApp.tsx: ??? ????? ???? ?? ?? ??? ???.
• lib/comComponents/NoteMePosition.tsx: ?? ????? ???? ?? ??? ???? ????.
• helpers.ts: ?? ???? ??? ?? ???? ??? ??? ???? ????.
• storage-model.ts: Chrome? ?? ????? ????? ?????. ???? ???? ??? ?? ??? ??? type.ts? ?? ? ??? ?????.
• types.ts: ??? ???? ??? ?? ??? ?????.
• worker.ts: ????? ??? ???? ?? ??? ???? ????.

??? ??? ???? ?? ?? ??? ?????.

7??: React ???? ???

? ????? ???? ?? React ????? ??????. ??? ?? ??? src/scripts/content/content.ts ? src/scripts/popup/popup.ts?? ? ?? ?? ????? ??????.

?? ????: src/scripts/popup/popup.ts? ????.

#!/bin/bash

bash_script_absolute_path=$(pwd)
declare public_paths=("public" "public/assets" "public/assets/images")
declare source_paths=("src" "src/lib" "src/scripts" "src/scripts/background" "src/scripts/content" "src/scripts/injected" "src/scripts/popup" "src/styles")
declare public_directory_path="public"
declare manifest_file="manifest.json"
declare project_name="note-me"

create_directory () {
? ? if [ ! -d "" ]; then
? ? ? ? mkdir 
? ? fi
}

create_file () {
? ? if [ ! -e "/" ]; then
? ? ? ? touch /
? ? fi
}

create_public_directories () {
? ? for public_path in "${public_paths[@]}";
? ? do
? ? ? ? create_directory $public_path
? ? done
}

create_source_directories () {
? ? for source_path in "${source_paths[@]}";
? ? do
? ? ? ? create_directory $source_path
? ? done
}

execute () {
? ? echo "creating project struture at "${bash_script_absolute_path}
? ? create_directory $project_name
? ? cd $bash_script_absolute_path"/"$project_name
? ? create_public_directories
? ? create_source_directories
? ? create_file $manifest_file $public_directory_path
? ? echo "done creating project struture at "${bash_script_absolute_path}" with project name "$project_name
}

execute

??? ????: src/scripts/content/content.ts? ????.

{
? ? "manifest_version": 3,
? ? "name": "NoteMe",
? ? "version": "1.0",
? ? "description": "A Chrome extension built with React and TypeScript using Webpack.",
? ? "action": {
? ? ? "default_popup": "popup.html",
? ? ? "default_icon": "app-icon.png"
? ? },
? ? "background": {
? ? ? "service_worker": "background.js",
? ? ? "type": "module"
? ? },
? ? "content_scripts": [
? ? ? {
? ? ? ? "matches": ["<all_urls>"],
? ? ? ? "js": ["content.js"],
? ? ? ? "run_at": "document_end"
? ? ? }
? ? ],
? ? "permissions": [
? ? ? "storage",
? ? ? "activeTab",
? ? ? "scripting",
? ? ? "webNavigation"
? ? ],
? ? "host_permissions": ["<all_urls>"],
? ? "web_accessible_resources": [
? ? ? {
? ? ? ? "resources": ["styles.css", "sidebar-open.png", "sidebar-close.png"],
? ? ? ? "matches": ["<all_urls>"]
? ? ? }
? ? ]
? }

?? ???:

• ??? ??? ????: ? ?? ????? ??? ????? ?? ?? ?????? ?????. ?
• ?? ????: ??? popup.html ????? ???? ??? ?????. ?
• ??? ????: ????? ??? ?? ????? ???? ??? ?????.
• ??? ????? Shadow DOM: ?
  • ??? ????? ?? ??? ???? ????? ?? ????? ??? ??? ?? ? ????. ?
  • ?? ???? ?? Shadow DOM? ???? ???? ????? ?? ???? ??? ??? ??? ????? ???. ?
  • ?? ????? ?? ??? ??(popup.html)?? ????? ?? ???? ????.

8??: ??? ? ??? ?? ??

?? ???? ??? ? ??? ??? ?? ??

??? ????? ????? ????? ?? ??? ???? ???.

1. postcss.config.js
2. tailwind.config.js
3. tsconfig.json
4. webpack.config.js

?? ???:

• ?? ??: ???? ?? ????? ????? ?? ??? ??? ??? ?? ?? ???? ??? ?? ??? ? ??? ?? ??? ?????.
• ??? ?? ??: ??? ??? ?? ?? ? ?? ??? ?? ???? ?????.

??? ??? TypeScript ???, Tailwind CSS ?? ? ?? ????? ?? Webpack ?? ????? ?????.

?? ???

1. dist ???? ??: ?? ??? ???? dist ????? ????. ?npm run build
2. Chrome? ???: ? ?
   • Chrome? ?? chrome://extensions/? ?????. ? ?
   • ??? ???? ??? ??? ??????. ? ?
   • Load Unpacked? ???? dist ????? ?????.
3. ?? ??:
   • ???? ????? ?? ???? ???? ? ??? ??? ??? ?????.
4. ?? ??:
   • ?? ??: ??? ???? ???? ??? ??? ?????.
   • ?? ??: ??? ? ?????? ????? ???? ?? ???? ??? ?? ?? ?? ???? ?? ??? ? ????.
5. ??? ?????:
   • ?? ??? ???? ??? ???? ???? ??? ? ?? ??? ???? ????.
   • ?? ??? setTimeout? ???? ??? ??? ???? ??? ?? ??? ????????.

??? ?? ???? ??? ? ??? ?? ???????.

?? ???

??? ? ????? ?? ? ?? ? ?? ?? ?????.

• ??? ????, ?? ????, ????? ??? ? Chrome ??? ??? ????? Chrome? ??? ??? ???? ???? ??? ?? ????? ???????.
• ???? ?? ??, ??? ??, ?? ?? ?? ? Chrome ?? ????? ???? ???? ???? ??? ?????.
• ??? ??? ?? ? ?? ?? ??? ??????.
  • ?? ?? ? ???? ?? ???? ???? ?? ????? ?????.
  • ??? ?????? Shadow DOM? ???? ?? ?????? ??? ??? ?????.

?? ????

???? Chrome ? ???? ??? ??? ?? Chrome ?? ????? ???? ??? ???? ?? ???? ??? ?????. ?? ???? ??? ??? ????.

• ?? ??? ??? ? ?? ?? ??? ?? ??? ?????.
• Chrome ? ???? ?? ????? ???? ??? ????? ?????.

??? ?? ? ???? ????? ?????! ???? ??? ??? ??? ? ??? ????. ? ??? ????? ? ?? ???? ???? ?? ????.

??? ?????!

github ??: https://github.com/gauravnadkarni/chrome-extension-starter-app

? ??? ?? Medium? ???????.

? ??? Chrome ?? ???? ?? - TypeScript, React, Tailwind CSS ? Webpack? ???? ???? ? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!