چگونه برای گوگل کروم Extension بنویسیم؟ در این مطلب قصد دارم به شما نحوه ایجاد یک Exntesion ساده برلی کروم را آموزش دهم. Extension ها یا افزونه ها در کروم به شما این امکان را می دهند تا قابلیت های جدیدی به مرورگر خود اضافه کنید. در این مطلب افزونه ای ایجاد میکنیم که با باز کردن یک تب جدید یک تصویر به همراه یک نقل قول به شما نمایش داده شود. هدف آشنایی شما با ساختار اولیه نوشتن افزونه ها در مرورگر کروم است. برای نوشتن یک افزونه شما نیاز دارید که با مباحث زیر آشنایی داشته باشید:

  1. HTML
  2. CSS
  3. JavaScript

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

img1

در قدم بعدی باید قالب اولیه را برای توسعه Extension ایجاد کنیم. اینکار به صورت دستی امکان پذیر است، اما برای راحتی کار از وب سایت Extensionizr استفاده می کنیم. وارد وب سایت شده و به ترتیب کارهای زیر را اتجام می دهیم:

  1. از قسمت Name your extension گزینه Hidden Extension را انتخاب می کنیم
  2. در بخش بعدی و از قسمت Fine Tuning به ترتیب برای Background Page گزینه No Background را انتخاب کرده و از Options page گزینه No options page را انتخاب می کنیم. همچنین در بخش Mix addons گزینه Add jQuery 2.0.0 را انتخاب می کنیم.
img2

بعد از انجام کارهای بالا، در انتهای صفحه گزینه Download ready را زده و فایل zip که شامل فایل های مورد نیاز برای افزونه ما است را دانلود می کنیم.فایل zip دانلود شده را در یک پوشه extract می کنیم. داخل این پوشه فایلی به نام manifest.json قرار دارد. این فایل حاوی اطلاعاتی در مورد افزونه ای است که قرار است ایجاد کنیم، مانند نام، نسخه افزونه، توضیحات و غیره. این فایل را مانند نمونه زیر تغییر دهید:

{

  "name": "Daily quotes",

  "version": "1.0.0",

  "manifest_version": 2,

  "description": "This extension will display daily quote and tips in each new tab.",

  "homepage_url": "https://tosinso.com/",

  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "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>Chrome 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 ارائه شده از این وب سایت می توان نقل قول ها را به صورت تصادفی دریافت کرد

ابتدا در فایل styles.css کدهای css زیر را اضافه کنید:

@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);  
}

در قدم بعدی، برای دریافت و نمایش نقل قول، کد زیر را در فایل main.js اضافه کنید:

$(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 را کلیک کرده و پوشه افزونه را انتخاب کنید. حال با ایجاد یک تب جدید یک تصویر تصادفی به همراه یک نقل قول برای شما نمایش داده می شود:

وب سایت توسینسو

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