چگونه یک افزونه گوگل کروم بسازیم نونویسان مرجع برنامه نویسی

افزونه گوگل کروم چیست

افزونه گوگل کروم (Google Chrome Extension) یک نرم افزار کوچک است که برای اضافه کردن قابلیت های جدید و بهبود کارایی مرورگر گوگل کروم به کار می‌رود. این افزونه ها به طور معمول به صورت رایگان در وب‌استور گوگل قابل دانلود و نصب هستند.

با نصب افزونه ها، می توانید برخی از ویژگی هایی را به مرورگر خود اضافه کنید که در مرورگر پیش فرض وجود ندارد. برخی از این قابلیت ها شامل مدیریت رمز عبور، مسدود کردن تبلیغات، ترجمه صفحات وب، دانلود ویدیو و … می‌باشد.

افزونه های گوگل کروم با استفاده از زبان های HTML، CSS و جاوا اسکریپت ساخته می‌شوند و با کلیک بر روی آیکون آنها در نوار ابزار مرورگر قابل دسترسی هستند.

در این آموزش چه افزونه ای میسازیم

تصویر بالا افزونه ای است که در مقاله چگونه یک افزونه گوگل کروم بسازیم طراحی میشود که در قسمت بالای آن یک بخش برای جستجو است که میتوانید همانند صفحه اصلی کروم عمل میکند اما این افزونه یک تفاوت دارد که آن را جذاب میکند و آن هم لینک های زیر کادر جستجو است که کار لینک های مفید را انجام میدهد هر سایتی که نیاز دارید میتوانید جایگزین بکنید تا به راحتی با کلیک وارد آن بشوید.

کد html برای طراحی افزونه

				
					<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="Style.css">
    <title>ExtensionNonevisan</title>
    <script src="main.js" defer></script>
</head>
<body>
    <div class="card">
        <form action="https://www.google.com/search">
            <input name="q" type="text" placeholder="دنبال چی میگردی؟">
            <button type="submit"></button>
        </form>
        <div class="links">
            <a href="https://nonevisan.com">
                <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="" data-lazy-src="./Images/Instagram round social media icon free.png"><noscript><img decoding="async" src="./Images/Instagram round social media icon free.png" alt=""></noscript>
                Nonevisan
            </a>
            <a href="https://nonevisan.com">
                <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="" data-lazy-src="./Images/Instagram round social media icon free.png"><noscript><img decoding="async" src="./Images/Instagram round social media icon free.png" alt=""></noscript>
                Nonevisan
            </a>
            <a href="https://nonevisan.com">
                <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="" data-lazy-src="./Images/Instagram round social media icon free.png"><noscript><img decoding="async" src="./Images/Instagram round social media icon free.png" alt=""></noscript>
                Nonevisan
            </a>
            <a href="https://nonevisan.com">
                <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="" data-lazy-src="./Images/Instagram round social media icon free.png"><noscript><img decoding="async" src="./Images/Instagram round social media icon free.png" alt=""></noscript>
                Nonevisan
            </a>
        </div>
    </div>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>

در مرحله اول شما به یک بخش برای جستجو هستید که با Form آن را پیاده سازی کردیم و به سمت گوگل آن را Post میکنیم و در قسمت پایین شبکه های اجتماعی قرار گرفته که یکسان می‌باشد و شما میتوانید آنها را تغییر دهید در انتهای مقاله هم آیکون های مورد نیاز قرار میگیرد تا به راحتی دانلود بکنید.

کد css برای طراحی افزونه

				
					*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background: none;
    border: none;
    outline: none;
    color: white;
    font-family: sans-serif;
    font-weight: 100;
}
body{
    direction: rtl;
    background-image: url('./Images/BackGround.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;
}
.card{
    background-color: rgba(0, 0, 0, 0.5);
    width: 50%;
    height: 40%;
    min-width: 30rem;
    min-height: 10rem;
    padding: 1rem;
    border-radius: 1rem;
}
h1{
    text-align: center;
    margin-top: 10px;
}
form{
    position: relative;
}
input{
    border-bottom: 2px solid;
    border-radius: 8px;
    display: block;
    width: 100%;
    padding: 0.5rem;
    font-size: 1.2rem;
    margin-top: 75px;
}
input::placeholder{
    color: white;
    text-align: center;
}
button{
    width: 1.5rem;
    height: 1.5rem;
    background-image: url('./Images/search-icon.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.links{
    margin-top: 70px;
    display: flex;
    direction: ltr;
    align-items: center;
    justify-content: space-between;
}
a{
    text-decoration: none;
}
a img{
    width: 1.3rem;
}

در این قسمت کمی کار را زیباتر کردیم تا کاربر پسند تر بشود که شما میتوانید طبق نیاز خود تغییراتی ایجاد بکنید برای مثال تصویر پس زمینه را تغییر دهید و یک عکس مربوط به برنامه نویسی قرار دهید که کاملا دست شما در این گزینه باز است.

کد json برای تنظیمات افزونه

				
					{
    "manifest_version" : 3,
    "name" : "Nonevisan",
    "description" : "This Is a Chrome Extension For Search Query",
    "version" : "1.0",
    "chrome_url_overrides" : { "newtab" : "index.html" },
    "permissions" : [ "tabs" ],
    "icons" : { "128" : "./Images/nonevisan.png" }
}

این کد برای تنظیمات افزونه است که لازم است در یک فایل json نوشته شود؛ در بخش name نام افزونه را وارد میکنید و در قسمت description توضیحاتی را برای افزونه خود ارائه میدهید و در ادامه برای chrome_url آدرس و نام صفحه اصلی خود را وارد میکنید تا با باز شدن صفحه جدید از سمت کاربر افزونه صفحه طراحی شده را نمایش دهد و در انتها قسمت icons را با یک لوگو پر میکنید تا تنظیمات مربوطه تمام شود و نوبت نصب افزونه و استفاده از آن برسد

نصب افزونه طراحی شده در گوگل کروم

برای ورود به بخش نصب افزونه مانند تصویر پایین در سمت راست روی سه نقطه کلیک کنید و موس خود را روی More Tools قرار دهید و Extensions را انتخاب بکنید.

در ادامه صفحه زیر برای شما باز میشود که باید گزینه Developer Mode را فعال بکنید و از سمت چپ صفحه گزینه Load Unpacked را انتخاب بکنید و پوشه ای که در آن فایل های افزونه را قرار داده اید را بارگزاری بکنید و در پایین افزونه تیک را بزنید تا افزونه فعال شود.

تبریک میگم با باز کردن صفحه جدید مرورگر شما دچار تغییر میشود.

در مقاله چگونه یک افزونه گوگل کروم بسازیم از سایت نونویسان یاد گرفتید که چگونه با html, css یک افزونه برای مرورگر کروم بسازید اگر سوالی داشتید در بخش نظرات مطرح بکنید.