كيفاش تصاوب google chrome extension

منذ 4 سنوات imadbelasri Javascript
JS

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نقادو extension لي غادي ن installer ف google chrome ولي غادي يكون extension بسيط كيعرض واحد menu فيها les liens للموقع ديال الكود بالدارجة بالإضافة لل les liens ل les réseaux sociaux.


نظرة سريعة بالفيديو


1- الملف manifest.json

أول حاجة زيد dossier جديد سميه chrome_extension او لي بغيتي هدا هو dossier ديال ل projet ديالنا زيدو فين بغيتي منبعد زيد ملف جديد سميه manifest.json غادي يكون فيه الإسم وال déscription ديال ل extension وles icons لي خاص يكونوا عندك وحدة la taille ديال 20x20 ووحدة ديال 128x128 وعندي ايضا الإسم ديال الملف لي غادي يكون فيه ل contenu ولي سميناه popup.html ولي غادي نزيدوه منبعد  الكود ديال الملف هو :

                                                    
                                                        {
  "manifest_version": 2,
  "name": "Darija Coding",
  "description": "Learn coding fast and easy.",
  "version": "1.0",
  "icons":{"128":"icon-128x128.png"},
  "browser_action": {
    "default_icon": "icon-20x20.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "storage"
  ]
}
                                                    
                                                

2- الملف popup.html

منبعد كنزيد ملف جديد كنسميه popup.html فيه غادي يكون الكود html لي فيه روابط css وكنزيد فيه logo وفل contenu عندي les liens ديال الكود بالدارجة فهدا غير مثال أما نتا تقدر تدير ل contenu لي بغيتي الكود ديال الملف هو :

                                                        
                                                            <!doctype html>
<html>
  <head>
    <title>Darija Coding Plugin</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
      <div class="modal-header">
          <h1 class="logo">
              <img src="logo.png" alt="" class="logo-icon"> DCoding extension <span class="version">(1.0.0)</span>
          </h1>
      </div>
      <div class="modal-content">
          <p>Learn coding fast and easy.</p>
      </div>
      <div class="modal-icons">
          <div class="item-container">
              <div class="item">
                  <a href="https://www.darija-coding.com" target="_blank"><i class="fa fa-globe"></i></a>
              </div>
              <div class="item">
                  <a href="https://www.facebook.com/DarijaCoding" target="_blank"><i class="fa fa-facebook-f"></i></a>
              </div>
              <div class="item">
                  <a href="https://plus.google.com/101178669574584049811?hl=fr" target="_blank"><i class="fa fa-google-plus"></i></a>
              </div>
              <div class="item">
                  <a href="https://youtube.com/channel/UC1CrIoJYnNgONrszBEPvCeg" target="_blank"><i class="fa fa-youtube"></i></a>
              </div>
              <div class="item">
                  <a href="https://twitter.com/intent/follow?source=followbutton&variant=1.0&screen_name=DarijaCoding"><i class="fa fa-twitter"></i></a>
              </div>
          </div>
      </div>
      <script src="popup.js"></script>
  </body>
</html>
                                                        
                                                    

3- الملف popup.js

منبعد كنزيد ملف جديد كنسميه popup.js  فيه غادي يكون الكود javascript لي هو par défaut ديال google وكاين ف la documentation الكود ديال الملف هو :

                                                        
                                                            // Copyright (c) 2014 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

/**
 * Get the current URL.
 *
 * @param {function(string)} callback called when the URL of the current tab
 *   is found.
 */
function getCurrentTabUrl(callback) {
  // Query filter to be passed to chrome.tabs.query - see
  // https://developer.chrome.com/extensions/tabs#method-query
  var queryInfo = {
    active: true,
    currentWindow: true
  };

  chrome.tabs.query(queryInfo, (tabs) => {
    // chrome.tabs.query invokes the callback with a list of tabs that match the
    // query. When the popup is opened, there is certainly a window and at least
    // one tab, so we can safely assume that |tabs| is a non-empty array.
    // A window can only have one active tab at a time, so the array consists of
    // exactly one tab.
    var tab = tabs[0];

    // A tab is a plain object that provides information about the tab.
    // See https://developer.chrome.com/extensions/tabs#type-Tab
    var url = tab.url;

    // tab.url is only available if the "activeTab" permission is declared.
    // If you want to see the URL of other tabs (e.g. after removing active:true
    // from |queryInfo|), then the "tabs" permission is required to see their
    // "url" properties.
    console.assert(typeof url == 'string', 'tab.url should be a string');

    callback(url);
  });

  // Most methods of the Chrome extension APIs are asynchronous. This means that
  // you CANNOT do something like this:
  //
  // var url;
  // chrome.tabs.query(queryInfo, (tabs) => {
  //   url = tabs[0].url;
  // });
  // alert(url); // Shows "undefined", because chrome.tabs.query is async.
}

/**
 * Change the background color of the current page.
 *
 * @param {string} color The new background color.
 */
function changeBackgroundColor(color) {
  var script = 'document.body.style.backgroundColor="' + color + '";';
  // See https://developer.chrome.com/extensions/tabs#method-executeScript.
  // chrome.tabs.executeScript allows us to programmatically inject JavaScript
  // into a page. Since we omit the optional first argument "tabId", the script
  // is inserted into the active tab of the current window, which serves as the
  // default.
  chrome.tabs.executeScript({
    code: script
  });
}

/**
 * Gets the saved background color for url.
 *
 * @param {string} url URL whose background color is to be retrieved.
 * @param {function(string)} callback called with the saved background color for
 *     the given url on success, or a falsy value if no color is retrieved.
 */
function getSavedBackgroundColor(url, callback) {
  // See https://developer.chrome.com/apps/storage#type-StorageArea. We check
  // for chrome.runtime.lastError to ensure correctness even when the API call
  // fails.
  chrome.storage.sync.get(url, (items) => {
    callback(chrome.runtime.lastError ? null : items[url]);
  });
}

/**
 * Sets the given background color for url.
 *
 * @param {string} url URL for which background color is to be saved.
 * @param {string} color The background color to be saved.
 */
function saveBackgroundColor(url, color) {
  var items = {};
  items[url] = color;
  // See https://developer.chrome.com/apps/storage#type-StorageArea. We omit the
  // optional callback since we don't need to perform any action once the
  // background color is saved.
  chrome.storage.sync.set(items);
}

// This extension loads the saved background color for the current tab if one
// exists. The user can select a new background color from the dropdown for the
// current page, and it will be saved as part of the extension's isolated
// storage. The chrome.storage API is used for this purpose. This is different
// from the window.localStorage API, which is synchronous and stores data bound
// to a document's origin. Also, using chrome.storage.sync instead of
// chrome.storage.local allows the extension data to be synced across multiple
// user devices.
document.addEventListener('DOMContentLoaded', () => {
  getCurrentTabUrl((url) => {
    var dropdown = document.getElementById('dropdown');

    // Load the saved background color for this page and modify the dropdown
    // value, if needed.
    getSavedBackgroundColor(url, (savedColor) => {
      if (savedColor) {
        changeBackgroundColor(savedColor);
        dropdown.value = savedColor;
      }
    });

    // Ensure the background color is changed and saved when the dropdown
    // selection changes.
    dropdown.addEventListener('change', () => {
      changeBackgroundColor(dropdown.value);
      saveBackgroundColor(url, dropdown.value);
    });
  });
});
                                                        
                                                    

4- الملف style.css

منبعد كنزيد ملف كنسميه style.css فيه كنزيد les styles css لي غادي نحتاج الكود ديال الملف هو :

                                                        
                                                            html,body{
    font-family: 'Open Sans',sans-serif;
    font-size: 16px;
    margin: 0;
    min-height: 180px;
    padding: 0;
    width: 384px;
}
h1{
    font-size: 22px;
    font-weight: 400;
    margin: 0;
    color: #007AA7;
}
a:link,a:visited{
    color: #000;
    outline: 0;
    text-decoration: none;
}
img{
    width: 30px;
    margin-top: 5px;
    border: 1px solid #007AA7;
}
.modal-header{
    text-align: center;
    border-bottom: 0.5px solid #007AA7;
}
.modal-content{
    padding: 0 22px;
    font-size: 20px;
    text-align: center;
    border-bottom: 0.5px solid #007AA7;
}
modal-icons{
    border-top: 0.5px solid #007AA7;
    height: 50px;
    width: 100px;
}
.logo{
    padding: 16px;
}
.logo-icon{
    vertical-align: text-bottom;
    margin-right: 12px;
}
.version{
    color: #444;
    font-size: 18px;
}
.item-container .item{
    float: left;
    margin: 10px 0 0 10px;
    background-color: #007AA7;
    height: 55px;
    width: 45px;
    padding: 10px;
    font-size: 40px;
    text-align: center;
    border-radius: 5px;
}
.item a{
    color: #fff;
}
.item:hover{
    opacity: 0.5;
}
                                                        
                                                    

دروس ذات صلة

JS

كيفاش نصاوب إختبار بإستعمال Javascript

فهاد الدرس الاول من سلسلة javascript غادي نشوفو كيفاش نقادو واحد المشروع لي عبارة عن إختبار ديال الأ...


JS

لعبة Tic Tac Toe ب Javascript

فهاد الدرس غادي نشوفو كيفاش نقادو واحد اللعبة بسيطة سميتها Tic Tac Toe بإستعمال javascript هاد الدرس...


JS

كيفاش تصاوب تطبيق صرف عملات بإستخدام JSON

فهاد الدرس الجديد غادي نشوفو كيفاش نصوبو واحد التطبيق بسيط لي كيعرض سعر صرف العملات فمثلا المستخدم ك...


JS

كيفاش تصاوب تطبيق كيحسب مؤشر كتلة الجسم بإستخدام JSON

فهاد الدرس غادي نقومو بالبرمجة ديال واحد لAPI بسيط كيمكن من حساب كتلة الجسم من بعد ما كيستقبل الوزن...


JS

لعبة Domino ب javascript

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نقادو واحد اللعبة بسيطة لعبة دومينو المستخدم...


JS

كيفاش تصاوب jeu de math ب javascript

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نقادو واحد اللعبة بسيطة سميتها jeu de math لي...


JS

application كتحسب المسافة بين المدن ب html & css & javascript

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نقادو واحد ل application كتحسب المسافة مابين...


JS

برمج ساعة باستعمال javascript

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نبرمجو ساعة فالساعة غادي تكون كتعرض الوقت الح...


JS

كيفاش تسجل المعلومات فل local storage ديال navigateur

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش تسجل المعلومات فل local storage ديال nav...


JS

ألة حاسبة للمبتدئين ب javascript

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نقادو آلة حاسبة للمبتدئين لي غادي تمكن من الق...