Cách tạo một Extensions cho Chrome

Tho_House_Sub_Team · May 4, 2019, 5:29am

Để tạo check rank thì trước tiên phải hiểu Extension cấu tạo như thế nào cái đã.
hinh
Hình trên là cấu trúc đơn giản cho một Extensions

 Manifest.json 
{
  "name": "Demo",
  "description": "My First Chrome Extension",
  "version": "1.0",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "https://khuyenmaibamien.com/api" // ví dụ thôi, trang này k có api.
  ],
  "manifest_version": 2
}

Tiếp theo là trang:
POPUP.html
<html>
  <head><title>My First Chrome Extension</title></head>
  <link rel="stylesheet" href="bootstrap.min.css">
  <link rel="stylesheet" href="font-awesome.css">
  <style>
    body {
      font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
      font-size: 100%;
    }
    a, a:focus {
      display: inline-block;
      outline: none;
    }
    #tag {
      min-width: 200px;
    }
    .image {
      max-width: 200px;
    }
    #content {
      text-align: center;
    }
  </style>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-8">
          <input id="tag" value="funny"/>
        </div>
        <div class="col-md-4">
          <button id="getGif">Get</button>
        </div>
        <div class="col-md-12">
          <div id="content"></div>
        </div>
      </div>
    </div>
    <script src="popup.js"></script>
  </body>
</html>

và javascript
popup.js

function renderImage(content) {
  document.getElementById('content').innerHTML = content;
}

async function getGifUrl() {
  let tag = document.getElementById('tag').value;
  let url =url_api?api_key=key_api_cua_ban&tag='+tag;
  let result = await fetch(url);
  let jsonResult = await result.json();
  return jsonResult.data;
}

document.getElementById('getGif').addEventListener('click', async () => {
  renderImage('<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>');
  var imageData = await getGifUrl();
  renderImage('<a href="' + imageData.url + '" target="_blank"><im g class="image img-responsive img-rounded" src="' + imageData.fixed_height_small_url + '" /></a>');
});

bạn thay thế url nào có api vào nhé.
Đây là bước cơ bản để có một extensions trước.