{"id":23868,"date":"2026-05-13T00:51:24","date_gmt":"2026-05-13T00:51:24","guid":{"rendered":"https:\/\/umang.pk\/2026\/05\/13\/%d9%be%d9%84%d8%a7%d8%b2%d9%85%d9%88-%da%a9%d8%a7-%d8%a7%d8%b3%d8%aa%d8%b9%d9%85%d8%a7%d9%84-%da%a9%d8%b1%d8%aa%db%92-%db%81%d9%88%d8%a6%db%92-%da%a9%d8%b1%d9%88%d9%85-%d8%a7%db%8c%da%a9%d8%b3%d9%b9\/"},"modified":"2026-05-13T00:51:34","modified_gmt":"2026-05-13T00:51:34","slug":"%d9%be%d9%84%d8%a7%d8%b2%d9%85%d9%88-%da%a9%d8%a7-%d8%a7%d8%b3%d8%aa%d8%b9%d9%85%d8%a7%d9%84-%da%a9%d8%b1%d8%aa%db%92-%db%81%d9%88%d8%a6%db%92-%da%a9%d8%b1%d9%88%d9%85-%d8%a7%db%8c%da%a9%d8%b3%d9%b9","status":"publish","type":"post","link":"https:\/\/umang.pk\/en_us\/2026\/05\/13\/%d9%be%d9%84%d8%a7%d8%b2%d9%85%d9%88-%da%a9%d8%a7-%d8%a7%d8%b3%d8%aa%d8%b9%d9%85%d8%a7%d9%84-%da%a9%d8%b1%d8%aa%db%92-%db%81%d9%88%d8%a6%db%92-%da%a9%d8%b1%d9%88%d9%85-%d8%a7%db%8c%da%a9%d8%b3%d9%b9\/","title":{"rendered":"\u067e\u0644\u0627\u0632\u0645\u0648 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u06a9\u0631\u0648\u0645 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u06a9\u06cc\u0633\u06d2 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u06cc\u06ba\u06d4 [Full Handbook]"},"content":{"rendered":"\n
\n

\u06a9\u0631\u0648\u0645 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u06c1\u0644\u06a9\u06d2 \u0648\u0632\u0646 \u0648\u0627\u0644\u06d2 \u0679\u0648\u0644\u0632 \u06c1\u06cc\u06ba \u062c\u0648 \u0622\u067e \u06a9\u06d2 \u0628\u0631\u0627\u0624\u0632\u0646\u06af \u06a9\u06d2 \u062a\u062c\u0631\u0628\u06d2 \u06a9\u0648 \u0628\u06c1\u062a\u0631 \u0627\u0648\u0631 \u0630\u0627\u062a\u06cc \u0628\u0646\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0628\u0634\u0645\u0648\u0644 \u067e\u0627\u0633 \u0648\u0631\u0688\u0632 \u06a9\u0627 \u0646\u0638\u0645 \u06a9\u0631\u0646\u0627\u060c \u0635\u0641\u062d\u0627\u062a \u06a9\u0627 \u062a\u0631\u062c\u0645\u06c1 \u06a9\u0631\u0646\u0627\u060c \u0627\u0648\u0631 \u0627\u0646 \u0648\u06cc\u0628 \u0633\u0627\u0626\u0679\u0633 \u0645\u06cc\u06ba \u0628\u0627\u0644\u06a9\u0644 \u0646\u0626\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u0627 \u062c\u0646\u06c1\u06cc\u06ba \u0622\u067e \u06c1\u0631 \u0631\u0648\u0632 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n

\u0644\u0627\u06a9\u06be\u0648\u06ba \u0688\u0648\u06cc\u0644\u067e\u0631\u0632 \u0646\u06d2 Chrome \u0648\u06cc\u0628 \u0627\u0633\u0679\u0648\u0631 \u067e\u0631 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646\u0632 \u0634\u0627\u0626\u0639 \u06a9\u06cc \u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0628\u0644\u0688\u0646\u06af \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u0622\u067e \u06a9\u06d2 \u062e\u06cc\u0627\u0644 \u0633\u06d2 \u06a9\u06c1\u06cc\u06ba \u0632\u06cc\u0627\u062f\u06c1 \u0642\u0627\u0628\u0644 \u0631\u0633\u0627\u0626\u06cc \u06c1\u06d2\u06d4<\/p>\n

\u0627\u0633 \u06c1\u06cc\u0646\u0688 \u0628\u06a9 \u0645\u06cc\u06ba\u060c \u06c1\u0645 \u0622\u067e \u06a9\u0648 \u062c\u062f\u06cc\u062f \u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9 TypeScript\u060c React \u0627\u0648\u0631 Plasmo \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0634\u0631\u0648\u0639 \u0633\u06d2 \u0627\u06cc\u06a9 \u0634\u0627\u0626\u0639 \u0634\u062f\u06c1 Chrome \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0628\u062a\u0627\u0626\u06cc\u06ba \u06af\u06d2 \u062c\u0648 \u0628\u0627\u0631 \u0628\u0627\u0631 \u0633\u06cc\u0679 \u0627\u067e \u0627\u0648\u0631 \u06a9\u0646\u0641\u06cc\u06af\u0631\u06cc\u0634\u0646 \u06a9\u0648 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0627\u06a9\u06c1 \u0622\u067e \u0628\u0648\u0627\u0626\u0644\u0631 \u067e\u0644\u06cc\u0679 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u062a\u062d\u0631\u06cc\u0631\u06cc \u0641\u0639\u0627\u0644\u06cc\u062a \u067e\u0631 \u062a\u0648\u062c\u06c1 \u0645\u0631\u06a9\u0648\u0632 \u06a9\u0631 \u0633\u06a9\u06cc\u06ba\u06d4<\/p>\n

\u0631\u0627\u0633\u062a\u06d2 \u0645\u06cc\u06ba\u060c \u0622\u067e \u06a9\u0648 \u0627\u0635\u0644 \u06a9\u0631\u0648\u0645 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 API \u06a9\u0627 \u0633\u0627\u0645\u0646\u0627 \u06a9\u0631\u0646\u0627 \u067e\u0691\u06d2 \u06af\u0627 \u062c\u0648 \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u06a9\u06cc \u0641\u0639\u0627\u0644\u06cc\u062a \u06a9\u0648 \u0633\u067e\u0648\u0631\u0679 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0628\u0634\u0645\u0648\u0644 \u0679\u06cc\u0628 \u06a9\u06d2 \u0633\u0648\u0627\u0644\u0627\u062a\u060c \u0679\u06cc\u0628 \u06af\u0631\u0648\u067e\u0633 \u0628\u0646\u0627\u0646\u0627\u060c \u0627\u0648\u0631 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u06a9\u06d2 \u0645\u062e\u062a\u0644\u0641 \u062d\u0635\u0648\u06ba \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u067e\u06cc\u063a\u0627\u0645\u0627\u062a \u0628\u06be\u06cc\u062c\u0646\u0627\u06d4<\/p>\n

\u0622\u062e\u0631 \u0645\u06cc\u06ba\u060c \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u0648\u0631\u06a9\u0646\u06af \u06a9\u0648\u0688\u060c \u0622\u067e \u06a9\u06cc \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u06a9\u06cc \u0633\u0627\u062e\u062a \u06a9\u0627 \u0627\u06cc\u06a9 \u0630\u06c1\u0646\u06cc \u0645\u0627\u0688\u0644\u060c \u0627\u0648\u0631 \u06c1\u0631 \u0648\u06c1 \u0686\u06cc\u0632 \u06c1\u0648\u06af\u06cc \u062c\u0648 \u0622\u067e \u06a9\u0648 \u0627\u067e\u0646\u06d2 \u0622\u0626\u06cc\u0688\u06cc\u0627 \u06a9\u0648 Chrome \u0648\u06cc\u0628 \u0627\u0633\u0679\u0648\u0631 \u067e\u0631 \u0634\u0627\u0626\u0639 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062f\u0631\u06a9\u0627\u0631 \u06c1\u06d2\u06d4<\/p>\n

\u0627\u0646\u0688\u06cc\u06a9\u0633<\/h2>\n

\u067e\u0644\u0627\u0632\u0645\u0627 \u06a9\u06cc\u0627 \u06c1\u06d2\u061f<\/h2>\n

\u067e\u0644\u0627\u0632\u0645\u0648 \u0628\u0631\u0627\u0624\u0632\u0631 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0627\u0648\u067e\u0646 \u0633\u0648\u0631\u0633 \u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9 \u06c1\u06d2\u06d4 \u0627\u0633 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0633\u0648\u0686\u06cc\u06ba \u062c\u06cc\u0633\u06d2 Create React App \u06cc\u0627 Next.js\u060c \u0644\u06cc\u06a9\u0646 \u06a9\u0631\u0648\u0645 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u06a9\u06d2 \u0644\u06cc\u06d2\u06d4<\/p>\n

\u067e\u0644\u0627\u0632\u0645\u0648 \u06a9\u06d2 \u0628\u063a\u06cc\u0631 \u06a9\u0631\u0648\u0645 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u062f\u0633\u062a\u06cc \u0637\u0648\u0631 \u067e\u0631 manifest.json<\/code> \u0641\u0627\u0626\u0644\u06cc\u06ba \u0644\u06a9\u06be\u06cc\u06ba\u060c \u0628\u0644\u0688 \u0679\u0648\u0644\u0632 \u06a9\u0648 \u062c\u0648\u0691\u06cc\u06ba\u060c \u0627\u0648\u0631 TypeScript \u06a9\u0648 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u06ba \u0627\u0648\u0631 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u0631\u062f \u0639\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 \u067e\u0644\u0627\u0632\u0645\u0648 \u0627\u0633 \u0633\u0628 \u06a9\u0627 \u062e\u06cc\u0627\u0644 \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n

TypeScript \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u06cc\u06a9 \u0648\u0631\u06a9\u0646\u06af \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u0648 \u0633\u06a9\u06cc\u0641\u0648\u0644\u0688 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u06c1\u06cc \u06a9\u0645\u0627\u0646\u0688 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u062a\u0634\u06a9\u06cc\u0644 \u0634\u062f\u06c1 \u0631\u062f \u0639\u0645\u0644\u06d4 \u06cc\u06c1 \u062a\u0645\u06c1\u0627\u0631\u0627 \u06c1\u06d2 package.json<\/code> \u0627\u0648\u0631 \u062a\u062e\u0644\u06cc\u0642 \u06a9\u0631\u06cc\u06ba manifest.json<\/code> \u06a9\u0631\u0648\u0645 \u06a9\u0648 \u0627\u0633 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u062e\u0648\u062f \u0627\u0633 \u0645\u06cc\u06ba \u062a\u0631\u0645\u06cc\u0645 \u0646\u06c1 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n

\u0645\u0632\u06cc\u062f \u0628\u0631\u0622\u06ba\u060c \u0627\u06af\u0631 \u0622\u067e \u0627\u067e\u0646\u06cc \u0633\u0648\u0631\u0633 \u0641\u0627\u0626\u0644\u0632 \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0622\u067e \u06a9\u06cc \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u0688\u06cc\u0648\u0644\u067e\u0645\u0646\u0679 \u06a9\u06d2 \u062f\u0648\u0631\u0627\u0646 \u062e\u0648\u062f \u0628\u062e\u0648\u062f \u06a9\u0631\u0648\u0645 \u0645\u06cc\u06ba \u062f\u0648\u0628\u0627\u0631\u06c1 \u062a\u0639\u0645\u06cc\u0631 \u0627\u0648\u0631 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0644\u0648\u0688 \u06c1\u0648 \u062c\u0627\u0626\u06d2 \u06af\u06cc\u060c \u0627\u0648\u0631 \u0645\u06a9\u0645\u0644 \u0642\u0633\u0645 \u06a9\u06cc \u062d\u0641\u0627\u0638\u062a \u0628\u0634\u0645\u0648\u0644 Chrome \u06a9\u06cc \u0627\u067e\u0646\u06cc API \u0627\u0642\u0633\u0627\u0645\u060c \u0628\u0627\u06a9\u0633 \u0633\u06d2 \u0628\u0627\u06c1\u0631 \u062f\u0633\u062a\u06cc\u0627\u0628 \u06c1\u06d2\u06d4<\/p>\n

\u067e\u0644\u0627\u0632\u0645\u0648 \u0627\u067e\u0646\u06d2 \u06a9\u0631\u0648\u0645 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u06a9\u06d2 \u062a\u0635\u0648\u0631 \u06a9\u0648 \u0646\u06c1\u06cc\u06ba \u0686\u06be\u067e\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u06a9\u06cc\u0627 \u0622\u067e \u0627\u0628 \u0628\u06be\u06cc \u0627\u0633\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba\u061f chrome.tabs<\/code>\u060c chrome.runtime<\/code>\u0622\u067e \u0628\u0627\u0642\u06cc Chrome API \u06a9\u0648 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u062c\u0628 \u0622\u067e \u0628\u0648\u0631\u0646\u06af \u0633\u06c1\u0627\u0631\u0648\u06ba \u0633\u06d2 \u0686\u06be\u0679\u06a9\u0627\u0631\u0627 \u067e\u0627 \u0644\u06cc\u06ba \u062a\u0648 \u0622\u067e \u0641\u0648\u0631\u06cc \u0637\u0648\u0631 \u067e\u0631 \u062a\u0639\u0645\u06cc\u0631 \u0634\u0631\u0648\u0639 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n

\u06a9\u06cc\u0627 \u062a\u0639\u0645\u06cc\u0631 \u06a9\u0631\u0646\u0627 \u06c1\u06d2<\/h2>\n

\u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0645\u06cc\u06ba \u06af\u0631\u0648\u067e\u0631 \u06a9\u0648 \u062a\u06be\u067e\u062a\u06be\u067e\u0627\u0626\u06cc\u06ba\u06d4<\/strong> \u0634\u0631\u0648\u0639 \u0633\u06d2 \u06a9\u0631\u0648\u0645 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646\u06d4<\/p>\n

\u06cc\u06c1 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u0622\u067e \u06a9\u06d2 \u0628\u0631\u0627\u0624\u0632\u0631 \u0679\u06cc\u0628\u0632 \u06a9\u0648 \u0648\u06cc\u0628 \u0633\u0627\u0626\u0679 \u0688\u0648\u0645\u06cc\u0646 \u06a9\u06cc \u0628\u0646\u06cc\u0627\u062f \u067e\u0631 \u06af\u0631\u0648\u067e \u06a9\u0631\u06a9\u06d2 \u062e\u0648\u062f \u0628\u062e\u0648\u062f \u0645\u0646\u0638\u0645 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n

\u0645\u062b\u0627\u0644 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u0633<\/h3>\n

\u062a\u0635\u0648\u0631 \u06a9\u0631\u06cc\u06ba \u06a9\u06c1 \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 20 \u0679\u06cc\u0628\u0632 \u06a9\u06be\u0644\u06d2 \u06c1\u06cc\u06ba: 5 GitHub \u0633\u06d2\u060c 4 YouTube \u0633\u06d2\u060c 3 Stack Overflow \u0633\u06d2\u060c \u0627\u0648\u0631 8 \u062f\u0648\u0633\u0631\u06cc \u0648\u06cc\u0628 \u0633\u0627\u0626\u0679\u0633 \u0633\u06d2\u06d4<\/p>\n

\u0627\u06cc\u06a9 \u06a9\u0644\u06a9 \u06a9\u06d2 \u0633\u0627\u062a\u06be\u060c \u0679\u06cc\u0628 \u06af\u0631\u0648\u067e\u0631 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u062e\u0648\u062f \u0628\u062e\u0648\u062f \u06c1\u0631 \u0648\u06cc\u0628 \u0633\u0627\u0626\u0679 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0631\u0646\u06af\u06cc\u0646 \u06af\u0631\u0648\u067e \u0628\u0646\u0627\u062a\u06cc \u06c1\u06d2\u060c \u062c\u0633 \u0633\u06d2 \u0679\u06cc\u0628\u0632 \u06a9\u0648 \u062a\u0644\u0627\u0634 \u06a9\u0631\u0646\u0627 \u0627\u0648\u0631 \u0627\u0646 \u06a9\u0627 \u0646\u0638\u0645 \u06a9\u0631\u0646\u0627 \u0622\u0633\u0627\u0646 \u06c1\u0648\u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n

\u06a9\u06cc\u0627 \u0633\u06cc\u06a9\u06be\u0646\u0627 \u06c1\u06d2\u06d4<\/h2>\n

\u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u06a9\u0648 \u0645\u06a9\u0645\u0644 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u0622\u067e \u06a9\u0648 \u062a\u06cc\u0646 \u0634\u0639\u0628\u0648\u06ba \u0645\u06cc\u06ba \u062a\u062c\u0631\u0628\u06c1 \u062d\u0627\u0635\u0644 \u06c1\u0648\u06af\u0627:<\/p>\n

\u0633\u0628 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u06a9\u0631\u0648\u0645 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u06a9\u06cc \u0628\u0646\u06cc\u0627\u062f\u06cc \u0628\u0627\u062a\u06cc\u06ba<\/strong>: \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646\u0632 \u0627\u0646\u062f\u0631\u0648\u0646\u06cc \u0637\u0648\u0631 \u067e\u0631 \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06cc \u06c1\u06cc\u06ba\u060c \u0627\u0646 \u06a9\u0627 \u0688\u06be\u0627\u0646\u0686\u06c1 (\u0645\u06cc\u0646\u06cc \u0641\u06cc\u0633\u0679\u060c \u0628\u06cc\u06a9 \u06af\u0631\u0627\u0624\u0646\u0688 \u0627\u0633\u06a9\u0631\u067e\u0679\u060c \u067e\u0627\u067e \u0627\u067e)\u060c \u0627\u0648\u0631 \u0688\u06cc\u0648\u0644\u067e\u0645\u0646\u0679 \u06a9\u06d2 \u062f\u0648\u0631\u0627\u0646 \u06a9\u0631\u0648\u0645 \u0645\u06cc\u06ba \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646\u0632 \u06a9\u0648 \u0644\u0648\u0688 \u0627\u0648\u0631 \u0679\u06cc\u0633\u0679 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0637\u0631\u06cc\u0642\u06c1\u06d4<\/p>\n

\u062f\u0648\u0633\u0631\u0627 \u06a9\u0631\u0648\u0645 API<\/strong>: \u062e\u0627\u0635 \u0637\u0648\u0631 \u067e\u0631 chrome.tabs<\/code> \u0628\u0631\u0627\u0624\u0632\u0631 \u0679\u06cc\u0628\u0632 \u06a9\u0627 \u0646\u0638\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c chrome.tabGroups<\/code> \u0679\u06cc\u0628 \u06af\u0631\u0648\u067e\u0633 \u0628\u0646\u0627\u0626\u06cc\u06ba \u0627\u0648\u0631 \u0627\u067e\u0646\u06cc \u0645\u0631\u0636\u06cc \u06a9\u06d2 \u0645\u0637\u0627\u0628\u0642 \u0628\u0646\u0627\u0626\u06cc\u06ba chrome.runtime<\/code> \u0627\u06cc\u06a9 \u062a\u0648\u0633\u06cc\u0639 \u06a9\u06d2 \u0645\u062e\u062a\u0644\u0641 \u062d\u0635\u0648\u06ba \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u067e\u06cc\u063a\u0627\u0645\u0627\u062a \u06a9\u0648 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n

\u062a\u06cc\u0633\u0631\u0627 \u062c\u062f\u06cc\u062f \u0648\u06cc\u0628 \u0688\u0648\u06cc\u0644\u067e\u0645\u0646\u0679 \u0679\u0648\u0644\u0632<\/strong>: \u0679\u0627\u0626\u067e \u0633\u06cc\u0641 JavaScript \u06a9\u06d2 \u0644\u06cc\u06d2 TypeScript\u060c \u067e\u0627\u067e \u0627\u067e UI \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0631\u062f \u0639\u0645\u0644\u060c \u0627\u0648\u0631 \u067e\u0644\u0627\u0632\u0645\u0648 \u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9 \u062c\u0648 \u0627\u0646 \u0633\u0628 \u06a9\u0648 \u0627\u06cc\u06a9 \u0633\u0627\u062a\u06be \u062c\u0648\u0691\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n

\u0634\u0631\u0627\u0626\u0637<\/h2>\n

\u0622\u067e \u06a9\u0648 \u0627\u0646 \u0634\u0639\u0628\u0648\u06ba \u0645\u06cc\u06ba \u0645\u0627\u06c1\u0631 \u06c1\u0648\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0627\u06af\u0631 \u0622\u067e \u0628\u0646\u06cc\u0627\u062f\u06cc JavaScript \u06cc\u0627 TypeScript \u0633\u06d2 \u0631\u0627\u0636\u06cc \u06c1\u06cc\u06ba \u0627\u0648\u0631 HTML \u0627\u0648\u0631 CSS \u06a9\u06cc \u0639\u0645\u0648\u0645\u06cc \u0633\u0645\u062c\u06be \u0631\u06a9\u06be\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0622\u067e \u06a9\u0648 \u0633\u0628 \u0633\u06d2 \u0622\u0633\u0627\u0646 \u062a\u062c\u0631\u0628\u06c1 \u062d\u0627\u0635\u0644 \u06c1\u0648\u06af\u0627\u06d4<\/p>\n

React \u06a9\u0627 \u06a9\u0686\u06be \u0639\u0644\u0645 \u0645\u062f\u062f\u06af\u0627\u0631 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0636\u0631\u0648\u0631\u06cc \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u06c1\u0645 \u062c\u0648 \u067e\u0627\u067e \u0627\u067e \u062c\u0632\u0648 \u0628\u0646\u0627\u0626\u06cc\u06ba \u06af\u06d2 \u0648\u06c1 \u0627\u062a\u0646\u0627 \u0622\u0633\u0627\u0646 \u06c1\u06d2 \u06a9\u06c1 \u067e\u06c1\u0644\u06cc \u0628\u0627\u0631 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0628\u06be\u06cc \u0627\u0633 \u06a9\u06cc \u067e\u06cc\u0631\u0648\u06cc \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n

\u0633\u0627\u0641\u0679 \u0648\u06cc\u0626\u0631 \u06a9\u06cc \u0637\u0631\u0641\u060c \u0622\u067e \u06a9\u0648 Node.js \u0648\u0631\u0698\u0646 18 \u06cc\u0627 \u0627\u0633 \u0633\u06d2 \u0627\u0648\u067e\u0631 (\u06cc\u06c1\u0627\u06ba \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba)\u060c \u06af\u0648\u06af\u0644 \u06a9\u0631\u0648\u0645\u060c \u0627\u06cc\u06a9 \u06a9\u0648\u0688 \u0627\u06cc\u0688\u06cc\u0679\u0631 (VS \u06a9\u0648\u0688 \u062a\u062c\u0648\u06cc\u0632 \u06a9\u0631\u062f\u06c1)\u060c \u0627\u0648\u0631 \u067e\u06cc\u06a9\u06cc\u062c \u0645\u06cc\u0646\u06cc\u062c\u0631 pnpm \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u06af\u06cc\u06d4<\/p>\n

\u062a\u0631\u062a\u06cc\u0628\u0627\u062a \u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n

\u0679\u0631\u0645\u06cc\u0646\u0644 \u06a9\u06be\u0648\u0644\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0633 \u0628\u0627\u062a \u06a9\u0648 \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062f\u0631\u062c \u0630\u06cc\u0644 \u06a9\u0645\u0627\u0646\u0688 \u0686\u0644\u0627\u0626\u06cc\u06ba \u06a9\u06c1 \u0633\u0628 \u06a9\u0686\u06be \u0627\u0646\u0633\u0679\u0627\u0644 \u06c1\u06d2:<\/p>\n

node --version\n# Should output v18.0.0 or higher\n\nnpm --version\n# Should output 9.0.0 or higher\n<\/code><\/pre>\n
\u0645\u062f\u062f \u062d\u0627\u0635\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n
\u0627\u06af\u0631 \u0622\u067e \u06a9\u0648 \u06a9\u0648\u0626\u06cc \u0645\u0633\u0626\u0644\u06c1 \u062f\u0631\u067e\u06cc\u0634 \u06c1\u06d2\u060c \u062a\u0648 \u0628\u0631\u0627\u06c1 \u06a9\u0631\u0645 \u0631\u06cc\u067e\u0648\u0632\u0679\u0631\u06cc \u0645\u06cc\u06ba \u0645\u06a9\u0645\u0644 \u06a9\u0648\u0688 \u06a9\u0627 \u062c\u0627\u0626\u0632\u06c1 \u0644\u06cc\u06ba\u060c \u06a9\u0631\u0648\u0645 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u06a9\u0627 \u062d\u0648\u0627\u0644\u06c1 \u062f\u06cc\u06ba\u060c \u06cc\u0627 \u06c1\u0645\u0627\u0631\u06d2 \u06a9\u0645\u06cc\u0648\u0646\u0679\u06cc \u0641\u0648\u0631\u0645\u0632 \u0645\u06cc\u06ba \u0645\u062f\u062f \u0637\u0644\u0628 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n
\u0634\u0631\u0648\u0639 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u06cc\u0627\u0631 \u06c1\u06cc\u06ba\u061f<\/h3>\n
\u0627\u06af\u0644\u06d2 \u062d\u0635\u06d2 \u0645\u06cc\u06ba\u060c \u0622\u067e \u0627\u067e\u0646\u0627 \u062a\u0631\u0642\u06cc\u0627\u062a\u06cc \u0645\u0627\u062d\u0648\u0644 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u06ba \u06af\u06d2 \u0627\u0648\u0631 \u0627\u067e\u0646\u0627 \u067e\u06c1\u0644\u0627 \u06a9\u0631\u0648\u0645 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0628\u0646\u0627\u0626\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n
\u0622\u0626\u06cc\u06d2 \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba!<\/p>\n
\u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u06cc \u062a\u0631\u062a\u06cc\u0628\u0627\u062a<\/h2>\n
\u0627\u0633 \u0633\u06cc\u06a9\u0634\u0646 \u0645\u06cc\u06ba\u060c \u06c1\u0645 \u0627\u06cc\u06a9 \u06a9\u0631\u0648\u0645 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u0648 \u0633\u06a9\u06cc\u0641\u0648\u0644\u0688 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u067e\u0644\u0627\u0632\u0645\u0648 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba \u06af\u06d2 \u0627\u0648\u0631 \u067e\u06be\u0631 \u0627\u0633\u06d2 \u0679\u06cc\u0628 \u06af\u0631\u0648\u067e\u0631 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u067e\u0646\u06cc \u0645\u0631\u0636\u06cc \u06a9\u06d2 \u0645\u0637\u0627\u0628\u0642 \u0628\u0646\u0627\u0626\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n
\u0641\u0627\u0626\u0644\u06cc\u06ba \u062f\u0633\u062a\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u0622\u067e Plasmo \u06a9\u0648 \u0627\u067e\u0646\u06cc \u0636\u0631\u0648\u0631\u062a \u06a9\u06d2 \u0645\u0637\u0627\u0628\u0642 \u062a\u0645\u0627\u0645 \u06a9\u0646\u0641\u06cc\u06af\u0631\u06cc\u0634\u0646 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u06cc\u06a9 \u0633\u0679\u0627\u0631\u0679\u0631 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06d2 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 \u067e\u06be\u0631 \u0627\u067e\u0646\u06cc \u0636\u0631\u0648\u0631\u06cc\u0627\u062a \u06a9\u06d2 \u0645\u0637\u0627\u0628\u0642 \u0627\u0633\u06d2 \u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u0628\u0646\u0627\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0631\u06cc\u06ba \u06a9\u06c1 \u06cc\u06c1 \u06a9\u06cc\u0627 \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
\u0645\u0631\u062d\u0644\u06c1 1: pnpm \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631\u06cc\u06ba (\u062a\u062c\u0648\u06cc\u0632 \u06a9\u0631\u062f\u06c1)<\/h2>\n
\u067e\u0644\u0627\u0632\u0645\u0648 \u06a9\u06cc \u0633\u0631\u06a9\u0627\u0631\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0633\u0641\u0627\u0631\u0634 \u06a9\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06d2\u06d4 pnpm<\/strong> \u062a\u06cc\u0632 \u062a\u0646\u0635\u06cc\u0628 \u0627\u0648\u0631 \u0688\u0633\u06a9 \u06a9\u06cc \u062c\u06af\u06c1 \u06a9\u06d2 \u0628\u06c1\u062a\u0631 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06d2 \u0644\u06cc\u06d2\u06d4 \u062f\u06cc\u06a9\u06be\u06cc\u06ba \u06a9\u06c1 \u06a9\u06cc\u0627 \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0645\u0648\u062c\u0648\u062f \u06c1\u06d2\u06d4<\/p>\n
pnpm --version\n<\/code><\/pre>\n
\u0627\u06af\u0631 \u0622\u067e \u06a9\u0648 \u0648\u0631\u0698\u0646 \u0646\u0645\u0628\u0631 \u0646\u0638\u0631 \u0622\u062a\u0627 \u06c1\u06d2\u060c \u062a\u0648 \u0645\u0631\u062d\u0644\u06c1 2 \u067e\u0631 \u062c\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n
\"pnpm<\/p>\n
\u0627\u06af\u0631 \u0622\u067e \u06a9\u0648 "\u06a9\u0645\u0627\u0646\u0688 \u0646\u06c1\u06cc\u06ba \u0645\u0644\u0627” \u06a9\u0627 \u067e\u06cc\u063a\u0627\u0645 \u0645\u0644\u062a\u0627 \u06c1\u06d2 \u062a\u0648\u060c \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06a9\u06d2 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631\u06cc\u06ba:<\/p>\n
npm install -g pnpm\n<\/code><\/pre>\n
\u0645\u0631\u062d\u0644\u06c1 2: \u0627\u06cc\u06a9 \u062a\u0648\u0633\u06cc\u0639\u06cc \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0628\u0646\u0627\u0626\u06cc\u06ba<\/h2>\n
\u0646\u06cc\u0627 \u067e\u0644\u0627\u0632\u0645\u0648 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062f\u0631\u062c \u0630\u06cc\u0644 \u06a9\u0645\u0627\u0646\u0688 \u06a9\u0648 \u0686\u0644\u0627\u0626\u06cc\u06ba:<\/p>\n
pnpm create plasmo tab-grouper\n<\/code><\/pre>\n
\u0622\u067e \u062f\u06cc\u06a9\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba:<\/p>\n
🟣 Creating a new Plasmo extension\n📁 Project name: tab-grouper\n? Extension description: (Give your extension a nice description)\n? Author name: (Your Name)\n<\/code><\/pre>\n
\u0627\u0633 \u06a9\u06d2 \u0628\u0639\u062f \u067e\u0644\u0627\u0632\u0645\u0648 \u0622\u067e \u06a9\u06d2 \u067e\u0631\u0627\u062c\u06cc\u06a9\u0679 \u06a9\u0648 \u0627\u0633\u06a9\u0627\u0641\u0648\u0644\u0688 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u062e\u0648\u062f \u0628\u062e\u0648\u062f \u0627\u0633 \u06a9\u06d2 \u0627\u0646\u062d\u0635\u0627\u0631 \u06a9\u0648 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0622\u067e \u06a9\u0648 \u062a\u0641\u0635\u06cc\u0644 \u0627\u0648\u0631 \u0645\u0635\u0646\u0641 \u06a9\u0627 \u0646\u0627\u0645 \u062f\u0631\u062c \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u06c1\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
\u0622\u067e \u062c\u0648 \u0686\u0627\u06c1\u06cc\u06ba \u062f\u0627\u062e\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n
\"\u0679\u0631\u0645\u06cc\u0646\u0644<\/p>\n
\u0645\u0631\u062d\u0644\u06c1 3: \u0627\u067e\u0646\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u067e\u0631 \u062c\u0627\u0626\u06cc\u06ba\u06d4<\/h3>\n
cd tab-grouper\n<\/code><\/pre>\n
\u0645\u0631\u062d\u0644\u06c1 4: \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0631\u06cc\u06ba \u06a9\u06c1 \u06a9\u06cc\u0627 \u0628\u0646\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u062a\u06be\u0627\u06d4<\/h3>\n
\u067e\u0644\u0627\u0632\u0645\u0648 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06c1 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062f\u06c1 \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u06cc \u0641\u06c1\u0631\u0633\u062a\u06d4<\/p>\n
ls -la\n<\/code><\/pre>\n
\u0622\u067e \u06a9\u0648 \u06a9\u0686\u06be \u0627\u0633 \u0637\u0631\u062d \u0646\u0638\u0631 \u0622\u0626\u06d2 \u06af\u0627:<\/p>\n
tab-grouper\/\n\u251c\u2500\u2500 .git\/                 # Git repository (already initialized!)\n\u251c\u2500\u2500 .github\/              # GitHub Actions workflows\n\u251c\u2500\u2500 assets\/\n\u2502   \u2514\u2500\u2500 icon.png          # Default Plasmo icon \n\u251c\u2500\u2500 node_modules\/         # Dependencies (already installed!)\n\u251c\u2500\u2500 package.json          # Project configuration\n\u251c\u2500\u2500 popup.tsx             # Default popup \n\u251c\u2500\u2500 .prettierrc.cjs       # Code formatting rules\n\u251c\u2500\u2500 .gitignore            # Git ignore rules\n\u251c\u2500\u2500 README.md             # Default readme\n\u2514\u2500\u2500 tsconfig.json         # TypeScript configuration\n<\/code><\/pre>\n
\u06a9\u0644\u06cc\u062f\u06cc \u0641\u0627\u0626\u0644\u06cc\u06ba \u062c\u0648 \u0622\u067e \u06a9\u0648 \u062c\u0627\u0646\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2:<\/p>\n
    \n
  • \n
    asset\/icon.png<\/strong>: \u06cc\u06c1 \u06a9\u0631\u0648\u0645 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062f\u0631\u06a9\u0627\u0631 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u0622\u0626\u06cc\u06a9\u0646 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n
  • \n
    package.json<\/strong>: \u06cc\u06c1 \u0648\u06c1 \u062c\u06af\u06c1 \u06c1\u06d2 \u062c\u06c1\u0627\u06ba \u0622\u067e \u0627\u0646\u062d\u0635\u0627\u0631 \u0627\u0648\u0631 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u06cc \u0641\u06c1\u0631\u0633\u062a \u0628\u0646\u0627\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u0645\u06cc\u0646\u06cc \u0641\u06cc\u0633\u0679 \u06a9\u0648 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n
  • \n
    popup.tsx<\/strong>: \u06cc\u06c1 \u0648\u06c1 UI \u06c1\u06d2 \u062c\u0648 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u062c\u0628 \u0622\u067e \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u0622\u0626\u06cc\u06a9\u0646 \u067e\u0631 \u06a9\u0644\u06a9 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n
  • \n
    tsconfig.json<\/strong>: TypeScript \u06a9\u06cc \u062a\u0631\u062a\u06cc\u0628\u0627\u062a \u067e\u0631 \u0645\u0634\u062a\u0645\u0644 \u06c1\u06d2 \u062c\u0648 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u06c1\u06cc \u062f\u0631\u0633\u062a \u0637\u0631\u06cc\u0642\u06d2 \u0633\u06d2 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc \u06af\u0626\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n
    \u0645\u0631\u062d\u0644\u06c1 5: \u0628\u0646\u06cc\u0627\u062f\u06cc \u062a\u0648\u0633\u06cc\u0639 \u06a9\u06cc \u062c\u0627\u0646\u0686 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n
    \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u0626\u06cc\u06ba \u06a9\u06c1 \u0633\u0628 \u06a9\u0686\u06be \u0679\u06be\u06cc\u06a9 \u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631 \u0631\u06c1\u0627 \u06c1\u06d2\u06d4 \u067e\u06c1\u0644\u06d2<\/strong> \u0622\u067e \u0627\u0633\u06d2 \u0627\u067e\u0646\u06cc \u0645\u0631\u0636\u06cc \u06a9\u06d2 \u0645\u0637\u0627\u0628\u0642 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n
    \u0622\u067e \u0688\u0648\u06cc\u0644\u067e\u0645\u0646\u0679 \u0633\u0631\u0648\u0631 \u06a9\u0648 \u0634\u0631\u0648\u0639 \u06a9\u0631\u06a9\u06d2 \u0627\u06cc\u0633\u0627 \u06a9\u0631\u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n
    pnpm dev\n<\/code><\/pre>\n
    \u0622\u067e \u0627\u0633 \u0637\u0631\u062d \u0622\u0624\u0679 \u067e\u0679 \u062f\u06cc\u06a9\u06be\u06cc\u06ba \u06af\u06d2:<\/p>\n
    🟣 Plasmo v0.90.5\n🔴 The Browser Extension Framework\n🔵 INFO   | Starting the extension development server...\n🔵 INFO   | Building for target: chrome-mv3\n🔵 INFO   | Loaded environment variables from: []\n🟢 DONE   | Extension re-packaged in 1842ms! 🚀\n\nView Extension:\n📦 build\/chrome-mv3-dev\n<\/code><\/pre>\n
    \u0622\u067e \u06a9\u06cc \u062a\u0648\u0633\u06cc\u0639 \u062a\u06cc\u0627\u0631 \u06c1\u06d2\u06d4 \u0627\u0633 \u0679\u0631\u0645\u06cc\u0646\u0644 \u0648\u0646\u0688\u0648 \u06a9\u0648 \u06a9\u06be\u0644\u0627 \u0631\u06a9\u06be\u06cc\u06ba\u06d4<\/p>\n
    \u067e\u0644\u0627\u0632\u0645\u0648 \u0641\u0627\u0626\u0644 \u06a9\u06cc \u062a\u0628\u062f\u06cc\u0644\u06cc\u0648\u06ba \u06a9\u0648 \u062f\u06cc\u06a9\u06be\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u062e\u0648\u062f \u0628\u062e\u0648\u062f \u0627\u0646\u06c1\u06cc\u06ba \u062f\u0648\u0628\u0627\u0631\u06c1 \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
    \u0645\u0631\u062d\u0644\u06c1 6: \u06a9\u0631\u0648\u0645 \u0645\u06cc\u06ba \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n
    \u0627\u0628 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u06a9\u0648 \u06a9\u0631\u0648\u0645 \u0645\u06cc\u06ba \u0644\u0648\u0688 \u06a9\u0631\u06a9\u06d2 \u0627\u0633 \u06a9\u06cc \u062c\u0627\u0646\u0686 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n
      \n
    1. \n
      \u06af\u0648\u06af\u0644 \u06a9\u0631\u0648\u0645 \u06a9\u06be\u0648\u0644\u06cc\u06ba\u06d4<\/p>\n<\/li>\n
    2. \n
      \u062a\u062d\u0631\u06cc\u06a9 chrome:\/\/extensions\/<\/code><\/p>\n<\/li>\n
    3. \n
      \u0641\u0639\u0627\u0644 \u06a9\u0631\u06cc\u06ba \u0688\u0648\u06cc\u0644\u067e\u0631 \u0645\u0648\u0688<\/strong> (\u0627\u0648\u067e\u0631 \u062f\u0627\u0626\u06cc\u06ba \u0637\u0631\u0641 \u0679\u0648\u06af\u0644 \u06a9\u0631\u06cc\u06ba)<\/p>\n<\/li>\n
    4. \n
      \u06a9\u0644\u06a9 \u06a9\u0631\u06cc\u06ba "\u063a\u06cc\u0631 \u067e\u06cc\u06a9 \u0634\u062f\u06c1”<\/strong><\/p>\n<\/li>\n
    5. \n
      \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0641\u0648\u0644\u0688\u0631 \u0645\u06cc\u06ba \u062c\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<\/li>\n
    6. \n
      \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06cc\u06ba build\/chrome-mv3-dev<\/code> \u0641\u0648\u0644\u0688\u0631<\/p>\n<\/li>\n
    7. \n
      "\u0641\u0648\u0644\u0688\u0631 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06cc\u06ba” \u067e\u0631 \u06a9\u0644\u06a9 \u06a9\u0631\u06cc\u06ba<\/p>\n<\/li>\n<\/ol>\n
      \"\u0627\u06cc\u0646\u06cc\u0645\u06cc\u0679\u0688<\/p>\n
      \u062a\u0648\u0633\u06cc\u0639 \u0627\u0628 \u0641\u06c1\u0631\u0633\u062a \u0645\u06cc\u06ba \u0638\u0627\u06c1\u0631 \u06c1\u0648\u06af\u06cc\u06d4<\/p>\n
        \n
      1. \n
        \u06a9\u0631\u0648\u0645 \u0679\u0648\u0644 \u0628\u0627\u0631 \u0645\u06cc\u06ba \u067e\u0632\u0644 \u067e\u06cc\u0633 \u0622\u0626\u06cc\u06a9\u0646 \u067e\u0631 \u06a9\u0644\u06a9 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n
      2. \n
        "\u0679\u06cc\u0628 \u06af\u0631\u0648\u067e\u0646\u06af” \u062a\u0644\u0627\u0634 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0633\u06d2 \u067e\u0646 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n
      3. \n
        \u062a\u0648\u0633\u06cc\u0639\u06cc \u0622\u0626\u06cc\u06a9\u0646 \u067e\u0631 \u06a9\u0644\u06a9 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ol>\n
        \u0627\u06cc\u06a9 \u0688\u06cc\u0641\u0627\u0644\u0679 \u067e\u0627\u067e \u0627\u067e \u06cc\u06c1 \u06a9\u06c1\u062a\u0627 \u06c1\u0648\u0627 \u0646\u0638\u0631 \u0622\u0626\u06d2 \u06af\u0627 "\u067e\u0644\u0627\u0633\u0645\u0648 \u0645\u06cc\u06ba \u062e\u0648\u0634 \u0622\u0645\u062f\u06cc\u062f!”<\/p>\n
        \"\u0688\u06cc\u0641\u0627\u0644\u0679<\/p>\n
        \u062a\u0648\u0633\u06cc\u0639 \u06a9\u0627\u0645 \u06a9\u0631 \u0631\u06c1\u06cc \u06c1\u06d2\u06d4 \u0627\u0628 \u0622\u067e \u0627\u0633\u06d2 \u0627\u067e\u0646\u06cc \u0645\u0631\u0636\u06cc \u06a9\u06d2 \u0645\u0637\u0627\u0628\u0642 \u0628\u0646\u0627 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n
        \u0645\u0631\u062d\u0644\u06c1 8: \u062a\u0648\u0633\u06cc\u0639 \u06a9\u06cc \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u06a9\u0648 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n
        \u06a9\u06be\u0644\u0627 package.json<\/code> \u0622\u067e \u06a9\u06d2 \u0627\u06cc\u0688\u06cc\u0679\u0631 \u0645\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0641\u0627\u0626\u0644 \u0622\u067e \u06a9\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0645\u06cc\u0679\u0627 \u0688\u06cc\u0679\u0627 \u0627\u0633\u0679\u0648\u0631 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u0628\u0646\u0627\u0646\u06d2 \u0627\u0648\u0631 \u0686\u0644\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0646\u0627\u0645\u060c \u0648\u0631\u0698\u0646\u060c \u062a\u0641\u0635\u06cc\u0644\u060c \u0627\u0646\u062d\u0635\u0627\u0631\u060c \u0627\u0648\u0631 \u0627\u0633\u06a9\u0631\u067e\u0679\u06d4<\/p>\n
        \u0627\u0648\u067e\u0631 \u06a9\u06d2 \u0642\u0631\u06cc\u0628 \u062f\u0631\u062c \u0630\u06cc\u0644 \u0644\u0627\u0626\u0646 \u062a\u0644\u0627\u0634 \u06a9\u0631\u06cc\u06ba:<\/p>\n
        {\n  \"name\": \"tab-grouper\",\n  \"displayName\": \"tab-grouper\",\n  \"version\": \"0.0.0\",\n  \"description\": \"A basic Plasmo extension.\",\n<\/code><\/pre>\n
        \u0627\u0633\u06d2 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba:<\/p>\n
        {\n  \"name\": \"tab-grouper\",\n  \"displayName\": \"Tab Grouper\",\n  \"version\": \"1.0.0\",\n  \"description\": \"A simple Chrome extension - group tabs by domain\",\n<\/code><\/pre>\n
        \u0641\u0627\u0626\u0644 \u06a9\u0648 \u0645\u062d\u0641\u0648\u0638 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n
        \u0645\u0631\u062d\u0644\u06c1 9: \u0645\u0637\u0644\u0648\u0628\u06c1 \u0627\u062c\u0627\u0632\u062a\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba (\u0627\u06c1\u0645!)<\/h3>\n
        \u06cc\u06c1 \u0627\u06cc\u06a9 \u0627\u06c1\u0645 \u0642\u062f\u0645 \u06c1\u06d2\u06d4<\/strong> \u0627\u06af\u0631 \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u0627\u062c\u0627\u0632\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2 \u062a\u0648\u060c \u062a\u0648\u0633\u06cc\u0639 \u062f\u0631\u062c \u0630\u06cc\u0644 \u062e\u0631\u0627\u0628\u06cc \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0646\u0627\u06a9\u0627\u0645 \u06c1\u0648 \u062c\u0627\u0626\u06d2 \u06af\u06cc\u06d4<\/p>\n
        TypeError: Cannot read properties of undefined (reading 'query')\n<\/code><\/pre>\n
        Chrome \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646\u0632 \u06a9\u0648 \u06cc\u06c1 \u0627\u0639\u0644\u0627\u0646 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2 \u06a9\u06c1 \u06a9\u0648\u0646 \u0633\u06d2 \u0628\u0631\u0627\u0624\u0632\u0631 APIs \u06a9\u0648 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u06d4 \u0645\u06cc\u06ba package.json<\/code>\u062a\u0644\u0627\u0634 \u06a9\u0631\u06cc\u06ba\u06d4 \"manifest\"<\/code> \u067e\u0627\u0631\u0679 \u0679\u0627\u0626\u0645 \u0646\u0648\u06a9\u0631\u06cc.<\/p>\n
        \u06cc\u06c1 \u0645\u0646\u062f\u0631\u062c\u06c1 \u0630\u06cc\u0644 \u06c1\u06d2:<\/p>\n
        \"manifest\": {\n  \"host_permissions\": [\n    \"https:\/\/*\/*\"\n  ]\n}\n<\/code><\/pre>\n
        \u0633\u06d2 \u0628\u062f\u0644\u06cc\u06ba:<\/p>\n
        \"manifest\": {\n  \"permissions\": [\n    \"tabs\",\n    \"tabGroups\"\n  ]\n}\n<\/code><\/pre>\n
        \u0641\u0627\u0626\u0644 \u06a9\u0648 \u0645\u062d\u0641\u0648\u0638 \u06a9\u0631\u06cc\u06ba\u06d4 \u06a9\u06c1 tabs<\/code> \u0627\u06af\u0631 \u0622\u067e \u06a9\u0648 \u0627\u062c\u0627\u0632\u062a \u06c1\u06d2 \u062a\u0648 \u0622\u067e \u0679\u06cc\u0628 \u06a9\u06cc \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u067e\u0691\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba (\u0636\u0631\u0648\u0631\u06cc \u06c1\u06d2\u06d4 chrome.tabs.query()<\/code>)\u060c \u0627\u0648\u0631 tabGroups<\/code> \u0622\u067e \u0679\u06cc\u0628 \u06af\u0631\u0648\u067e\u0633 \u0628\u0646\u0627 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0646 \u06a9\u0627 \u0646\u0638\u0645 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba (\u0627\u06af\u0644\u0627 \u062f\u0631\u06a9\u0627\u0631 \u06c1\u06d2)\u06d4 chrome.tabGroups.update()<\/code>)\u06d4<\/p>\n
        \u0627\u067e\u0646\u06cc \u062a\u0648\u0633\u06cc\u0639 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062f\u0631\u0633\u062a \u0627\u062c\u0627\u0632\u062a\u06cc\u06ba \u062a\u0644\u0627\u0634 \u06a9\u0631\u06cc\u06ba:<\/h3>\n
        \u06a9\u0631\u0648\u0645 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u067e\u0631\u0645\u06cc\u0634\u0646\u0632 \u06a9\u0627 \u062d\u0648\u0627\u0644\u06c1 \u062a\u0645\u0627\u0645 \u062f\u0633\u062a\u06cc\u0627\u0628 \u0627\u062c\u0627\u0632\u062a\u0648\u06ba \u0627\u0648\u0631 \u06a9\u0646 \u0686\u06cc\u0632\u0648\u06ba \u06a9\u0648 \u063a\u06cc\u0631 \u0645\u0642\u0641\u0644 \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u06d4<\/p>\n
        \u06c1\u0631 API \u06a9\u06d2 \u0644\u06cc\u06d2 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u06a9\u0627 \u0635\u0641\u062d\u06c1 \u0645\u0637\u0644\u0648\u0628\u06c1 \u0627\u062c\u0627\u0632\u062a\u0648\u06ba \u06a9\u06cc \u0641\u06c1\u0631\u0633\u062a \u0628\u06be\u06cc \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4 \u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631\u060c chrome.tabs API \u0635\u0641\u062d\u06c1 \u06c1\u06d2\u06d4 \"tabs\"<\/code> \u0627\u062c\u0627\u0632\u062a<\/p>\n
        \u0627\u06af\u0631 \u0622\u067e \u067e\u0644\u0627\u0632\u0645\u0648 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0645\u06cc\u0646\u06cc \u0641\u06cc\u0633\u0679 \u06a9\u0646\u0641\u06cc\u06af\u0631\u06cc\u0634\u0646 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u0628\u062a\u0627\u062a\u06cc \u06c1\u06d2 \u06a9\u06c1 \u0627\u062c\u0627\u0632\u062a\u06cc\u06ba \u06a9\u06cc\u0633\u06d2 \u0634\u0627\u0645\u0644 \u06a9\u06cc \u062c\u0627\u0626\u06cc\u06ba \u0628\u0630\u0631\u06cc\u0639\u06c1: package.json<\/code>.<\/p>\n
        \u0639\u0627\u0645 \u0637\u0648\u0631 \u067e\u0631: undefined<\/code> \u0627\u06af\u0631 \u0622\u067e \u06a9\u0648 Chrome APIs \u06a9\u0648 \u06a9\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a \u063a\u0644\u0637\u06cc\u0627\u06ba \u06c1\u0648 \u0631\u06c1\u06cc \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0633\u0628 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0686\u06cc\u06a9 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u062c\u0627\u0632\u062a\u06cc\u06ba \u063a\u0627\u0626\u0628 \u06c1\u06cc\u06ba\u06d4<\/p>\n
        \u0645\u0631\u062d\u0644\u06c1 10: \u062a\u0635\u062f\u06cc\u0642 \u06a9\u0631\u06cc\u06ba \u06a9\u06c1 \u06c1\u0627\u0679 \u0631\u06cc \u0644\u0648\u0688 \u06a9\u0627\u0645 \u06a9\u0631 \u0631\u06c1\u0627 \u06c1\u06d2\u06d4<\/h3>\n
        \u062c\u0628 \u0622\u067e \u062a\u0628\u062f\u06cc\u0644\u06cc\u0627\u06ba \u0645\u062d\u0641\u0648\u0638 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u067e\u0644\u0627\u0632\u0645\u0648 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u06a9\u0648 \u062e\u0648\u062f \u0628\u062e\u0648\u062f \u062f\u0648\u0628\u0627\u0631\u06c1 \u0644\u0648\u0688 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
        \u0645\u0639\u0644\u0648\u0645 \u06a9\u0631\u06cc\u06ba \u06a9\u06c1 \u0622\u067e \u06a9\u0627 \u0679\u0631\u0645\u06cc\u0646\u0644 \u06a9\u06c1\u0627\u06ba \u06c1\u06d2\u06d4 pnpm dev<\/code> \u06cc\u06c1 \u0686\u0644 \u0631\u06c1\u0627 \u06c1\u06d2\u06d4 \u0628\u0686\u0627\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f package.json<\/code> \u0622\u067e \u06a9\u0648 \u0627\u0633 \u0637\u0631\u062d \u06a9\u0686\u06be \u062f\u06cc\u06a9\u06be\u0646\u0627 \u0686\u0627\u06c1\u0626\u06d2:<\/p>\n
        🔄 Reloading extension...\n✅ Ready in 0.8s\n<\/code><\/pre>\n
        \u0622\u067e \u06a9\u0627 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0627\u0628 \u062a\u06cc\u0627\u0631 \u06c1\u06d2\u06d4 \u06a9\u0631\u0648\u0645 \u0645\u06cc\u06ba \u0679\u0627\u0633\u06a9 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u0644\u0648\u0688\u060c \u0688\u0648\u06cc\u0644\u067e\u0645\u0646\u0679 \u0633\u0631\u0648\u0631 \u06c1\u0627\u0679 \u0631\u06cc \u0644\u0648\u0688 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0686\u0644 \u0631\u06c1\u0627 \u06c1\u06d2\u060c \u0645\u0637\u0644\u0648\u0628\u06c1 \u0627\u062c\u0627\u0632\u062a\u06cc\u06ba \u062a\u06cc\u0627\u0631 \u06c1\u06cc\u06ba\u06d4<\/p>\n
        \u062c\u0628 \u0622\u067e \u0627\u06af\u0644\u06d2 \u062d\u0635\u06d2 \u0645\u06cc\u06ba \u0622\u06af\u06d2 \u0628\u0691\u06be\u06cc\u06ba \u062a\u0648 \u0688\u0648\u06cc\u0644\u067e\u0645\u0646\u0679 \u0633\u0631\u0648\u0631 \u06a9\u0648 \u0686\u0644\u062a\u06d2 \u0631\u06c1\u0646\u06d2 \u062f\u06cc\u06ba \u0627\u0648\u0631 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u0644\u0648\u0688 \u06c1\u0648\u0646\u06d2 \u062f\u06cc\u06ba\u06d4 \u062a\u0628\u062f\u06cc\u0644\u06cc\u0627\u06ba \u062e\u0648\u062f \u0628\u062e\u0648\u062f \u062f\u0648\u0628\u0627\u0631\u06c1 \u0644\u0648\u0688 \u06c1\u0648 \u062c\u0627\u062a\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n
        \u0633\u06cc\u06a9\u0634\u0646 \u06a9\u0627 \u062e\u0644\u0627\u0635\u06c1<\/h3>\n
        \u0627\u0633 \u0633\u06cc\u06a9\u0634\u0646 \u0645\u06cc\u06ba\u060c \u06c1\u0645 \u0646\u06d2 pnpm \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u06cc\u0627 \u0627\u0648\u0631 \u0646\u0626\u06cc \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u06a9\u0648 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u0633\u06a9\u0627\u0641\u0648\u0644\u0688 \u06a9\u06cc\u0627: pnpm create plasmo<\/code>\u06c1\u0645 \u0646\u06d2 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062f\u06c1 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u06d2 \u0688\u06be\u0627\u0646\u0686\u06d2 \u06a9\u0648 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u06cc\u0627\u060c \u0688\u06cc\u0648\u0644\u067e\u0645\u0646\u0679 \u0633\u0631\u0648\u0631 \u0634\u0631\u0648\u0639 \u06a9\u06cc\u0627\u060c \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u06a9\u0648 Chrome \u0645\u06cc\u06ba \u0644\u0648\u0688 \u06a9\u06cc\u0627\u060c \u0627\u0648\u0631 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u0645\u06cc\u0679\u0627 \u0688\u06cc\u0679\u0627 \u0627\u0648\u0631 \u0627\u062c\u0627\u0632\u062a\u0648\u06ba \u06a9\u0648 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u06cc\u0627\u06d4<\/p>\n
        \u0627\u06af\u0644\u0627:<\/strong> \u0679\u06cc\u0628 \u06af\u0631\u0648\u067e\u0646\u06af \u0645\u0646\u0637\u0642 \u06a9\u0648 \u0633\u0646\u0628\u06be\u0627\u0644\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u067e\u0633 \u0645\u0646\u0638\u0631 \u06a9\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n
        \u067e\u0633 \u0645\u0646\u0638\u0631 \u06a9\u06d2 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u0648 \u0633\u0645\u062c\u06be\u0646\u0627<\/h2>\n
        \u067e\u0633 \u0645\u0646\u0638\u0631 \u06a9\u06d2 \u0627\u0633\u06a9\u0631\u067e\u0679 \u062a\u0648\u0633\u06cc\u0639 \u06a9\u0627 \u0645\u0631\u06a9\u0632 \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0645\u0633\u0644\u0633\u0644 \u067e\u0631\u062f\u06d2 \u06a9\u06d2 \u067e\u06cc\u0686\u06be\u06d2 \u0686\u0644\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0633 \u0645\u06cc\u06ba \u0628\u0646\u06cc\u0627\u062f\u06cc \u0645\u0646\u0637\u0642 \u06c1\u06d2\u06d4<\/p>\n
        \u0627\u0633 \u0635\u0648\u0631\u062a \u0645\u06cc\u06ba\u060c \u06a9\u0648\u0688 \u0679\u06cc\u0628\u0632 \u06a9\u0648 \u0688\u0648\u0645\u06cc\u0646 \u06a9\u06d2 \u0644\u062d\u0627\u0638 \u0633\u06d2 \u06af\u0631\u0648\u067e \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
        \u067e\u0633 \u0645\u0646\u0638\u0631 \u06a9\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u06cc\u0627 \u06c1\u06d2\u061f<\/h3>\n
        \u067e\u0627\u067e \u0627\u067e \u0628\u0646\u062f \u06c1\u0648\u0646\u06d2 \u06a9\u06d2 \u0628\u0627\u0648\u062c\u0648\u062f \u0628\u06cc\u06a9 \u06af\u0631\u0627\u0624\u0646\u0688 \u0627\u0633\u06a9\u0631\u067e\u0679 \u0686\u0644\u062a\u0627 \u0631\u06c1\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
        \u0622\u067e \u0628\u0631\u0627\u0624\u0632\u0631 \u06a9\u06d2 \u0648\u0627\u0642\u0639\u0627\u062a \u0633\u0646 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u06cc\u0633\u06d2 \u06a9\u06c1 \u0679\u06cc\u0628\u0632 \u06a9\u0648 \u06a9\u06be\u0648\u0644\u0646\u0627\u060c \u0628\u0646\u062f \u06a9\u0631\u0646\u0627\u060c \u06cc\u0627 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u0646\u0627\u060c \u0627\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u0627\u0646\u062c\u0627\u0645 \u062f\u06d2 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0646 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0635\u0627\u0631\u0641 \u06a9\u06d2 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u062a\u0639\u0627\u0645\u0644 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u060c \u0627\u0648\u0631 \u067e\u06cc\u063a\u0627\u0645\u0627\u062a \u0628\u06be\u06cc\u062c \u06a9\u0631 \u062a\u0648\u0633\u06cc\u0639 \u06a9\u06d2 \u062f\u0648\u0633\u0631\u06d2 \u062d\u0635\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0628\u0627\u062a \u0686\u06cc\u062a \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n
        \u0627\u0633\u06d2 \u0627\u067e\u0646\u06d2 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u06a9\u06d2 \u0633\u0631\u0648\u0631 \u0633\u0627\u0626\u0688 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0633\u0648\u0686\u06cc\u06ba\u06d4 \u0627\u06cc\u06a9 \u067e\u0627\u067e \u0627\u067e \u0635\u0631\u0641 \u0627\u06cc\u06a9 UI \u06c1\u06d2 \u062c\u0648 \u067e\u0627\u067e \u0627\u067e \u0633\u06d2 \u0628\u0627\u062a \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
        \u0645\u0631\u062d\u0644\u06c1 1: background.ts \u0628\u0646\u0627\u0626\u06cc\u06ba<\/h3>\n
        \u067e\u0644\u0627\u0632\u0645\u0648 \u06a9\u06cc \u0633\u06c1\u0627\u0631\u0648\u06ba \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0637\u06d2 \u0634\u062f\u06c1 \u0628\u06cc\u06a9 \u06af\u0631\u0627\u0624\u0646\u0688 \u0627\u0633\u06a9\u0631\u067e\u0679 \u0646\u06c1\u06cc\u06ba \u0628\u0646\u062a\u0627\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u06cc\u06c1 \u0627\u0633 \u0641\u0627\u0626\u0644 \u06a9\u0648 \u0634\u0631\u0648\u0639 \u0633\u06d2 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u06d2 \u06af\u0627\u06d4 \u0646\u0627\u0645\u06cc \u0627\u06cc\u06a9 \u0646\u0626\u06cc \u0641\u0627\u0626\u0644 \u0628\u0646\u0627\u0626\u06cc\u06ba background.ts<\/code> \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u06cc \u062c\u0691 \u067e\u0631 (\u0627\u06af\u0644\u06cc \u0633\u0637\u062d \u067e\u0631) popup.tsx<\/code>):<\/p>\n
        export {}\n\n\/\/ Background script - runs in the background and handles tab grouping logic\n\nconsole.log(\"Tab Grouper background script loaded!\")\n\n\/\/ Listen for messages from the popup\nchrome.runtime.onMessage.addListener((message, sender, sendResponse) => {\n  if (message.type === \"GROUP_TABS\") {\n    groupTabsByDomain()\n    sendResponse({ success: true })\n  }\n  return true\n})\n<\/code><\/pre>\n
        \u06a9\u06c1 export {}<\/code> \u067e\u0644\u0627\u0632\u0645\u0648 \u06a9\u0648 \u0645\u0627\u0688\u06cc\u0648\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0627\u0633 \u067e\u0631 \u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0679\u0627\u067e \u0641\u0627\u0626\u0644 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4 \u0627\u0633 \u06a9\u06d2 \u0628\u063a\u06cc\u0631 \u0622\u067e \u06a9\u0648 \u0639\u0627\u0644\u0645\u06cc \u0645\u062a\u063a\u06cc\u0631 \u0627\u0639\u0644\u0627\u0645\u06cc\u06c1 \u06a9\u06d2 \u062a\u0646\u0627\u0632\u0639\u0627\u062a \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u063a\u0644\u0637\u06cc\u0627\u06ba \u0645\u0644 \u0633\u06a9\u062a\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n
        \u06a9\u06c1 console.log<\/code> \u0627\u0633 \u0633\u06d2 \u0627\u0633 \u0628\u0627\u062a \u06a9\u0648 \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u0646\u06d2 \u0645\u06cc\u06ba \u0645\u062f\u062f \u0645\u0644\u062a\u06cc \u06c1\u06d2 \u06a9\u06c1 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u0648 \u0635\u062d\u06cc\u062d \u0637\u0631\u06cc\u0642\u06d2 \u0633\u06d2 \u0644\u0648\u0688 \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2 (\u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u06a9\u06d2 DevTools \u06a9\u0646\u0633\u0648\u0644 \u0645\u06cc\u06ba \u0646\u0638\u0631 \u0622\u062a\u0627 \u06c1\u06d2)\u06d4 chrome.runtime.onMessage<\/code> \u0627\u06cc\u06a9 \u0633\u0646\u0646\u06d2 \u0648\u0627\u0644\u0627 \u0633\u06cc\u0679 \u0627\u067e \u06a9\u0631\u06cc\u06ba \u062a\u0627\u06a9\u06c1 \u0628\u06cc\u06a9 \u06af\u0631\u0627\u0624\u0646\u0688 \u0627\u0633\u06a9\u0631\u067e\u0679 \u067e\u0627\u067e \u0627\u067e \u0633\u06d2 \u06c1\u062f\u0627\u06cc\u0627\u062a \u062d\u0627\u0635\u0644 \u06a9\u0631 \u0633\u06a9\u06d2\u06d4<\/p>\n
        \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0645\u0648\u0635\u0648\u0644 \u06c1\u0648\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f \"GROUP_TABS\"<\/code> \u062c\u0628 \u0627\u0634\u0627\u0631\u06c1 \u06a9\u06cc\u0627 \u062c\u0627\u0626\u06d2\u060c \u06af\u0631\u0648\u067e\u0646\u06af \u0641\u0646\u06a9\u0634\u0646 \u06a9\u0648 \u06a9\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n
        \u0622\u067e \u06a9\u0631\u0648\u0645 \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u0645\u06cc\u06ba \u067e\u06cc\u063a\u0627\u0645 \u0631\u0633\u0627\u0646\u06cc \u06a9\u06d2 \u0627\u0633 \u067e\u06cc\u0679\u0631\u0646 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0645\u0632\u06cc\u062f \u062c\u0627\u0646 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n
        \u0645\u0631\u062d\u0644\u06c1 2: \u0679\u06cc\u0628 \u06af\u0631\u0648\u067e\u0646\u06af \u0645\u0646\u0637\u0642 \u06a9\u0648 \u0646\u0627\u0641\u0630 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n
        \u0627\u0628 \u067e\u06cc\u063a\u0627\u0645 \u0633\u0646\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u06a9\u06d2 \u0646\u06cc\u0686\u06d2 \u0627\u06cc\u06a9 \u0628\u0646\u06cc\u0627\u062f\u06cc \u06af\u0631\u0648\u067e\u0646\u06af \u0641\u0646\u06a9\u0634\u0646 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n
        async function groupTabsByDomain() {\n  try {\n    \/\/ Step 1: Get all tabs in the current window\n    const tabs = await chrome.tabs.query({ currentWindow: true })\n\n    \/\/ Step 2: Create a Map to organize tabs by domain\n    const domainGroups = new Map()\n\n    \/\/ Step 3: Loop through each tab and group by domain\n    tabs.forEach(tab => {\n      \/\/ Skip tabs without URLs\n      if (!tab.url) return\n\n      \/\/ Extract the domain from the URL\n      const domain = getDomainFromUrl(tab.url)\n\n      \/\/ Skip invalid domains (like chrome:\/\/ pages)\n      if (!domain) return\n\n      \/\/ Add tab to the appropriate domain group\n      if (!domainGroups.has(domain)) {\n        domainGroups.set(domain, [])\n      }\n      domainGroups.get(domain)!.push(tab)\n    })\n\n    \/\/ Step 4: Create tab groups for each domain (only if 2+ tabs)\n    for (const [domain, domainTabs] of domainGroups) {\n      \/\/ Skip domains with only 1 tab\n      if (domainTabs.length < 2) continue\n\n      \/\/ Get all tab IDs\n      const tabIds = domainTabs\n        .map(t => t.id!)\n        .filter(id => id !== undefined)\n\n      if (tabIds.length === 0) continue\n\n      \/\/ Create the tab group\n      const groupId = await chrome.tabs.group({ tabIds })\n\n      \/\/ Customize the group with a title and color\n      await chrome.tabGroups.update(groupId, {\n        title: domain,\n        color: getColorForDomain(domain) \/\/ Randomized Tab Group colors.\n      })\n    }\n\n    console.log(`Successfully grouped ${domainGroups.size} domains`)\n  } catch (error) {\n    console.error(\"Error grouping tabs:\", error)\n  }\n}\n<\/string><\/code><\/pre>\n
        \u06cc\u06c1 \u0641\u0646\u06a9\u0634\u0646 \u0645\u0648\u062c\u0648\u062f\u06c1 \u0648\u0646\u0688\u0648 \u0645\u06cc\u06ba \u062a\u0645\u0627\u0645 \u0679\u06cc\u0628\u0632 \u0633\u06d2 \u0627\u0633\u062a\u0641\u0633\u0627\u0631 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u0634\u0631\u0648\u0639 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u060c \u067e\u06be\u0631 \u0627\u0646 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u062f\u06c1\u0631\u0627\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 Map<\/code> \u0688\u0648\u0645\u06cc\u0646 \u0646\u0627\u0645 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u062f\u0631\u062c \u06a9\u06cc\u0627 \u06af\u06cc\u0627\u06d4<\/p>\n
        \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u062c\u0628 \u062a\u0645\u0627\u0645 \u0679\u06cc\u0628\u0632 \u0688\u0648\u0645\u06cc\u0646 \u06a9\u06cc \u0628\u0627\u0644\u0679\u06cc\u0648\u06ba \u0645\u06cc\u06ba \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06cc\u06ba\u060c \u06c1\u0645 \u0646\u0642\u0634\u06d2 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0627\u0639\u0627\u062f\u06c1 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0633\u06d2 \u06a9\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 chrome.tabs.group()<\/code> \u0627\u06cc\u06a9 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0679\u06cc\u0628 \u0648\u0627\u0644\u06d2 \u0688\u0648\u0645\u06cc\u0646\u0632 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0639\u0646\u0648\u0627\u0646\u0627\u062a \u0627\u0648\u0631 \u0631\u0646\u06af\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0646\u062a\u06cc\u062c\u06d2 \u0645\u06cc\u06ba \u0622\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u06af\u0631\u0648\u067e\u0633 \u06a9\u0648 \u0641\u0648\u0631\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0627\u067e\u0646\u06cc \u0645\u0631\u0636\u06cc \u06a9\u06d2 \u0645\u0637\u0627\u0628\u0642 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n
        \u0635\u0631\u0641 \u0627\u06cc\u06a9 \u0679\u06cc\u0628 \u0648\u0627\u0644\u06d2 \u0688\u0648\u0645\u06cc\u0646\u0632 \u06a9\u0648 \u0686\u06be\u0648\u0691 \u062f\u06cc\u0627 \u062c\u0627\u0626\u06d2 \u06af\u0627\u06d4 \u0627\u06cc\u06a9 \u0679\u06cc\u0628 \u06a9\u0648 \u0627\u06cc\u06a9 \u0633\u0627\u062a\u06be \u06af\u0631\u0648\u067e \u06a9\u0631\u0646\u0627 \u06a9\u0648\u0626\u06cc \u0645\u0639\u0646\u06cc \u0646\u06c1\u06cc\u06ba \u0631\u06a9\u06be\u062a\u0627\u06d4<\/p>\n
        \u0645\u0631\u062d\u0644\u06c1 3: \u0688\u0648\u0645\u06cc\u0646 \u0645\u062f\u062f\u06af\u0627\u0631 \u06a9\u0648 \u0646\u06a9\u0627\u0644\u06cc\u06ba\u06d4<\/h3>\n
        \u06cc\u0648 \u0622\u0631 \u0627\u06cc\u0644 \u0633\u06d2 \u0645\u06cc\u0632\u0628\u0627\u0646 \u0646\u0627\u0645 \u062d\u0627\u0635\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0645\u062f\u062f\u06af\u0627\u0631 \u0641\u0646\u06a9\u0634\u0646 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n
        function getDomainFromUrl(url: string): string | null {\n  try {\n    const urlObj = new URL(url)\n\n    \/\/ Skip Chrome internal pages (chrome:\/\/, chrome-extension:\/\/)\n    if (urlObj.protocol === \"chrome:\" || urlObj.protocol === \"chrome-extension:\") {\n      return null\n    }\n\n    \/\/ Remove \"www.\" prefix and return the hostname\n    return urlObj.hostname.replace(\/^www.\/, \"\")\n  } catch {\n    \/\/ Return null if URL is invalid\n    return null\n  }\n}\n<\/code><\/pre>\n
        new URL(url)<\/code>    \u06cc\u0648 \u0622\u0631 \u0627\u06cc\u0644 \u06a9\u0648 \u062f\u0633\u062a\u06cc \u0637\u0648\u0631 \u067e\u0631 \u062a\u0627\u0631\u0648\u06ba \u0645\u06cc\u06ba \u067e\u0627\u0631\u0633 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u06cc\u06c1 \u06a9\u0627\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0645\u0646\u0638\u0645 \u0622\u0628\u062c\u06cc\u06a9\u0679 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
        \u067e\u0631\u0648\u0679\u0648\u06a9\u0648\u0644 \u0645\u0639\u0627\u0626\u0646\u06c1 \u06a9\u0631\u0648\u0645 \u06a9\u06d2 \u0627\u0646\u062f\u0631\u0648\u0646\u06cc \u0635\u0641\u062d\u0627\u062a \u06a9\u0648 \u0641\u0644\u0679\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u062c\u06cc\u0633\u06d2: chrome:\/\/extensions<\/code> \u0627\u0648\u0631 chrome:\/\/settings<\/code>\u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646\u0632 \u0642\u0627\u0628\u0644 \u0631\u0633\u0627\u0626\u06cc \u0646\u06c1\u06cc\u06ba \u06c1\u06cc\u06ba\u06d4<\/p>\n
        \u06a9\u06c1 .replace(\/^www.\/, \"\")<\/code> \u06af\u0627\u0631\u0646\u0679\u06cc www.github.com<\/code> \u0627\u0648\u0631 github.com<\/code> \u0627\u0646\u06c1\u06cc\u06ba \u062f\u0648 \u0627\u0644\u06af \u0627\u0644\u06af \u06af\u0631\u0648\u067e\u0648\u06ba \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0627\u06cc\u06a9 \u06c1\u06cc \u0688\u0648\u0645\u06cc\u0646 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0633\u0645\u062c\u06be\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
        \u06c1\u0631 \u0686\u06cc\u0632 \u06a9\u0648 \u0679\u0631\u0627\u0626\u06cc \u06a9\u06cc\u0686 \u0645\u06cc\u06ba \u0644\u067e\u06cc\u0679 \u062f\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u062e\u0631\u0627\u0628 URLs \u06a9\u0648 \u0622\u0633\u0627\u0646\u06cc \u0633\u06d2 \u0648\u0627\u067e\u0633 \u06a9\u0631 \u062f\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 null<\/code> \u0627\u0648\u0631 \u0627\u0633\u06d2 \u0686\u06be\u0648\u0691 \u062f\u06cc\u06ba\u06d4<\/p>\n
        \u0627\u0635\u0644 \u0645\u06cc\u06ba: https:\/\/www.github.com\/user\/repo<\/code> \u0628\u0646 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 github.com<\/code>\u060c https:\/\/youtube.com\/watch?v=123<\/code> \u0628\u0646 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 youtube.com<\/code>\u0627\u0648\u0631 chrome:\/\/extensions<\/code> \u0631\u067e\u0648\u0631\u0679 null<\/code>.<\/p>\n
        \u0645\u0631\u062d\u0644\u06c1 4: \u06a9\u0644\u0631 \u0627\u0633\u0627\u0626\u0646\u0645\u0646\u0679 \u0627\u0633\u0633\u0679\u0646\u0679<\/h3>\n
        \u06c1\u0631 \u0688\u0648\u0645\u06cc\u0646 \u06a9\u0648 \u0627\u06cc\u06a9 \u0631\u0646\u06af \u0645\u0642\u0631\u0631 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0641\u0646\u06a9\u0634\u0646 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n
        function getColorForDomain(domain: string): chrome.tabGroups.ColorEnum {\n  \/\/ Available colors in Chrome\n  const colors: chrome.tabGroups.ColorEnum[] = [\n    \"blue\", \"red\", \"yellow\", \"green\", \"pink\", \"purple\", \"cyan\", \"orange\"\n  ]\n\n  \/\/ Create a simple hash from the domain name\n  let hash = 0\n  for (let i = 0; i < domain.length; i++) {\n    hash = domain.charCodeAt(i) + ((hash << 5) - hash)\n  }\n\n  \/\/ Return a color based on the hash\n  return colors[Math.abs(hash) % colors.length]\n}\n<\/code><\/pre>\n
        \u06a9\u0631\u0648\u0645 \u0679\u06cc\u0628 \u06af\u0631\u0648\u067e\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0622\u0679\u06be \u0631\u0646\u06af\u0648\u06ba \u06a9\u0648 \u0633\u067e\u0648\u0631\u0679 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0646 \u06a9\u0648 \u062a\u0635\u0627\u062f\u0641\u06cc \u0637\u0648\u0631 \u067e\u0631 \u062a\u0641\u0648\u06cc\u0636 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 (\u062c\u0648 \u06c1\u0631 \u0628\u0627\u0631 \u062c\u0628 \u0622\u067e \u0627\u0646 \u06a9\u0648 \u06af\u0631\u0648\u067e \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba)\u060c \u06cc\u06c1 \u0641\u0646\u06a9\u0634\u0646 \u0688\u0648\u0645\u06cc\u0646 \u06a9\u06d2 \u0646\u0627\u0645 \u06a9\u0648 \u0639\u062f\u062f\u06cc \u0637\u0648\u0631 \u067e\u0631 \u06c1\u06cc\u0634 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0645\u0648\u0688\u06cc\u0648\u0644\u0648 \u0622\u067e\u0631\u06cc\u0679\u0631 \u06a9\u0648 \u06a9\u0644\u0631 \u0627\u0631\u06cc \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0645\u0633\u062a\u0642\u0644 \u0627\u0646\u0688\u06cc\u06a9\u0633 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
        \u0646\u062a\u06cc\u062c\u06c1 \u06cc\u06c1 \u06c1\u06d2\u06d4 github.com<\/code> \u062c\u0628 \u06a9\u06c1 \u0622\u067e \u06a9\u0648 \u0633\u06cc\u0634\u0646\u0632 \u0645\u06cc\u06ba \u06c1\u0645\u06cc\u0634\u06c1 \u0627\u06cc\u06a9 \u06c1\u06cc \u0631\u0646\u06af \u0645\u0644\u06d2 \u06af\u0627\u060c \u0645\u062e\u062a\u0644\u0641 \u0688\u0648\u0645\u06cc\u0646\u0632 \u06a9\u06d2 \u0645\u062e\u062a\u0644\u0641 \u0631\u0646\u06af \u0645\u0644\u0646\u06d2 \u06a9\u0627 \u0627\u0645\u06a9\u0627\u0646 \u06c1\u06d2\u06d4<\/p>\n
        background.ts \u0641\u0627\u0626\u0644 \u06a9\u0648 \u0645\u06a9\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n
        \u0622\u067e \u06a9\u0627 \u06a9\u0627\u0645\u0644 background.ts<\/code> \u06cc\u06c1 \u0627\u0633 \u0637\u0631\u062d \u06c1\u0648\u0646\u0627 \u0686\u0627\u06c1\u0626\u06d2:<\/p>\n
        export {}\n\nconsole.log(\"Tab Grouper background script loaded!\")\n\nchrome.runtime.onMessage.addListener((message, sender, sendResponse) => {\n  if (message.type === \"GROUP_TABS\") {\n    groupTabsByDomain()\n    sendResponse({ success: true })\n  }\n  return true\n})\n\nasync function groupTabsByDomain() {\n  try {\n    const tabs = await chrome.tabs.query({ currentWindow: true })\n    const domainGroups = new Map()\n\n    tabs.forEach(tab => {\n      if (!tab.url) return\n      const domain = getDomainFromUrl(tab.url)\n      if (!domain) return\n\n      if (!domainGroups.has(domain)) {\n        domainGroups.set(domain, [])\n      }\n      domainGroups.get(domain)!.push(tab)\n    })\n\n    for (const [domain, domainTabs] of domainGroups) {\n      if (domainTabs.length < 2) continue\n\n      const tabIds = domainTabs\n        .map(t => t.id!)\n        .filter(id => id !== undefined)\n\n      if (tabIds.length === 0) continue\n\n      const groupId = await chrome.tabs.group({ tabIds })\n\n      await chrome.tabGroups.update(groupId, {\n        title: domain,\n        color: getColorForDomain(domain)\n      })\n    }\n\n    console.log(`Successfully grouped ${domainGroups.size} domains`)\n  } catch (error) {\n    console.error(\"Error grouping tabs:\", error)\n  }\n}\n\nfunction getDomainFromUrl(url: string): string | null {\n  try {\n    const urlObj = new URL(url)\n    if (urlObj.protocol === \"chrome:\" || urlObj.protocol === \"chrome-extension:\") {\n      return null\n    }\n    return urlObj.hostname.replace(\/^www.\/, \"\")\n  } catch {\n    return null\n  }\n}\n\nfunction getColorForDomain(domain: string): chrome.tabGroups.ColorEnum {\n  const colors: chrome.tabGroups.ColorEnum[] = [\n    \"blue\", \"red\", \"yellow\", \"green\", \"pink\", \"purple\", \"cyan\", \"orange\"\n  ]\n\n  let hash = 0\n  for (let i = 0; i < domain.length; i++) {\n    hash = domain.charCodeAt(i) + ((hash << 5) - hash)\n  }\n\n  return colors[Math.abs(hash) % colors.length]\n}\n<\/string><\/code><\/pre>\n
        \u067e\u0633 \u0645\u0646\u0638\u0631 \u06a9\u06cc \u0627\u0633\u06a9\u0631\u067e\u0679 \u0679\u06cc\u0633\u0679\u0646\u06af<\/h3>\n
        \u0688\u06cc\u0648\u0644\u067e\u0645\u0646\u0679 \u0633\u0631\u0648\u0631 \u06a9\u0648 \u067e\u0686\u06be\u0644\u06d2 \u062d\u0635\u06d2 \u0633\u06d2 \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba \u0627\u06af\u0631 \u06cc\u06c1 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0646\u06c1\u06cc\u06ba \u0686\u0644 \u0631\u06c1\u0627 \u06c1\u06d2\u06d4<\/p>\n
        pnpm dev\n<\/code><\/pre>\n
        \u0627\u0633 \u0628\u0627\u062a \u06a9\u06cc \u062a\u0635\u062f\u06cc\u0642 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u06c1 \u067e\u0633 \u0645\u0646\u0638\u0631 \u06a9\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u0635\u062d\u06cc\u062d \u0637\u0631\u06cc\u0642\u06d2 \u0633\u06d2 \u0644\u0648\u0688 \u06c1\u0648\u0627 \u06c1\u06d2\u060c \u0627\u0633 \u067e\u0631 \u062c\u0627\u0626\u06cc\u06ba: chrome:\/\/extensions<\/code>\"\u0679\u06cc\u0628 \u06af\u0631\u0648\u067e\u0646\u06af \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644\" \u062a\u0644\u0627\u0634 \u06a9\u0631\u06cc\u06ba \"\u0633\u0631\u0648\u0633 \u0648\u0631\u06a9\u0631\"<\/strong> \u0644\u0646\u06a9<\/p>\n
        \u062c\u0628 DevTools \u06a9\u0646\u0633\u0648\u0644 \u06a9\u06be\u0644\u062a\u0627 \u06c1\u06d2\u060c \u062a\u0648 \u0622\u067e \u062f\u06cc\u06a9\u06be\u06cc\u06ba \u06af\u06d2 'Tab Grouper \u06a9\u06d2 \u067e\u0633 \u0645\u0646\u0638\u0631 \u06a9\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u0644\u0648\u0688 \u06c1\u0648\u0627!' \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u0626\u06cc\u06ba \u06a9\u06c1 \u0633\u0628 \u06a9\u0686\u06be \u0645\u0646\u0633\u0644\u06a9 \u06c1\u06d2\u06d4<\/p>\n
        \u067e\u0627\u067e \u0627\u067e \u0627\u06cc\u06a9 \u0686\u06be\u0648\u0679\u06cc \u0633\u06cc \u0648\u0646\u0688\u0648 \u06c1\u06d2 \u062c\u0648 \u0627\u0633 \u0648\u0642\u062a \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u06cc \u06c1\u06d2 \u062c\u0628 \u06a9\u0648\u0626\u06cc \u0635\u0627\u0631\u0641 \u06a9\u0631\u0648\u0645 \u0679\u0648\u0644 \u0628\u0627\u0631 \u0645\u06cc\u06ba \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0634\u0646 \u0622\u0626\u06cc\u06a9\u0646 \u067e\u0631 \u06a9\u0644\u06a9 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
        \u06cc\u06c1 \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0638\u0627\u06c1\u0631 \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u060c \u0627\u06cc\u06a9\u0634\u0646 \u0628\u0679\u0646 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0688\u0633\u067e\u0644\u06d2 \u0633\u06cc\u0679\u0646\u06af\u0632 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
        \u0627\u0633 \u0633\u06cc\u06a9\u0634\u0646 \u0645\u06cc\u06ba\u060c \u06c1\u0645 \u0631\u06cc \u0627\u06cc\u06a9\u0679 \u067e\u0631 \u0645\u0628\u0646\u06cc \u067e\u0627\u067e \u0627\u067e \u0628\u0646\u0627\u0626\u06cc\u06ba \u06af\u06d2 \u062c\u0648 \u0631\u06cc\u0626\u0644 \u0679\u0627\u0626\u0645 \u0679\u06cc\u0628 \u06a9\u06d2 \u0627\u0639\u062f\u0627\u062f\u0648\u0634\u0645\u0627\u0631 \u062f\u06a9\u06be\u0627\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0628\u06cc\u06a9 \u06af\u0631\u0627\u0624\u0646\u0688 \u0627\u0633\u06a9\u0631\u067e\u0679 \u0633\u06d2 \u06af\u0631\u0648\u067e\u0646\u06af \u0645\u0646\u0637\u0642 \u06a9\u0648 \u0645\u062a\u062d\u0631\u06a9 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
        \u062c\u0628 \u0622\u067e \u0628\u06be\u0627\u06af\u062a\u06d2 \u06c1\u06cc\u06ba pnpm create plasmo<\/code>\u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0637\u06d2 \u0634\u062f\u06c1 popup.tsx<\/code> \u06cc\u06c1 \u0635\u0631\u0641 \u0627\u06cc\u06a9 \u062e\u0648\u0634 \u0622\u0626\u0646\u062f \u067e\u06cc\u063a\u0627\u0645 \u06a9\u0648 \u0638\u0627\u06c1\u0631 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0688\u06cc\u0632\u0627\u0626\u0646 \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n
        \u0627\u0633 \u0641\u0627\u0626\u0644 \u06a9\u0648 \u06a9\u06be\u0648\u0644\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0633\u06d2 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 \u06c1\u0631<\/strong> \u0627\u0633 \u0627\u0628\u062a\u062f\u0627\u0626\u06cc \u06a9\u0646\u06a9\u0627\u0644 \u06a9\u06d2 \u0645\u0646\u062f\u0631\u062c\u0627\u062a \u062f\u0631\u062c \u0630\u06cc\u0644 \u06c1\u06cc\u06ba:<\/p>\n
        import { useState, useEffect } from \"react\"\n\nfunction IndexPopup() {\n  const [tabCount, setTabCount] = useState(0)\n  const [groupCount, setGroupCount] = useState(0)\n  const [isGrouping, setIsGrouping] = useState(false)\n\n  return (\n    
        \n      
        Tab Grouper<\/h2>\n