آموزش ایجاد یک Extension  ساده برای گوگل کروم

آموزش ایجاد یک Extension ساده برای گوگل کروم

امروز در این آموزش قصد داریم تا به شما نحوه ایجاد یک Extensionساده برای مرورگر گوگل کروم را آموزش بدهیم.برای انجام این کار شما در صورتی  که با کدهای HTML,CSS,Javascript آشنایی داشته باشید کار شما خیلی راحت خواهد بود.در ادامه با ما همراه باشید….

در ابتدا توضیحی در مورد Extensionبرای شما می دهیم. Extensionها باعث اضافه شده امکانات جانبی به مرورگر شما میشوند.ما امروز در این آموزش به شما نحوه ایجاد Extensionرا می دهیم که هنگام باز کردن آن یک پیغام برای کاربران نمایش داده خواهی شد.

برای ایجاد یک افزونه در گوگل کروم شما باید حالت Developer Mode را در مرورگر خود فعالنمایید.برای اینکار در قسمت مرورگر خود آدرس chrome://extensions را وارد کرده  و تیک مربوط به Developer Mode را می زنیم.

1

هر Extensionدارای یک ساختار  وچارچوبی است که شما برای ایجاد افزونه مورد نظر باید از آن پیروی نمایید.برای ایجاد ساختار مورد نیاز ،شما به دو روش میتوانید این کار را انجام بدهید:۱-بصورت دستی(کمی زمان بر و سخت است)۲-با استفاده از وبسایت Extensionizr

ما از روش دوم استفاده می کنیم.برای اینکار ابتدا وارد سایت مورد نظر می شویم :
۱-در بخش  Name your extension ما گزینه Hidden Extension را انتخاب می کنیم.

۲-در بخش Fine TuningTبه ترتیب برای Background Page گزینه No Background  وبرای Options page گزینه No options page را انتخاب می کنیم. درآخر هم در بخش Mix addons گزینه Add jQuery 2.0.0 را انتخاب می کنیم.

2

بعد از انجام تمام کارهای بالا، در انتهای صفحه گزینه Download ready را زده و فایل zip که شامل فایل های مورد نیاز برای افزونه ما است را دانلود می کنیم.

پس از دانلود فایل را از حالت فشرده خارج می کنیم.در داخل پوشه ای که فایل زیپ را extract کردیم یک فایل با نام manifest.json قرار دارد که اطلاعات مربوط به افزونه ای که ما قرار است ایجاد کنیم را در خود دارد که این اطلاعات شامل نام، نسخه افزونه، توضیحات و ….

این فایل را با استفاده از یک ویرایشگر باز کرده و کد زیر را در داخل آن می نویسیم:

{
{
 
  "name": "BNP tutorial",
 
  "version": "1.0.0",
 
  "manifest_version": 2,
 
  "description": "This extension will display daily quote and tips in each new tab.",
 
  "homepage_url": "http://8np.ir",
 
  "icons": {
    "۱۶": "icons/icon16.png",
    "۴۸": "icons/icon48.png",
    "۱۲۸": "icons/icon128.png"
  },
 
  "default_locale": "en",
 
  "chrome_url_overrides": {
    "newtab": "src/override/override.html"
  }
}
}

سپس برای استایل های افزونه خود یک فایل با نام styles.css در پوشه CSS و یک فایل با نام main.js در داخل پوشه js ایجاد نمایید.

خوب پس از این کار ما باید کدهای HTMLمربوط به افزونه را  ویرایش کنیم.برای ایجاد این صفحه، فایلی با نام override.html در پوشه src/override قرار دارد. این فایل را تغییر داده و به فایل های css و js ای که ایجاد کردیم لینک کنید:

<!DOCTYPE html>
   
<html>
   
<head>
   
    <title>BNP daily quotes extension</title>
   
    <link href="../../css/styles.css" rel="stylesheet" />
   
</head>
   
<body>
   
    <h1>Quote of the day</h1>
   
    <div class="quote">
   
        <h1 id="quoteblock"></h1>
   
        <h3 id="author"></h3>
   
    </div>
   
    <script src="../../js/jquery/jquery.min.js"></script>
   
    <script src="../../js/main.js"></script>
   
</body>
   
</html>

در ادامه ما از دو وبسایت برای نوشتن افزونه خود استفاده خواهیم کرد:

  1. source.unsplash.com: از این وب سایت برای دریافت تصویر پس زمینه استفاده می کنیم.
  2. theysaidso.com/api: بوسیله api ارائه شده از این وب سایت می توان نقل قول ها را به صورت تصادفی دریافت کرد

خوب،کدهای مربوط به استایل ها را در زیر مشاهده می کنید:

@import url(https: //fonts.googleapis.com/css?family=PT+Serif:400italic);  
body  
{  
    background - image: url("https://source.unsplash.com/category/nature/1600x900");  
    background - repeat: no - repeat;  
    height: 100 % ;  
    width: auto;  
}  
h1 
{  
    font - family: 'PT Serif', serif;  
    font - size: 2.5e m;  
    text - align: center;  
    color: #fff;  
    text - shadow: 2 px 2 px 3 px rgba(150, 150, 150, 0.75);  
}  
.quote  
{  
    color: #ffffff;  
    text - align: center;  
    vertical - align: middle;  
    padding: 19 % 15 % 0 15 % ;  
}#quoteblock  
{  
    font - family: 'PT Serif', serif;  
    text - shadow: 2 px 2 px 3 px rgba(150, 150, 150, 0.75);  
    font - size: 2e m;  
}#author  
{  
    font - family: 'PT Serif', serif;  
    text - align: center;  
    color: #fff;  
    text - shadow: 2 px 2 px 3 px rgba(150, 150, 150, 0.75);  
}

سپس برای دریافت نقل قول ها از کد زیر استفاده خواهیم کرد:

$(function()  
{  
    var url = "http://quotes.rest/qod.json";  
    var quote = $("#quoteblock"); // the id of the heading  
    $.get(url, function(data)  
    {  
        var the_quote = data;  
        quote.text(the_quote.contents.quotes[0].quote);  
        var author = $("#author"); // id of author  
        author.text(the_quote.contents.quotes[0].author);  
    });  
});

در آخر، برای تست افزونه، از صفحه Extensions در مرورگر کروم بر روی دکمه Load unpacked extension را کلیک کرده و پوشه افزونه را انتخاب کنید. حال با ایجاد یک تب جدید یک تصویر تصادفی به همراه یک نقل قول برای شما نمایش داده می شود.

دریافت راهنمایی از:ITPRO

+1
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

۲ دیدگاه ها

  1. خیلی جالب بود
    ممنون از به اشتراک گذاریتون

  2. ممنون از شما برای من و کسب و کار
    م در سایت سندباد
    خیلی مفید بود

دیدگاه خود را برای سه بعد بنویسید انصراف از پاسخ

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


9 + = هفده

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>