Chrome extensions 2-Search channel Youtube

Extension tìm kênh youtube và hiển thị lượt subscribers

Video demo

1.Phía server:
1.1 Sử dụng nodejs làm webservice
Setup nodejs:
Tạo file package.json:

{
  "name": "get_subscribers_yt",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.19.0",
    "cheerio": "^1.0.0-rc.3",
    "express": "^4.17.1",
    "moment": "^2.24.0"
  }
}

Setup package:

npm init

1.2 Get data youtube using api
Các bạn edit lại apiKey.
Hướng dẫn đăng ký api youtube https://www.slickremix.com/docs/get-api-key-for-youtube/

2.Chrome extension:
Tạo file manifest.json

{
  "manifest_version": 2,

  "name": "Channel Youtube",
  "description": "This extension search channel youtube.",
  "version": "1.0",
  "icons": {
    "128": "icon128.png",
    "48": "icon48.png",
    "16": "icon16.png"
  },

  "browser_action": {
    "default_icon": "icon16.png",
    "default_popup": "popup.html"
  },
  "options_page": "options.html",
  "permissions": [
    "storage"
  ]
}

File popup.html view here
File popup.js

File options.html view here
File cấu hình options.js

   (async () => {
       function getLocalStorageValue(key) {
           return new Promise((resolve, reject) => {
               try {
                   chrome.storage.sync.get(key, function(value) {
                       resolve(value);
                   })
               } catch (ex) {
                   reject(ex);
               }
           });
       }


       const result = await getLocalStorageValue(["urlServer"]);
       if(result.urlServer){
        $("#urlServer").val(result.urlServer);
       }
       
       $('#buttonUpdate').click(function() {
           var urlServer = $('#urlServer').val();
           if (urlServer) {
               chrome.storage.sync.set({
                   'urlServer': urlServer
               }, function() {
                   //close();
               });
           }
       });
   })();

Các bạn cấu hình url tới webservice trong trang option của extension truóc thì mới chạy được nhé
Url service default:http://demo.gacoder.info/demo3
Link code chrome extension in here
Link code server in here

0 Shares

Leave a Reply

avatar
  Subscribe  
Notify of