0
09216680927

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

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

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

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

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

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

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

پیشنمایش افزونه ای که برای کروم با 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 یک افزونه برای مرورگر کروم بسازید اگر سوالی داشتید در بخش نظرات مطرح بکنید.

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *