{"id":20424,"date":"2023-04-30T13:55:20","date_gmt":"2023-04-30T10:25:20","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/create-a-keyword-generator-chrome-extension-1gfh\/"},"modified":"2023-04-30T13:55:20","modified_gmt":"2023-04-30T10:25:20","slug":"create-a-keyword-generator-chrome-extension-1gfh","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/create-a-keyword-generator-chrome-extension-1gfh\/","title":{"rendered":"\u06cc\u06a9 \u0627\u0641\u0632\u0648\u0646\u0647 Chrome Generator \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f\ud83d\udd25"},"content":{"rendered":"<div data-article-id=\"1452556\" id=\"article-body\">\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/create-a-keyword-generator-chrome-extension-1gfh\/#%D9%85%D8%B9%D8%B1%D9%81%DB%8C\" >\u0645\u0639\u0631\u0641\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/create-a-keyword-generator-chrome-extension-1gfh\/#%D9%81%D9%86_%D8%A2%D9%88%D8%B1%DB%8C\" >\u0641\u0646 \u0622\u0648\u0631\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/create-a-keyword-generator-chrome-extension-1gfh\/#%D8%B3%D8%B1%DB%8C%D8%B9\" >\u0633\u0631\u06cc\u0639<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/create-a-keyword-generator-chrome-extension-1gfh\/#%D9%88%D8%A7%DA%A9%D9%86%D8%B4_%D9%86%D8%B4%D8%A7%D9%86_%D8%AF%D9%87%DB%8C%D8%AF_%D9%BE%DB%8C%D8%B4_%D8%A8%DB%8C%D9%86%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u062f |  \u067e\u06cc\u0634 \u0628\u06cc\u0646\u06cc \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/create-a-keyword-generator-chrome-extension-1gfh\/#CRXJS_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\" >CRXJS \u0686\u06cc\u0633\u062a\u061f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/create-a-keyword-generator-chrome-extension-1gfh\/#%DA%A9%D8%AF\" >\u06a9\u062f<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/create-a-keyword-generator-chrome-extension-1gfh\/#%D8%A8%D8%A7%DB%8C%D8%AF_%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_Vite_%D8%B1%D8%A7_%D8%A8%D9%87_%D8%B1%D9%88%D8%B2_%DA%A9%D9%86%DB%8C%D9%85\" >\u0628\u0627\u06cc\u062f \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc Vite \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u0645<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/create-a-keyword-generator-chrome-extension-1gfh\/#%D8%B3%D8%B1%D9%88%D8%B1_%D8%AA%D9%88%D8%B3%D8%B9%D9%87_%D8%B1%D8%A7_%D8%A7%D8%AC%D8%B1%D8%A7_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0639\u0647 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/create-a-keyword-generator-chrome-extension-1gfh\/#%D8%A7%D9%81%D8%B2%D9%88%D9%86%D9%87_%D8%B1%D8%A7_%D8%A8%D9%87_%DA%A9%D8%B1%D9%88%D9%85_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0627\u0641\u0632\u0648\u0646\u0647 \u0631\u0627 \u0628\u0647 \u06a9\u0631\u0648\u0645 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/create-a-keyword-generator-chrome-extension-1gfh\/#%DA%A9%D8%AA%D8%A7%D8%A8%D8%AE%D8%A7%D9%86%D9%87_UI_%D9%88_%D9%88%D8%A7%D8%A8%D8%B3%D8%AA%DA%AF%DB%8C_%D9%87%D8%A7%DB%8C_%D8%AF%DB%8C%DA%AF%D8%B1_%D8%B1%D8%A7_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\" >\u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 UI \u0648 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/create-a-keyword-generator-chrome-extension-1gfh\/#%D8%A7%D8%AF%D8%BA%D8%A7%D9%85_OpenAI\" >\u0627\u062f\u063a\u0627\u0645 OpenAI<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/create-a-keyword-generator-chrome-extension-1gfh\/#%DA%A9%D9%84%D9%85%D9%87_%DA%A9%D9%84%DB%8C%D8%AF%DB%8C_%D8%B1%D8%A7_%D8%AF%D8%B1_%DA%A9%D9%84%DB%8C%D9%BE_%D8%A8%D9%88%D8%B1%D8%AF_%DA%A9%D9%BE%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF\" >\u06a9\u0644\u0645\u0647 \u06a9\u0644\u06cc\u062f\u06cc \u0631\u0627 \u062f\u0631 \u06a9\u0644\u06cc\u067e \u0628\u0648\u0631\u062f \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nabfollower.com\/blog\/create-a-keyword-generator-chrome-extension-1gfh\/#%D9%86%D9%88%DB%8C%D8%B3%D9%86%D8%AF%D9%87\" >\u0646\u0648\u06cc\u0633\u0646\u062f\u0647<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B9%D8%B1%D9%81%DB%8C\"><\/span>\n<p>  \u0645\u0639\u0631\u0641\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0641\u0632\u0648\u0646\u0647 \u0647\u0627\u06cc \u0645\u0631\u0648\u0631\u06af\u0631 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0647\u0627\u06cc \u0627\u062e\u06cc\u0631 \u0628\u0647 \u0637\u0648\u0631 \u0641\u0632\u0627\u06cc\u0646\u062f\u0647 \u0627\u06cc \u0645\u062d\u0628\u0648\u0628 \u0634\u062f\u0647 \u0627\u0646\u062f.  \u0622\u0646\u0647\u0627 \u062f\u06cc\u06af\u0631 \u0641\u0642\u0637 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9 \u0633\u0627\u062f\u0647 \u0646\u06cc\u0633\u062a\u0646\u062f\u060c \u0628\u0644\u06a9\u0647 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0633\u0648\u062f\u0622\u0648\u0631 \u0648 \u0645\u0646\u0627\u0633\u0628\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0647\u0631 \u0631\u0648\u0632 \u062a\u0648\u0633\u0637 \u0635\u062f\u0647\u0627 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u0628\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0627\u0646\u062f\u0627\u0632\u0647 \u0648 \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc \u0627\u06cc\u0646 \u0627\u0641\u0632\u0648\u0646\u0647\u200c\u0647\u0627\u060c \u0633\u0627\u062e\u062a \u0622\u0646\u0647\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc \u0645\u0641\u06cc\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u0647\u0645 \u0645\u06cc\u200c\u0634\u0648\u062f.  \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u060c \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0641\u0632\u0648\u0646\u0647\u200c\u0647\u0627\u06cc \u062c\u0630\u0627\u0628\u200c\u062a\u0631 \u0648 \u062c\u0630\u0627\u0628\u200c\u062a\u0631\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u0646\u062f \u06a9\u0647 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0647\u062a\u0631\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u062f.  \u0628\u0627 \u0627\u0628\u0632\u0627\u0631\u0647\u0627 \u0648 \u062a\u06a9\u0646\u06cc\u06a9 \u0647\u0627\u06cc \u0645\u0646\u0627\u0633\u0628\u060c \u0627\u0641\u0632\u0648\u0646\u0647 \u0647\u0627\u06cc \u0645\u0631\u0648\u0631\u06af\u0631 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0647 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f\u06cc \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062f \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0647\u0631 \u0631\u0648\u0632 \u0628\u0647 \u0622\u0646\u0647\u0627 \u0627\u0639\u062a\u0645\u0627\u062f \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0642\u0635\u062f \u062f\u0627\u0631\u0645 \u0628\u0647 \u0634\u0645\u0627 \u06cc\u0627\u062f \u0628\u062f\u0647\u0645 \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 \u0627\u0641\u0632\u0648\u0646\u0647 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u06a9\u0627\u0645\u0644 \u0648 \u0628\u0633\u06cc\u0627\u0631 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u06af\u0648\u06af\u0644 \u06a9\u0631\u0648\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.  \u0628\u0647 \u0647\u0631 \u062d\u0627\u0644\u060c \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u0632 CRXJS \u06a9\u0647 \u06cc\u06a9 \u067e\u0644\u0627\u06af\u06cc\u0646 vite \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u0639\u0631\u0648\u0641 \u062a\u0631\u06cc\u0646 \u0648 \u067e\u0631\u06a9\u0627\u0631\u0628\u0631\u062f\u062a\u0631\u06cc\u0646 ReactJs \u0627\u0633\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0627\u06cc\u0646\u0645 \u06cc\u0647 \u0646\u06af\u0627\u0647 \u06a9\u0648\u062a\u0627\u0647 \ud83d\udc40<\/p>\n<ul>\n<li>\u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc<br \/>\n\n<\/li>\n<li>\u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0645\u062f\u0627\u0644<br \/>\n<img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/04\/1682850319_376_\u06cc\u06a9-\u0627\u0641\u0632\u0648\u0646\u0647-Chrome-Generator-\u0627\u06cc\u062c\u0627\u062f-\u06a9\u0646\u06cc\u062f.png\" alt=\"@devlopersabbir \u067e\u0633\u0648\u0646\u062f screen2\" loading=\"lazy\" width=\"517\" height=\"550\" title=\"\">\n<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D9%81%D9%86_%D8%A2%D9%88%D8%B1%DB%8C\"><\/span>\n<p>  \u0641\u0646 \u0622\u0648\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u062f\u0631 \u0645\u0648\u0631\u062f \u0641\u0646\u0627\u0648\u0631\u06cc \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0635\u062d\u0628\u062a \u06a9\u0646\u06cc\u0645.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D8%B1%DB%8C%D8%B9\"><\/span>\n<p>  \u0633\u0631\u06cc\u0639<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Vite \u06cc\u06a9 \u0627\u0628\u0632\u0627\u0631 \u0633\u0627\u062e\u062a \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648\u0628 \u0645\u062f\u0631\u0646 \u0627\u0633\u062a.  \u0627\u06cc\u0646 \u0628\u0647 \u06af\u0648\u0646\u0647 \u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0633\u0631\u06cc\u0639 \u0648 \u06a9\u0627\u0631\u0622\u0645\u062f \u0628\u0627\u0634\u062f \u0648 \u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u0647 \u0633\u0631\u0639\u062a \u0646\u0645\u0648\u0646\u0647 \u0627\u0648\u0644\u06cc\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0633\u0627\u0632\u0646\u062f.  Vite \u0627\u0632 \u0627\u0646\u0648\u0627\u0639 \u0641\u0646 \u0622\u0648\u0631\u06cc \u0647\u0627\u06cc \u0648\u0628 \u0645\u062f\u0631\u0646\u060c \u0627\u0632 \u062c\u0645\u0644\u0647 \u0645\u0627\u0698\u0648\u0644 \u0647\u0627\u06cc ES\u060c TypeScript \u0648 \u067e\u06cc\u0634 \u067e\u0631\u062f\u0627\u0632\u0646\u062f\u0647 \u0647\u0627\u06cc CSS \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f.  \u0647\u0645\u0686\u0646\u06cc\u0646 \u0634\u0627\u0645\u0644 \u06cc\u06a9 \u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0639\u0647 \u062f\u0627\u062e\u0644\u06cc \u0628\u0627 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646\u06cc \u0645\u0627\u0698\u0648\u0644 \u062f\u0627\u063a \u0627\u0633\u062a \u06a9\u0647 \u062a\u0648\u0633\u0639\u0647 \u0648 \u0622\u0632\u0645\u0627\u06cc\u0634 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627 \u0631\u0627 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0622\u0633\u0627\u0646 \u0645\u06cc \u06a9\u0646\u062f.  Vite \u06cc\u06a9 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u062d\u0628\u0648\u0628 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc Vue.js \u0627\u0633\u062a\u060c \u0627\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0627\u0632 \u0622\u0646 \u0628\u0627 \u0686\u0627\u0631\u0686\u0648\u0628\u200c\u0647\u0627 \u0648 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0646\u06cc\u0632 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f.  \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0644\u06cc\u060c Vite \u06cc\u06a9 \u0627\u0628\u0632\u0627\u0631 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0648 \u0627\u0646\u0639\u0637\u0627\u0641\u200c\u067e\u0630\u06cc\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0633\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0641\u0631\u0622\u06cc\u0646\u062f \u062a\u0648\u0633\u0639\u0647 \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648\u0628 \u0645\u062f\u0631\u0646 \u06a9\u0645\u06a9 \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%88%D8%A7%DA%A9%D9%86%D8%B4_%D9%86%D8%B4%D8%A7%D9%86_%D8%AF%D9%87%DB%8C%D8%AF_%D9%BE%DB%8C%D8%B4_%D8%A8%DB%8C%D9%86%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u062f |  \u067e\u06cc\u0634 \u0628\u06cc\u0646\u06cc \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>ReactJS \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u0633\u062a.  \u0627\u0632 \u06cc\u06a9 DOM \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0645\u0624\u0644\u0641\u0647 \u0648 \u06cc\u06a9 DOM \u0645\u062c\u0627\u0632\u06cc \u0628\u0631\u0627\u06cc \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0645\u0624\u062b\u0631 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f.  ReactJS \u0633\u0631\u06cc\u0639\u060c \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631 \u0648 \u0628\u0647 \u0637\u0648\u0631 \u06af\u0633\u062a\u0631\u062f\u0647 \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u0645\u062f\u0631\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p><strong>\u06cc\u0627<\/strong><\/p>\n<p>\u062f\u0631 \u0635\u0648\u0631\u062a \u062a\u0645\u0627\u06cc\u0644 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 Preact \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.  PreactJS \u06cc\u06a9 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0633\u0628\u06a9 \u0648\u0632\u0646 \u0628\u0631\u0627\u06cc ReactJS \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0627\u06cc\u06cc \u0648 \u0633\u0627\u0632\u06af\u0627\u0631\u06cc \u0628\u0627\u0644\u0627 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a.  \u0627\u063a\u0644\u0628 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f \u0622\u0646\u0647\u0627 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0647\u0645 \u0627\u0633\u062a \u0648 \u0631\u062f\u067e\u0627\u06cc \u06a9\u0648\u0686\u06a9\u06cc \u062f\u0627\u0631\u062f.<\/p>\n<p>\u0641\u06a9\u0631 \u0645\u06cc \u06a9\u0646\u0645 \u0628\u0627\u06cc\u062f \u0628\u062f\u0627\u0646\u06cc\u062f CRXJS \u0686\u06cc\u0633\u062a.  \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0627\u06cc\u0646 \u0633\u0648\u0627\u0644 \u0648 \u067e\u0627\u0633\u062e \u0645\u0646 \u0628\u0631\u0627\u06cc \u0634\u0645\u0627\u0633\u062a\ud83d\ude42<\/p>\n<h2><span class=\"ez-toc-section\" id=\"CRXJS_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\"><\/span>\n<p>  CRXJS \u0686\u06cc\u0633\u062a\u061f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0641\u0632\u0648\u0646\u0647 CRXJS Vite \u0627\u0628\u0632\u0627\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646\u06cc Chrome \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0641\u0646\u0627\u0648\u0631\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u0645\u062f\u0631\u0646 \u0628\u0633\u0627\u0632\u06cc\u062f.<\/p>\n<p>\u0628\u0633\u06cc\u0627\u0631 \u062e\u0648\u0628 \u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u0628\u067e\u0631\u06cc\u0645 \ud83d\ude80<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%DA%A9%D8%AF\"><\/span>\n<p>  \u06a9\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u067e\u0631\u0648\u0698\u0647 CRXJS \u0645\u0627 \u0641\u0642\u0637 \u0628\u0627\u06cc\u062f \u0627\u06cc\u0646 \u06a9\u062f \u0631\u0627 \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u062e\u0648\u062f \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u0645.  \u06cc\u06a9 \u0686\u06cc\u0632 \u062e\u0646\u062f\u0647 \u062f\u0627\u0631 \u0648\u062c\u0648\u062f \u062f\u0627\u0634\u062a \u06a9\u0647 @jacksteamdev \u067e\u06cc\u0634 \u0628\u06cc\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 CRXJS \u0641\u0642\u0637 60 \u062b\u0627\u0646\u06cc\u0647 \u0637\u0648\u0644 \u0645\u06cc \u06a9\u0634\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight console\"><code><span class=\"go\">npm init vite@latest\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u062a\u0627\u06cc\u067e \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u06af\u0648 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f \u0648 React \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n<blockquote>\n<p>\u0648\u0642\u062a\u06cc init \u062a\u0645\u0627\u0645 \u0634\u062f\u060c \u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0627\u0641\u0632\u0648\u0646\u0647 \u0646\u0635\u0628 \u0634\u0648\u062f.<\/p>\n<\/blockquote>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight console\"><code><span class=\"go\">yarn add @crxjs\/vite-plugin@latest -D\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0627\u0644\u0627\u062e\u0631\u0647 \u0645\u0627 \u0622\u0645\u0627\u062f\u0647 \u062f\u06cc\u062f\u0646 \u062e\u0631\u0648\u062c\u06cc \u062e\u0648\u062f \u0647\u0633\u062a\u06cc\u0645\ud83d\ude42.  \u0641\u0642\u0637 1 \u0642\u062f\u0645 \u0628\u0627\u0642\u06cc \u0645\u0627\u0646\u062f\u0647 \u0627\u0633\u062a<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A8%D8%A7%DB%8C%D8%AF_%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_Vite_%D8%B1%D8%A7_%D8%A8%D9%87_%D8%B1%D9%88%D8%B2_%DA%A9%D9%86%DB%8C%D9%85\"><\/span>\n<p>  \u0628\u0627\u06cc\u062f \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc Vite \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u0645<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u06a9\u0627\u0641\u06cc \u0627\u0633\u062a \u0628\u0647 \u0641\u0647\u0631\u0633\u062a \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0628\u0631\u0648\u06cc\u062f \u0648 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f <code>vite.config.ts<\/code>.  \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0633\u067e\u0633 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u067e\u0627\u06a9 \u06a9\u0646\u06cc\u062f \u0648 \u0627\u06cc\u0646 \u06a9\u062f \u0631\u0627 \u0647\u0645\u0627\u0646\u062c\u0627 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">defineConfig<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">vite<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">react<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@vitejs\/plugin-react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">crx<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@crxjs\/vite-plugin<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">manifest<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/manifest.json<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">defineConfig<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">plugins<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">react<\/span><span class=\"p\">(),<\/span> <span class=\"nx\">crx<\/span><span class=\"p\">({<\/span> <span class=\"nx\">manifest<\/span> <span class=\"p\">})],<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062d\u0627\u0644\u0627 \u0627\u06af\u0631 \u0627\u0634\u062a\u0628\u0627\u0647 \u0646\u06a9\u0646\u0645 \u0634\u0645\u0627 \u062f\u0631 \u062e\u0637 4 \u0628\u0627 \u067e\u06cc\u063a\u0627\u0645 \u062e\u0637\u0627 \u0645\u0648\u0627\u062c\u0647 \u0647\u0633\u062a\u06cc\u062f.\ud83d\ude05<br \/>\u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644 \u0628\u0631\u0627\u06cc \u0631\u0641\u0639 \u0627\u06cc\u0646 \u0645\u0634\u06a9\u0644 \u0641\u0642\u0637 \u062a\u0645\u0627\u0633 \u0628\u06af\u06cc\u0631\u06cc\u062f <code>manifest.json<\/code> \u0627\u0632 \u062c\u0627\u0646\u0628 <code>tsconfig.node.json<\/code>.<br \/>\u0628\u0627\u0632 \u06a9\u0646 <code>tsconfig.node.json<\/code> \u0627\u0632 \u06a9\u0627\u0631\u06af\u0631\u062f\u0627\u0646 \u067e\u0631\u0648\u0698\u0647  \u062d\u0627\u0644\u0627 \u0628\u0627\u06cc\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>manifest.json<\/code> \u0641\u0627\u06cc\u0644 \u062f\u0631 \u0622\u0631\u0627\u06cc\u0647 \u0634\u0627\u0645\u0644.  \u0628\u0647 \u0647\u0631 \u062d\u0627\u0644 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u062b\u0627\u0644 \u06a9\u062f \u0627\u0633\u062a.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight json\"><code><span class=\"p\">{<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"compilerOptions\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"composite\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"kc\">true<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"skipLibCheck\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"kc\">true<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"module\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"ESNext\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"moduleResolution\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"bundler\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"allowSyntheticDefaultImports\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"kc\">true<\/span><span class=\"w\">\n  <\/span><span class=\"p\">},<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"include\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">[<\/span><span class=\"s2\">\"vite.config.ts\"<\/span><span class=\"p\">,<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"manifest.json\"<\/span><span class=\"p\">]<\/span><span class=\"w\">\n<\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062d\u0627\u0644\u0627 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0628\u0647 \u0646\u0627\u0645 \u0628\u0633\u0627\u0632\u06cc\u062f <code>manifest.json<\/code> \u0628\u0627 \u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight console\"><code><span class=\"go\">touch manifest.json\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u067e\u0633 \u0627\u0632 \u0627\u06cc\u062c\u0627\u062f <code>manifest.json<\/code> \u0633\u067e\u0633 \u0627\u06cc\u0646 \u06a9\u062f \u0631\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644 manifest.json \u062c\u062f\u06cc\u062f \u062e\u0648\u062f \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight json\"><code><span class=\"p\">{<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"name\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"Keyword Maker\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"description\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"A powerfull keyword maker google chrome extension. Give a paragraph it's make keyword for you.\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"version\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"0.0.1\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"manifest_version\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"mi\">3<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"action\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"default_popup\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"index.html\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"default_title\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"Keyword Maker\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"default_icon\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\">\n      <\/span><span class=\"nl\">\"16\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"icon.png\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n      <\/span><span class=\"nl\">\"24\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"icon.png\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n      <\/span><span class=\"nl\">\"32\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"icon.png\"<\/span><span class=\"w\">\n    <\/span><span class=\"p\">}<\/span><span class=\"w\">\n  <\/span><span class=\"p\">},<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"icons\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"128\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"icon.png\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"16\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"icon.png\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"256\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"icon.png\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"48\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"icon.png\"<\/span><span class=\"w\">\n  <\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u06cc \u0628\u06cc\u0646\u06cc\u062f \u0645\u0646 \u0627\u0632 \u0646\u0645\u0627\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0645.  \u0627\u0645\u0627 \u0645\u0627 \u0647\u0646\u0648\u0632 \u0647\u06cc\u0686 \u0646\u0645\u0627\u062f\u06cc \u0646\u062f\u0627\u0631\u06cc\u0645.  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 \u0646\u0645\u0627\u062f \u0631\u0627 \u0627\u0632 \u0647\u0631 \u062c\u0627\u06cc\u06cc \u062f\u0627\u0646\u0644\u0648\u062f \u06a9\u0646\u06cc\u062f \u0648 \u062f\u0631 \u062e\u0648\u062f \u062c\u0627\u06cc\u06af\u0630\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f <code>\/public<\/code> \u067e\u0648\u0634\u0647<\/p>\n<p>\u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u0645 \u0627\u06a9\u0646\u0648\u0646 \u0641\u0647\u0631\u0633\u062a \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627 \u0628\u0647 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u0628\u0627\u0634\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/04\/1682850319_133_\u06cc\u06a9-\u0627\u0641\u0632\u0648\u0646\u0647-Chrome-Generator-\u0627\u06cc\u062c\u0627\u062f-\u06a9\u0646\u06cc\u062f.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"515\" height=\"481\" title=\"\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D8%B1%D9%88%D8%B1_%D8%AA%D9%88%D8%B3%D8%B9%D9%87_%D8%B1%D8%A7_%D8%A7%D8%AC%D8%B1%D8%A7_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0639\u0647 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight console\"><code><span class=\"go\">yarn run dev\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062e\u0648\u062f\u0634\u0647!  CRXJS \u0628\u0642\u06cc\u0647 \u06a9\u0627\u0631\u0647\u0627 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062e\u0648\u0627\u0647\u062f \u062f\u0627\u062f.<\/p>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0622\u0645\u0627\u062f\u0647 \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u06a9\u0631\u0648\u0645 \u0645\u0627 \u0627\u0633\u062a.  \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f.  \u06cc\u0627 \u0627\u06af\u0631 \u0645\u06cc \u062f\u0627\u0646\u06cc\u062f \u0645\u0627\u0646\u06cc\u0641\u0633\u062a \u0631\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u06cc\u062f&#8230;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D9%81%D8%B2%D9%88%D9%86%D9%87_%D8%B1%D8%A7_%D8%A8%D9%87_%DA%A9%D8%B1%D9%88%D9%85_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0627\u0641\u0632\u0648\u0646\u0647 \u0631\u0627 \u0628\u0647 \u06a9\u0631\u0648\u0645 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u067e\u0633 \u0627\u0632 \u062a\u06a9\u0645\u06cc\u0644 \u0633\u0627\u062e\u062a\u060c Chrome \u06cc\u0627 Edge \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0647 chrome:\/\/extensions \u0628\u0631\u0648\u06cc\u062f.  \u062d\u062a\u0645\u0627 \u0633\u0648\u0626\u06cc\u0686 \u062d\u0627\u0644\u062a \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0631\u0627 \u0631\u0648\u0634\u0646 \u06a9\u0646\u06cc\u062f.<br \/>\u062e\u0648\u062f \u0631\u0627 \u0628\u06a9\u0634\u06cc\u062f <code>dist<\/code> \u067e\u0648\u0634\u0647 \u0631\u0627 \u062f\u0631 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0627\u0641\u0632\u0648\u0646\u0647 \u0647\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0622\u0646 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f.  \u0646\u0645\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u0634\u0645\u0627 \u062f\u0631 \u0646\u0648\u0627\u0631 \u0628\u0627\u0644\u0627 \u0642\u0631\u0627\u0631 \u062e\u0648\u0627\u0647\u062f \u06af\u0631\u0641\u062a.  \u0646\u0645\u0627\u062f \u0627\u0648\u0644\u06cc\u0646 \u062d\u0631\u0641 \u0646\u0627\u0645 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.<\/p>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0641\u0642\u0637 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f <code>width<\/code>;<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"c\">\/* App.css *\/<\/span>\n<span class=\"nc\">.App<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">text-align<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">min-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">350px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062d\u0627\u0644\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u0646 \u062e\u0631\u0648\u062c\u06cc \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f.  \ud83d\ude80<br \/><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/04\/1682850319_344_\u06cc\u06a9-\u0627\u0641\u0632\u0648\u0646\u0647-Chrome-Generator-\u0627\u06cc\u062c\u0627\u062f-\u06a9\u0646\u06cc\u062f.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"404\" height=\"404\" title=\"\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%DA%A9%D8%AA%D8%A7%D8%A8%D8%AE%D8%A7%D9%86%D9%87_UI_%D9%88_%D9%88%D8%A7%D8%A8%D8%B3%D8%AA%DA%AF%DB%8C_%D9%87%D8%A7%DB%8C_%D8%AF%DB%8C%DA%AF%D8%B1_%D8%B1%D8%A7_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 UI \u0648 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0647\u062f\u0641 UI \u0645\u0646 \u0627\u0632 Chakra-UI \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u0645 \u06a9\u0631\u062f \u06a9\u0647 \u0628\u0633\u06cc\u0627\u0631 \u0645\u062d\u0628\u0648\u0628 \u0627\u0633\u062a <code>component based UI<\/code> \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647  \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0632 \u06cc\u06a9 \u0646\u0627\u0646 \u062a\u0633\u062a \u0648\u0627\u06a9\u0646\u0634 \u062f\u0627\u063a \u0628\u0631\u0627\u06cc \u062f\u0631\u0633\u062a \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0646\u0627\u0646 \u062a\u0633\u062a \u0639\u0627\u0644\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight console\"><code><span class=\"go\">yarn add @chakra-ui\/react @emotion\/react @emotion\/styled framer-motion react-hot-toast axios &amp;&amp; yarn dev\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062a\u0627 \u06a9\u0646\u0648\u0646\u060c \u0645\u0627 \u0622\u0645\u0627\u062f\u0647 \u0627\u06cc\u062c\u0627\u062f \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f \u0639\u0627\u0644\u06cc \u0647\u0633\u062a\u06cc\u0645.<br \/>\u0628\u0647 \u0647\u0631 \u062d\u0627\u0644 \u0628\u0627\u06cc\u062f \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u0645 <code>ChakraProvider<\/code> \u0627\u0632 <code>Chakra-UI<\/code> \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0627\u06cc\u062f Toaster \u0631\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u0645 <code>main.tsx<\/code> \u0641\u0627\u06cc\u0644.  \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u06a9\u0627\u0641\u06cc \u0627\u0633\u062a \u0628\u0647 src -> main.tsx \u0628\u0631\u0648\u06cc\u062f<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">ReactDOM<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-dom\/client<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">App<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/App.tsx<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"c1\">\/\/ import \".\/index.css\";<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ChakraProvider<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@chakra-ui\/react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Toaster<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-hot-toast<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"nx\">ReactDOM<\/span><span class=\"p\">.<\/span><span class=\"nx\">createRoot<\/span><span class=\"p\">(<\/span><span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">root<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">HTMLElement<\/span><span class=\"p\">).<\/span><span class=\"nx\">render<\/span><span class=\"p\">(<\/span>\n  <span class=\"p\">&lt;<\/span><span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nc\">StrictMode<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">&lt;<\/span><span class=\"nc\">ChakraProvider<\/span><span class=\"p\">&gt;<\/span> \/\/ chakra provider setup\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">Toaster<\/span> <span class=\"na\">position<\/span><span class=\"p\">=<\/span><span class=\"s\">\"bottom-center\"<\/span> <span class=\"na\">reverseOrder<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"kc\">false<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span> \/\/ toaster provider setup\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">App<\/span> <span class=\"p\">\/&gt;<\/span>\n    <span class=\"p\">&lt;\/<\/span><span class=\"nc\">ChakraProvider<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">&lt;\/<\/span><span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nc\">StrictMode<\/span><span class=\"p\">&gt;<\/span>\n<span class=\"p\">);<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645<\/strong><br \/>\u0627\u06cc\u0646 \u06a9\u062f \u0627\u0633\u062a.  \u0628\u0631\u0627\u06cc App.tsx<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">Button<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">Center<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">Container<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">HStack<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">Heading<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">Image<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">Text<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">Textarea<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">VStack<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@chakra-ui\/react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">App<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;<\/span><span class=\"nc\">Container<\/span> <span class=\"na\">w<\/span><span class=\"p\">=<\/span><span class=\"s\">\"400px\"<\/span> <span class=\"na\">h<\/span><span class=\"p\">=<\/span><span class=\"s\">\"auto\"<\/span> <span class=\"na\">mx<\/span><span class=\"p\">=<\/span><span class=\"s\">\"auto\"<\/span> <span class=\"na\">p<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"mi\">4<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">Center<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Image<\/span> <span class=\"na\">w<\/span><span class=\"p\">=<\/span><span class=\"s\">\"16\"<\/span> <span class=\"na\">src<\/span><span class=\"p\">=<\/span><span class=\"s\">\"icon.png\"<\/span> <span class=\"na\">alt<\/span><span class=\"p\">=<\/span><span class=\"s\">\"logo\"<\/span> <span class=\"p\">\/&gt;<\/span>\n      <span class=\"p\">&lt;\/<\/span><span class=\"nc\">Center<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">VStack<\/span> <span class=\"na\">spacing<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"mi\">0<\/span><span class=\"si\">}<\/span> <span class=\"na\">my<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"mi\">2<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Heading<\/span> <span class=\"na\">as<\/span><span class=\"p\">=<\/span><span class=\"s\">\"h1\"<\/span> <span class=\"na\">fontSize<\/span><span class=\"p\">=<\/span><span class=\"s\">\"xl\"<\/span> <span class=\"na\">fontWeight<\/span><span class=\"p\">=<\/span><span class=\"s\">\"bold\"<\/span><span class=\"p\">&gt;<\/span>\n          Keyword Macker AI\n        <span class=\"p\">&lt;\/<\/span><span class=\"nc\">Heading<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Text<\/span>\n          <span class=\"na\">fontSize<\/span><span class=\"p\">=<\/span><span class=\"s\">\"sm\"<\/span>\n          <span class=\"na\">color<\/span><span class=\"p\">=<\/span><span class=\"s\">\"gray.600\"<\/span>\n          <span class=\"na\">fontWeight<\/span><span class=\"p\">=<\/span><span class=\"s\">\"400\"<\/span>\n          <span class=\"na\">textAlign<\/span><span class=\"p\">=<\/span><span class=\"s\">\"center\"<\/span>\n        <span class=\"p\">&gt;<\/span>\n          Past your text in the bellow section and it will generate<span class=\"si\">{<\/span><span class=\"dl\">\"<\/span><span class=\"s2\"> <\/span><span class=\"dl\">\"<\/span><span class=\"si\">}<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">strong<\/span><span class=\"p\">&gt;<\/span>Keyword<span class=\"p\">&lt;\/<\/span><span class=\"nt\">strong<\/span><span class=\"p\">&gt;<\/span> for you. \ud83d\ude42\n        <span class=\"p\">&lt;\/<\/span><span class=\"nc\">Text<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;\/<\/span><span class=\"nc\">VStack<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">VStack<\/span> <span class=\"na\">my<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"mi\">4<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Textarea<\/span> <span class=\"na\">w<\/span><span class=\"p\">=<\/span><span class=\"s\">\"full\"<\/span> <span class=\"na\">h<\/span><span class=\"p\">=<\/span><span class=\"s\">\"auto\"<\/span> <span class=\"na\">placeholder<\/span><span class=\"p\">=<\/span><span class=\"s\">\"Past your text here...\"<\/span> <span class=\"p\">\/&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Button<\/span> <span class=\"na\">colorScheme<\/span><span class=\"p\">=<\/span><span class=\"s\">\"twitter\"<\/span><span class=\"p\">&gt;<\/span>Generate Keyworld<span class=\"p\">&lt;\/<\/span><span class=\"nc\">Button<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;\/<\/span><span class=\"nc\">VStack<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">HStack<\/span>\n        <span class=\"na\">w<\/span><span class=\"p\">=<\/span><span class=\"s\">\"full\"<\/span>\n        <span class=\"na\">textAlign<\/span><span class=\"p\">=<\/span><span class=\"s\">\"center\"<\/span>\n        <span class=\"na\">fontWeight<\/span><span class=\"p\">=<\/span><span class=\"s\">\"semibold\"<\/span>\n        <span class=\"na\">mt<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"mi\">3<\/span><span class=\"si\">}<\/span>\n        <span class=\"na\">justify<\/span><span class=\"p\">=<\/span><span class=\"s\">\"center\"<\/span>\n      <span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Text<\/span><span class=\"p\">&gt;<\/span>Created by <span class=\"p\">&lt;\/<\/span><span class=\"nc\">Text<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Text<\/span>\n          <span class=\"na\">cursor<\/span><span class=\"p\">=<\/span><span class=\"s\">\"pointer\"<\/span>\n          <span class=\"na\">color<\/span><span class=\"p\">=<\/span><span class=\"s\">\"green\"<\/span>\n          <span class=\"na\">textDecor<\/span><span class=\"p\">=<\/span><span class=\"s\">\"underline\"<\/span>\n          <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span>\n            <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">open<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">https:\/\/www.showwcase.com\/devlopersabbir<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n          <span class=\"si\">}<\/span>\n        <span class=\"p\">&gt;<\/span>\n          @devlopersabbir\n        <span class=\"p\">&lt;\/<\/span><span class=\"nc\">Text<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;\/<\/span><span class=\"nc\">HStack<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">&lt;\/<\/span><span class=\"nc\">Container<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">App<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u062a\u0639\u062f\u0627\u062f\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>state<\/code> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0643\u0631\u062f\u0646 <code>useState<\/code> \u0648\u0627\u06a9\u0646\u0634 \u0642\u0644\u0627\u0628.  \u0645\u0646 \u0642\u0635\u062f \u062f\u0627\u0631\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u0645 <code>text<\/code> \u062d\u0627\u0644\u062a \u0628\u0631\u0627\u06cc \u0645\u062a\u0646 \u0627\u0639\u0644\u0627\u0646 \u0641\u0631\u0648\u0634\u06af\u0627\u0647.  \u0648 \u062f\u0648\u0645\u06cc \u0627\u0633\u062a <code>keyword<\/code> \u062d\u0627\u0644\u062a\u06cc \u06a9\u0647 \u0628\u0647 \u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u067e\u0627\u0633\u062e \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06a9\u0644\u0645\u0647 \u06a9\u0644\u06cc\u062f\u06cc \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u0645.  3 \u0627\u0633\u062a <code>loading<\/code> \u062f\u0648\u0644\u062a \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0646 <code>spinner<\/code> \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc <code>HTTP<\/code> \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062f\u0631 \u0627\u0646\u062a\u0638\u0627\u0631 \u0627\u0633\u062a&#8230; \u0648 \u0622\u062e\u0631\u06cc\u0646 \u0645\u0648\u0631\u062f \u0627\u0633\u062a <code>useDisclosure<\/code> \u0642\u0644\u0627\u0628 \u0627\u0632 <code>@chakra-ui\/react<\/code> \u0632\u06cc\u0631\u0627 \u0645\u0627 \u0628\u0639\u062f\u0627\u064b \u06cc\u06a9 \u0645\u0648\u062f\u0627\u0644 \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<p>\u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0627\u06cc\u062f \u0645\u062a\u0646\u06cc \u0631\u0627 \u0627\u0632 \u0622\u0646 \u0628\u06af\u06cc\u0631\u06cc\u0645 <code>onChange<\/code> \u0631\u0648\u0634.  \u067e\u0633 \u0627\u0632 \u0622\u0646\u060c \u0627\u06a9\u0646\u0648\u0646 \u06cc\u06a9 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u0646\u062f\u0647 \u06a9\u0644\u06cc\u06a9 \u0631\u0627 \u062f\u0631 \u062f\u06a9\u0645\u0647 \u062a\u0648\u0644\u06cc\u062f \u062e\u0648\u062f \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f.<\/p>\n<p><strong>\u062d\u0627\u0644\u062a<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code>  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">text<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setText<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"kr\">string<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">keyword<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setKeyword<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"kr\">string<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">loading<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setLoading<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">boolean<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">isOpen<\/span><span class=\"p\">,<\/span> <span class=\"nx\">onOpen<\/span><span class=\"p\">,<\/span> <span class=\"nx\">onClose<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useDisclosure<\/span><span class=\"p\">();<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0639\u0645\u0644\u06a9\u0631\u062f \u0647\u0646\u062f\u0644\u0631<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">generate<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u06a9\u062f \u0645\u0627 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"p\">&lt;<\/span><span class=\"nc\">Textarea<\/span>\n          <span class=\"na\">onChange<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">(<\/span><span class=\"nx\">event<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">setText<\/span><span class=\"p\">(<\/span><span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span>\n          <span class=\"na\">w<\/span><span class=\"p\">=<\/span><span class=\"s\">\"full\"<\/span>\n          <span class=\"na\">value<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">text<\/span><span class=\"si\">}<\/span>\n          <span class=\"na\">h<\/span><span class=\"p\">=<\/span><span class=\"s\">\"auto\"<\/span>\n          <span class=\"na\">placeholder<\/span><span class=\"p\">=<\/span><span class=\"s\">\"Past your text here...\"<\/span>\n        <span class=\"p\">\/&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Button<\/span> <span class=\"na\">disabled<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">loading<\/span><span class=\"si\">}<\/span> <span class=\"na\">colorScheme<\/span><span class=\"p\">=<\/span><span class=\"s\">\"twitter\"<\/span> <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">generate<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"si\">{<\/span><span class=\"nx\">loading<\/span> <span class=\"p\">?<\/span> <span class=\"p\">&lt;<\/span><span class=\"nc\">Spinner<\/span> <span class=\"p\">\/&gt;<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Generate Keyword<\/span><span class=\"dl\">\"<\/span><span class=\"si\">}<\/span>\n        <span class=\"p\">&lt;\/<\/span><span class=\"nc\">Button<\/span><span class=\"p\">&gt;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0639\u0645\u0644\u06a9\u0631\u062f \u0645\u0627 \u0628\u0627\u06cc\u062f \u0646\u0627\u0647\u0645\u06af\u0627\u0645 \u0628\u0627\u0634\u062f \u0632\u06cc\u0631\u0627 \u0645\u0627 \u062e\u0648\u0627\u0647\u06cc\u0645 \u0633\u0627\u062e\u062a <code>HTTP<\/code> \u062f\u0631\u062e\u0648\u0627\u0633\u062a.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%AF%D8%BA%D8%A7%D9%85_OpenAI\"><\/span>\n<p>  \u0627\u062f\u063a\u0627\u0645 OpenAI<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 api_key \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u06a9\u0644\u0645\u0647 \u06a9\u0644\u06cc\u062f\u06cc \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645.  \u0645\u0627 \u0627\u0632 \u067e\u0644\u062a\u0641\u0631\u0645 OpenAI \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.  \u0627\u06af\u0631 \u062d\u0633\u0627\u0628 openAi \u062f\u0627\u0631\u06cc\u062f\u060c \u0627\u0648\u06a9\u06cc \u06a9\u0646\u06cc\u062f \u06cc\u0627 \u0627\u06af\u0631 \u0646\u0647\u060c \u06cc\u06a9 \u062d\u0633\u0627\u0628 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.  \u0648 \u0627\u06a9\u0646\u0648\u0646 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0644\u06cc\u062f api \u0628\u0647 \u0627\u06cc\u0646 \u0622\u062f\u0631\u0633 \u0628\u0631\u0648\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f api_key \u0631\u0648\u06cc \u0645\u0646 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/04\/1682850320_443_\u06cc\u06a9-\u0627\u0641\u0632\u0648\u0646\u0647-Chrome-Generator-\u0627\u06cc\u062c\u0627\u062f-\u06a9\u0646\u06cc\u062f.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"786\" height=\"359\" title=\"\"><br \/>\u06a9\u0644\u06cc\u062f \u0645\u062e\u0641\u06cc \u0631\u0627 \u06a9\u067e\u06cc \u06a9\u0631\u062f\u0647 \u0648 \u062f\u0631 \u0647\u0631 \u062c\u0627\u06cc\u06cc \u062c\u0627\u06cc\u06af\u0630\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f \u0632\u06cc\u0631\u0627 \u062f\u06cc\u06af\u0631 \u0627\u06cc\u0646 \u06a9\u0644\u06cc\u062f \u0631\u0627 \u0646\u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u06cc\u062f.<\/p>\n<p>\u062d\u0627\u0644\u0627 \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u062f\u0631 \u0642\u0633\u0645\u062a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>App.tsx<\/code> \u0641\u0627\u06cc\u0644 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0634\u062f <code>YOUR_API_KEY<\/code>.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">YOUR_API_KEY<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Enter your secret key here...<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062a\u0627 \u0627\u0644\u0627\u0646 \u062e\u06cc\u0644\u06cc \u06a9\u0627\u0631\u0647\u0627 \u0631\u0627 \u062a\u0645\u0627\u0645 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645.  \u062f\u0631 \u0627\u06cc\u0646 \u0632\u0645\u0627\u0646 \u0645\u0627 \u0622\u0645\u0627\u062f\u0647 \u0647\u0633\u062a\u06cc\u0645 \u062a\u0627 \u06cc\u06a9 <code>http<\/code> \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 axios \u0648 \u0645\u0627 <code>api key<\/code>.<\/p>\n<p>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 \u0634\u06cc \u0628\u0633\u0627\u0632\u06cc\u062f <code>data<\/code> \u0645\u062a\u063a\u06cc\u0631 \u0628\u0631\u0627\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0633\u0631\u06cc\u0639<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">datas<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n       <span class=\"na\">model<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">text-davinci-003<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n       <span class=\"na\">prompt<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`Generate keyword from this text. Make the first latter of each word uppercase and separate with commas. The text is here: <\/span><span class=\"p\">${<\/span><span class=\"nx\">text<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">,<\/span>\n       <span class=\"na\">temperature<\/span><span class=\"p\">:<\/span> <span class=\"mf\">0.5<\/span><span class=\"p\">,<\/span>\n       <span class=\"na\">max_tokens<\/span><span class=\"p\">:<\/span> <span class=\"mi\">60<\/span><span class=\"p\">,<\/span>\n       <span class=\"na\">top_p<\/span><span class=\"p\">:<\/span> <span class=\"mf\">1.0<\/span><span class=\"p\">,<\/span>\n       <span class=\"na\">frequency_penalty<\/span><span class=\"p\">:<\/span> <span class=\"mf\">0.8<\/span><span class=\"p\">,<\/span>\n       <span class=\"na\">presence_penalty<\/span><span class=\"p\">:<\/span> <span class=\"mf\">0.0<\/span><span class=\"p\">,<\/span>\n     <span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0647\u062f\u0631 \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u062a\u0648\u06a9\u0646 \u062d\u0627\u0645\u0644 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code> <span class=\"nx\">headers<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n            <span class=\"dl\">\"<\/span><span class=\"s2\">Content-Type<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">application\/json<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n            <span class=\"nx\">Authorization<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`Bearer <\/span><span class=\"p\">${<\/span><span class=\"nx\">YOUR_API_KEY<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">,<\/span>\n          <span class=\"p\">},<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06a9\u0627\u0645\u0644 \u0645\u0627 \u0627\u0633\u062a <code>App.tsx<\/code> \u06a9\u062f<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">Button<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">Center<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">Container<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">HStack<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">Heading<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">Image<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">Spinner<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">Text<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">Textarea<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">VStack<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">useDisclosure<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@chakra-ui\/react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Modals<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/components\/Modals<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">axios<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">axios<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">toast<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-hot-toast<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">App<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">YOUR_API_KEY<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">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<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">text<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setText<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"kr\">string<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">keyword<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setKeyword<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"kr\">string<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">loading<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setLoading<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">boolean<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">isOpen<\/span><span class=\"p\">,<\/span> <span class=\"nx\">onOpen<\/span><span class=\"p\">,<\/span> <span class=\"nx\">onClose<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useDisclosure<\/span><span class=\"p\">();<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">generate<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">setLoading<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"na\">datas<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">model<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">text-davinci-003<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">prompt<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`Generate keyword from this text. Make the first latter of each word uppercase and separate with commas. The text is here: <\/span><span class=\"p\">${<\/span><span class=\"nx\">text<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">temperature<\/span><span class=\"p\">:<\/span> <span class=\"mf\">0.5<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">max_tokens<\/span><span class=\"p\">:<\/span> <span class=\"mi\">60<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">top_p<\/span><span class=\"p\">:<\/span> <span class=\"mf\">1.0<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">frequency_penalty<\/span><span class=\"p\">:<\/span> <span class=\"mf\">0.8<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">presence_penalty<\/span><span class=\"p\">:<\/span> <span class=\"mf\">0.0<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">};<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">data<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">axios<\/span><span class=\"p\">.<\/span><span class=\"nx\">post<\/span><span class=\"p\">(<\/span>\n        <span class=\"dl\">\"<\/span><span class=\"s2\">https:\/\/api.openai.com\/v1\/completions<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">datas<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">{<\/span>\n          <span class=\"na\">headers<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n            <span class=\"dl\">\"<\/span><span class=\"s2\">Content-Type<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">application\/json<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">Authorization<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`Bearer <\/span><span class=\"p\">${<\/span><span class=\"nx\">YOUR_API_KEY<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">,<\/span>\n          <span class=\"p\">},<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">);<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">keyword<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">choices<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">]?.<\/span><span class=\"nx\">text<\/span><span class=\"p\">?.<\/span><span class=\"nx\">trim<\/span><span class=\"p\">();<\/span>\n      <span class=\"nx\">toast<\/span><span class=\"p\">.<\/span><span class=\"nx\">success<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Keyword generated\ud83d\ude0d<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">setText<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">onOpen<\/span><span class=\"p\">();<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">setKeyword<\/span><span class=\"p\">(<\/span><span class=\"nx\">keyword<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">catch<\/span> <span class=\"p\">(<\/span><span class=\"na\">error<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">error<\/span><span class=\"p\">?.<\/span><span class=\"nx\">response<\/span><span class=\"p\">?.<\/span><span class=\"nx\">data<\/span> <span class=\"o\">||<\/span> <span class=\"o\">!<\/span><span class=\"nx\">error<\/span><span class=\"p\">?.<\/span><span class=\"nx\">response<\/span><span class=\"p\">)<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">toast<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Something went wrong!\ud83d\ude12<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n\n      <span class=\"kd\">const<\/span> <span class=\"nx\">mess<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">error<\/span><span class=\"p\">?.<\/span><span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">?.<\/span><span class=\"nx\">message<\/span><span class=\"p\">;<\/span>\n      <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">mess<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span> <span class=\"nx\">toast<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span><span class=\"p\">(<\/span><span class=\"nx\">mess<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">toast<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Fail to generate keyword\ud83d\ude2a<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">finally<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">setLoading<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">};<\/span>\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;<\/span><span class=\"nc\">Container<\/span> <span class=\"na\">w<\/span><span class=\"p\">=<\/span><span class=\"s\">\"400px\"<\/span> <span class=\"na\">h<\/span><span class=\"p\">=<\/span><span class=\"s\">\"auto\"<\/span> <span class=\"na\">mx<\/span><span class=\"p\">=<\/span><span class=\"s\">\"auto\"<\/span> <span class=\"na\">p<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"mi\">4<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">Center<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Image<\/span> <span class=\"na\">w<\/span><span class=\"p\">=<\/span><span class=\"s\">\"16\"<\/span> <span class=\"na\">src<\/span><span class=\"p\">=<\/span><span class=\"s\">\"icon.png\"<\/span> <span class=\"na\">alt<\/span><span class=\"p\">=<\/span><span class=\"s\">\"logo\"<\/span> <span class=\"p\">\/&gt;<\/span>\n      <span class=\"p\">&lt;\/<\/span><span class=\"nc\">Center<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">VStack<\/span> <span class=\"na\">spacing<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"mi\">0<\/span><span class=\"si\">}<\/span> <span class=\"na\">my<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"mi\">2<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Heading<\/span> <span class=\"na\">as<\/span><span class=\"p\">=<\/span><span class=\"s\">\"h1\"<\/span> <span class=\"na\">fontSize<\/span><span class=\"p\">=<\/span><span class=\"s\">\"xl\"<\/span> <span class=\"na\">fontWeight<\/span><span class=\"p\">=<\/span><span class=\"s\">\"bold\"<\/span><span class=\"p\">&gt;<\/span>\n          Keyword Macker AI\n        <span class=\"p\">&lt;\/<\/span><span class=\"nc\">Heading<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Text<\/span>\n          <span class=\"na\">fontSize<\/span><span class=\"p\">=<\/span><span class=\"s\">\"sm\"<\/span>\n          <span class=\"na\">color<\/span><span class=\"p\">=<\/span><span class=\"s\">\"gray.600\"<\/span>\n          <span class=\"na\">fontWeight<\/span><span class=\"p\">=<\/span><span class=\"s\">\"400\"<\/span>\n          <span class=\"na\">textAlign<\/span><span class=\"p\">=<\/span><span class=\"s\">\"center\"<\/span>\n        <span class=\"p\">&gt;<\/span>\n          Past your text in the bellow section and it will generate<span class=\"si\">{<\/span><span class=\"dl\">\"<\/span><span class=\"s2\"> <\/span><span class=\"dl\">\"<\/span><span class=\"si\">}<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">strong<\/span><span class=\"p\">&gt;<\/span>Keyword<span class=\"p\">&lt;\/<\/span><span class=\"nt\">strong<\/span><span class=\"p\">&gt;<\/span> for you. \ud83d\ude42\n        <span class=\"p\">&lt;\/<\/span><span class=\"nc\">Text<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;\/<\/span><span class=\"nc\">VStack<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">VStack<\/span> <span class=\"na\">my<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"mi\">4<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Textarea<\/span>\n          <span class=\"na\">onChange<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">(<\/span><span class=\"nx\">event<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">setText<\/span><span class=\"p\">(<\/span><span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span>\n          <span class=\"na\">w<\/span><span class=\"p\">=<\/span><span class=\"s\">\"full\"<\/span>\n          <span class=\"na\">value<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">text<\/span><span class=\"si\">}<\/span>\n          <span class=\"na\">h<\/span><span class=\"p\">=<\/span><span class=\"s\">\"auto\"<\/span>\n          <span class=\"na\">placeholder<\/span><span class=\"p\">=<\/span><span class=\"s\">\"Past your text here...\"<\/span>\n        <span class=\"p\">\/&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Button<\/span> <span class=\"na\">disabled<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">loading<\/span><span class=\"si\">}<\/span> <span class=\"na\">colorScheme<\/span><span class=\"p\">=<\/span><span class=\"s\">\"twitter\"<\/span> <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">generate<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"si\">{<\/span><span class=\"nx\">loading<\/span> <span class=\"p\">?<\/span> <span class=\"p\">&lt;<\/span><span class=\"nc\">Spinner<\/span> <span class=\"p\">\/&gt;<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Generate Keyworld<\/span><span class=\"dl\">\"<\/span><span class=\"si\">}<\/span>\n        <span class=\"p\">&lt;\/<\/span><span class=\"nc\">Button<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;\/<\/span><span class=\"nc\">VStack<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">HStack<\/span>\n        <span class=\"na\">w<\/span><span class=\"p\">=<\/span><span class=\"s\">\"full\"<\/span>\n        <span class=\"na\">textAlign<\/span><span class=\"p\">=<\/span><span class=\"s\">\"center\"<\/span>\n        <span class=\"na\">fontWeight<\/span><span class=\"p\">=<\/span><span class=\"s\">\"semibold\"<\/span>\n        <span class=\"na\">mt<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"mi\">3<\/span><span class=\"si\">}<\/span>\n        <span class=\"na\">justify<\/span><span class=\"p\">=<\/span><span class=\"s\">\"center\"<\/span>\n      <span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Text<\/span><span class=\"p\">&gt;<\/span>Created by <span class=\"p\">&lt;\/<\/span><span class=\"nc\">Text<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Text<\/span>\n          <span class=\"na\">cursor<\/span><span class=\"p\">=<\/span><span class=\"s\">\"pointer\"<\/span>\n          <span class=\"na\">color<\/span><span class=\"p\">=<\/span><span class=\"s\">\"green\"<\/span>\n          <span class=\"na\">textDecor<\/span><span class=\"p\">=<\/span><span class=\"s\">\"underline\"<\/span>\n          <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span>\n            <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">open<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">https:\/\/www.showwcase.com\/devlopersabbir<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n          <span class=\"si\">}<\/span>\n        <span class=\"p\">&gt;<\/span>\n          @devlopersabbir\n        <span class=\"p\">&lt;\/<\/span><span class=\"nc\">Text<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;\/<\/span><span class=\"nc\">HStack<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">Modals<\/span> <span class=\"na\">data<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">keyword<\/span><span class=\"si\">}<\/span> <span class=\"na\">isOpen<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">isOpen<\/span><span class=\"si\">}<\/span> <span class=\"na\">onClose<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">onClose<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span>\n    <span class=\"p\">&lt;\/<\/span><span class=\"nc\">Container<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">App<\/span><span class=\"p\">;<\/span>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<blockquote>\n<p>\u062a\u0648\u062c\u0647: \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u06cc \u0628\u06cc\u0646\u06cc\u0645 \u06cc\u06a9 <code>Modals<\/code> \u062c\u0632\u0621.  \u0627\u0645\u0627 \u0645\u0627 \u0647\u0646\u0648\u0632 \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0646\u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645.<br \/>\u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u06cc\u06a9 \u067e\u0648\u0634\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062f\u0631 src -> component -> \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 \u0648 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 <code>Modals<\/code>.<\/p>\n<\/blockquote>\n<p>\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06a9\u062f \u062c\u0632\u0621 \u0645\u0639\u06cc\u0646 \u0645\u0627 \u0627\u0633\u062a.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">Button<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">Modal<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">ModalBody<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">ModalCloseButton<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">ModalContent<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">ModalFooter<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">ModalHeader<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">ModalOverlay<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">Text<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@chakra-ui\/react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">toast<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-hot-toast<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">IModals<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">isOpen<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">onClose<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">data<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">Modals<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">isOpen<\/span><span class=\"p\">,<\/span> <span class=\"nx\">onClose<\/span><span class=\"p\">,<\/span> <span class=\"nx\">data<\/span> <span class=\"p\">}:<\/span> <span class=\"nx\">IModals<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;<\/span><span class=\"nc\">Modal<\/span> <span class=\"na\">size<\/span><span class=\"p\">=<\/span><span class=\"s\">\"sm\"<\/span> <span class=\"na\">isOpen<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">isOpen<\/span><span class=\"si\">}<\/span> <span class=\"na\">onClose<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">onClose<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">ModalOverlay<\/span> <span class=\"p\">\/&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">ModalContent<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">ModalHeader<\/span><span class=\"p\">&gt;<\/span>Keyword<span class=\"p\">&lt;\/<\/span><span class=\"nc\">ModalHeader<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">ModalCloseButton<\/span> <span class=\"p\">\/&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">ModalBody<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nc\">Text<\/span> <span class=\"na\">fontSize<\/span><span class=\"p\">=<\/span><span class=\"s\">\"lg\"<\/span> <span class=\"na\">fontWeight<\/span><span class=\"p\">=<\/span><span class=\"s\">\"500\"<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"si\">{<\/span><span class=\"nx\">data<\/span><span class=\"si\">}<\/span>\n          <span class=\"p\">&lt;\/<\/span><span class=\"nc\">Text<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;\/<\/span><span class=\"nc\">ModalBody<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">ModalFooter<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nc\">Button<\/span> <span class=\"na\">colorScheme<\/span><span class=\"p\">=<\/span><span class=\"s\">\"blue\"<\/span> <span class=\"na\">mr<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"mi\">3<\/span><span class=\"si\">}<\/span> <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">onClose<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n            Close\n          <span class=\"p\">&lt;\/<\/span><span class=\"nc\">Button<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nc\">Button<\/span> <span class=\"na\">colorScheme<\/span><span class=\"p\">=<\/span><span class=\"s\">\"green\"<\/span><span class=\"p\">&gt;<\/span>\n            Copy\n          <span class=\"p\">&lt;\/<\/span><span class=\"nc\">Button<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;\/<\/span><span class=\"nc\">ModalFooter<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;\/<\/span><span class=\"nc\">ModalContent<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">&lt;\/<\/span><span class=\"nc\">Modal<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Modals<\/span><span class=\"p\">;<\/span>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u06cc \u0628\u06cc\u0646\u06cc\u0645 \u062f\u0631 <code>Modals<\/code> \u062c\u0632\u0621 \u0645\u0627 3 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 props \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0632 a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>interface<\/code>.  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644 \u0627\u06cc\u0646\u0648 \u062f\u06cc\u062f\u06cc\u061f\u061f  \u0645\u0627 \u062f\u0627\u0631\u06cc\u0645 <code>copy button<\/code>\ud83d\ude0e<br \/>\u0686\u06cc\u06a9\u0627\u0631 \u0645\u06cc\u06a9\u0646\u06cc\u061f\u061f\ud83e\udd23<br \/>\u0645\u062a\u0627\u0633\u0641\u0645 \u0628\u0631\u0627\u06cc \u0633\u0631\u06af\u0631\u0645\u06cc \u0632\u06cc\u0627\u062f  \u0645\u0627 \u06cc\u06a9 \u0639\u0645\u0644\u06a9\u0631\u062f \u0633\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u06a9\u067e\u06cc \u06a9\u0631\u062f\u0646 \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f <code>result keyword<\/code>.  \u0628\u0627\u0634\u0647\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645&#8230;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%DA%A9%D9%84%D9%85%D9%87_%DA%A9%D9%84%DB%8C%D8%AF%DB%8C_%D8%B1%D8%A7_%D8%AF%D8%B1_%DA%A9%D9%84%DB%8C%D9%BE_%D8%A8%D9%88%D8%B1%D8%AF_%DA%A9%D9%BE%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u06a9\u0644\u0645\u0647 \u06a9\u0644\u06cc\u062f\u06cc \u0631\u0627 \u062f\u0631 \u06a9\u0644\u06cc\u067e \u0628\u0648\u0631\u062f \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">handleCopyClick<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">await<\/span> <span class=\"nb\">navigator<\/span><span class=\"p\">.<\/span><span class=\"nx\">clipboard<\/span><span class=\"p\">.<\/span><span class=\"nx\">writeText<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">toast<\/span><span class=\"p\">.<\/span><span class=\"nx\">success<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\ud83d\ude80 Keyword copied\ud83e\udd79<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">catch<\/span> <span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">toast<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Fail to copy the keyword!<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">};<\/span>\n\n<span class=\"c1\">\/\/ add replace copy button line with this line.<\/span>\n<span class=\"p\">&lt;<\/span><span class=\"nc\">Button<\/span> <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">handleCopyClick<\/span><span class=\"si\">}<\/span> <span class=\"na\">colorScheme<\/span><span class=\"p\">=<\/span><span class=\"s\">\"green\"<\/span><span class=\"p\">&gt;<\/span>\n            Copy\n          <span class=\"p\">&lt;\/<\/span><span class=\"nc\">Button<\/span><span class=\"p\">&gt;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062a\u0645\u062f\u06cc\u062f \u0645\u0627 \u062a\u0645\u0648\u0645 \u0634\u062f\ud83d\ude01<br \/>\u0628\u0647 \u0647\u0631 \u062d\u0627\u0644\u060c \u0627\u06af\u0631 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u062f \u0645\u0646\u0628\u0639 \u06a9\u0627\u0645\u0644 \u0631\u0627 \u062f\u0631 \u0644\u06cc\u0646\u06a9 Repo \u0646\u0645\u0627\u06cc\u0647 GitHub \u0645\u0646 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.  \u0647\u0645\u0686\u0646\u06cc\u0646 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0644\u06cc\u0646\u06a9 \u0622\u0645\u0648\u0632\u0634 \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc \u06cc\u0648\u062a\u06cc\u0648\u0628 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f<br \/>.<br \/>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D9%88%DB%8C%D8%B3%D9%86%D8%AF%D9%87\"><\/span>\n<p>  \u0646\u0648\u06cc\u0633\u0646\u062f\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0646\u0627\u0645 \u06a9\u0627\u0645\u0644 \u0635\u0627\u0628\u0631 \u062d\u0633\u06cc\u0646 \u0634\u0648\u0648.  \u0648 \u0646\u0645\u0627\u06cc\u0647 GitHub https:\/\/github.com\/devlopersabbir \u0627\u0633\u062a.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0641\u0642\u0637 \u0628\u0631\u0627\u06cc \u0645\u0646 \u06cc\u06a9 \u0642\u0647\u0648\u0647 \u0628\u062e\u0631<br \/>https:\/\/www.buymeacoffee.com\/devlopersabbir<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0645\u0639\u0631\u0641\u06cc \u0627\u0641\u0632\u0648\u0646\u0647 \u0647\u0627\u06cc \u0645\u0631\u0648\u0631\u06af\u0631 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0647\u0627\u06cc \u0627\u062e\u06cc\u0631 \u0628\u0647 \u0637\u0648\u0631 \u0641\u0632\u0627\u06cc\u0646\u062f\u0647 \u0627\u06cc \u0645\u062d\u0628\u0648\u0628 \u0634\u062f\u0647 \u0627\u0646\u062f. \u0622\u0646\u0647\u0627 \u062f\u06cc\u06af\u0631 \u0641\u0642\u0637 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9 \u0633\u0627\u062f\u0647 \u0646\u06cc\u0633\u062a\u0646\u062f\u060c \u0628\u0644\u06a9\u0647 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0633\u0648\u062f\u0622\u0648\u0631 \u0648 \u0645\u0646\u0627\u0633\u0628\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0647\u0631 \u0631\u0648\u0632 \u062a\u0648\u0633\u0637 \u0635\u062f\u0647\u0627 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0628\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0627\u0646\u062f\u0627\u0632\u0647 \u0648 \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc \u0627\u06cc\u0646 \u0627\u0641\u0632\u0648\u0646\u0647\u200c\u0647\u0627\u060c \u0633\u0627\u062e\u062a \u0622\u0646\u0647\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc \u0645\u0641\u06cc\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u0647\u0645 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":20425,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-20424","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/20424","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=20424"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/20424\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/20425"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=20424"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=20424"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=20424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}