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

منذ 4 سنوات imadbelasri Javascript

فهاد الدرس الجديد من سلسلة 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;
}