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

7 tuổi học lập trình, 8 tuổi học viết ứng dụng, 14 tuổi cậu bé thiên tài này đã là chuyên gia AI cho “ông lớn công nghệ” IBM 03.07.2018

7 tuổi học lập trình, 8 tuổi học viết ứng dụng, 14 tuổi cậu bé thiên tài này đã là chuyên gia AI cho “ông lớn công nghệ” IBM

Tanmay Bakshi 14 tuổi hiện là lập trình viên máy tính, chuyên gia nghiên cứu về trí tuệ nhân tạo và là một kỹ thuật viên siêu hạng. Cậu đã phát triển được nhiều ứng dụng, phát hành một cuốn sách, từng là diễn giả của chương trình TED Talk và phát biểu tại hội nghị thượng đỉnh IBM Watson trên khắp thế giới bao gồm Phần Lan, New Zealand.

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.

Đăng ký bản quyền website như thế nào? 19.06.2019

Đăng ký bản quyền website như thế nào?

Khách hàng sẽ nộp hồ sơ đăng ký bản quyền website cho hình thức giao diện website và code website tại Cục bản quyền tác giả có trụ sở chính tại Hà Nội hoặc 02 văn phòng đại diện của Cục tại Hà Nội và Đã Nẵng.

Với thương vụ GitHub, giờ đây Microsoft đang sở hữu hai mạng lưới chuyên gia hàng đầu thế giới 03.07.2018

Với thương vụ GitHub, giờ đây Microsoft đang sở hữu hai mạng lưới chuyên gia hàng đầu thế giới

Điều này rất quan trọng cho Microsoft khi cuộc chiến giành giật các tài năng tại Thung lũng Silicon đang chưa có dấu hiệu hạ nhiệt, và hãng sẵn sàng trả thêm nhiều tiền để có được các chuyên gia đó.

10 lưu ý khi vận hành website bán hàng 25.07.2018

10 lưu ý khi vận hành website bán hàng

Chọn đơn vị thiết kế web, xây dựng hệ thống thanh toán, hiển thị đánh giá của người mua... là những điều rất cần quân tâm với một website bán hàng trực tuyế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!