Tin tức

Các bước tạo extension trên google chorm đơn giản

Chrome extension là gì ?

Chrome là một trong những trình duyệt phổ biến nhất và được nhiều người dùng lựa chọn. Các extension cho Chrome ngày càng nhiều và đa dạng mang lại nhiều tiện ích cho người dùng. Vậy làm một extension cho Chrome có khó không?

Chrome extension là 1 gói phần mềm bao gồm một số file như HTML, CSS, JavaScript, Image … và được dùng như một công cụ cho trình duyệt Chrome. Để tạo một ứng dụng Chrome extension cũng vô cùng đơn giản, bạn chỉ cần biết một chút Html, Javascript như vậy là đủ. Nếu bạn chưa biết chút gì về Html, Javascript, Css cũng không phải quá lo lắng việc học chúng cũng rất dễ dàng.

Các Bước Tạo Một Chrome Extension Sondesign

Bước 1: Tạo thư mục chrome-extension

Tạo 1 thư mục ở bất kỳ nơi nào trên máy tính, và tại đây chúng ta sẽ đặt toàn bộ các file có liên quan tới extension. Trong thư mục chrome-extension, tạo thư images để chứa ảnh icon.png dùng làm icon của tiện tích Sondesign, tạo thêm thư mục html để chứa file popup.

Bước 2: Tạo file manifest.json

File manifest.json là bắt buộc phải có của tất cả các chrome extension. Bạn tạo một file manifest.json với nội dung như sau:

chrome-extension/manifest.json(đường dẫn)

{

  "name": "SONDESIGN",

  "version": "1.0",

  "description": "My first Chrome extension.",

  "browser_action": {

    "default_icon": "images/icon.png"

  },

  "manifest_version": 2

}

Bước 3: thêm extension vào trình duyệt

Như trong ví dụ trên thì button mới được thêm vào toolbar này sẽ có icon là images/icon.png. Giờ bạn đã có thể thêm extension vào trình duyệt Chrome và sẽ thấy có thêm một icon mới ở trên thanh toolbar. Mở cửa sổ trình duyệt Chrome vào Menu chính > Tools > Extensions, tại cửa sổ quản lý extension chính của Chrome ta chọn tải tiện ích đã giải nén, sau đó chọn đường dẫn đến file "chrome-extension" đã tạo trước đó.

tạo extension sondesign

Vậy là bạn đã thêm extension vào Chrome tuy nhiên khi bạn click vào icon này thì không thấy có điều gì xảy ra. Tiếp theo sẽ tạo thêm một file Html có nội dung SONDESIGN, khi click và icon mới này thì sẽ hiển thị ra popup với nội dung SONDESIGN.

Bước 4: Tạo popup

chrome-extension/html/popup.html(đường dẫn)

<html>

  <head>

    <style type="text/css">

      body {

        width: 100px;

      }

    </style>

    <script type="text/javascript">

      alert(123);

    </script>

  </head>

  <body>

    <p>SONDESIGN</p>

  </body>

</html>

Thêm popup vào file manifest.json

chrome-extension/manifest.json(đường dẫn)

{

  ...

  "browser_action": {

    "default_icon": "images/icon.png",

    "default_popup": "html/popup.html"

  },

  ...

}

Sau khi load lại extension này và click vào icon của extension bạn sẽ thấy một popup mở ra với thông báo SONDESIGN. Đến đây bạn đã hoàn thành một extension SONDESIGN đơn giản.

KẾT QUẢ:

 

 

Có thể bạn quan tâm

Giải mã về 3 loại lập trình web: Front-End, Back-End và Full Stack 22.11.2018

Giải mã về 3 loại lập trình web: Front-End, Back-End và Full Stack

Lập trình viên thiết kế website trang Front-End, Back-End và Full Stack là như thế nào?

Bí quyết kiếm tiền từ kinh doanh online 03.07.2018

Bí quyết kiếm tiền từ kinh doanh online

Kinh doanh online đang trở thành trào lưu bởi không chỉ các doanh nghiệp lớn, nhỏ tham gia mà ngay cả nhân viên văn phòng, học sinh, sinh viên hoặc bất cứ ai, hễ có đam mê là có thể bắt đầu khởi nghiệp kinh doanh với số vốn nhỏ. Thời trang

Hồ sơ, thủ tục đăng ký bảo hộ nhãn hiệu, thương hiệu, độc quyền logo 2019 13.08.2019

Hồ sơ, thủ tục đăng ký bảo hộ nhãn hiệu, thương hiệu, độc quyền logo 2019

Đăng ký nhãn hiệu độc quyền còn có tên gọi khác là đăng ký logo độc quyền hay đăng ký thương hiệu độc quyền. Dù gọi thế nào đi nữa thì về mặt bản chất điều là dấu hiệu dùng để phân biệt hàng hoá, dịch vụ của các tổ chức, cá nhân khác nhau.

Cảnh báo giả mạo nhân viên công ty tài chính lừa đảo qua Facebook 26.07.2018

Cảnh báo giả mạo nhân viên công ty tài chính lừa đảo qua Facebook

Thông qua Facebook, điện thoại, đối tượng lừa đảo tự nhận là nhân viên công ty tài chính để "dụ dỗ", làm giả hợp đồng giải ngân nhằm chiếm đoạt tiền của người có nhu cầu vay.

Lý do khiến tỷ lệ ROI trong chiến lược Content Marketing thấp? 31.08.2018

Lý do khiến tỷ lệ ROI trong chiến lược Content Marketing thấp?

Content Marketing ngày càng khẳng định vai trò quan trọng trong nhiều lĩnh vực. Đặc biệt là kinh doanh online. Xây dựng chiến lược Content Marketing giúp bạn phát triển và tối ưu nội dung content của mình tốt hơn.

Bạn cần thiết kế website?
Nếu bạn ngần ngại gọi chúng tôi! vậy thì hãy để chúng tôi gọi lại tư vấn cho bạn!