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

Sự khác nhau giữa SSL miễn phí và SSL có trả phí 11.09.2018

Sự khác nhau giữa SSL miễn phí và SSL có trả phí

Trong điều kiện bảo mật của mã hóa an toàn, thì nhìn chung chúng đều tương tự nhau  . Tất cả đều được tín nhiệm bởi các trình duyệt chính hiện nay . Đều sẽ hiển thị các ổ khóa màu xanh lá cây trong thanh địa chỉ của trình duyệt của bạn.

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.

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.

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.

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ạ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!