Cách tạo tiện ích mở rộng Chrome đơn giản

Tạo tiện ích mở rộng Chrome là một quá trình khá đơn giản. Khi hoàn tất, bạn sẽ có thể sử dụng nó trên máy tính của mình để nâng cao cách trình duyệt hoạt động.

Có một số thành phần cơ bản mà trình duyệt yêu cầu trước khi tiện ích mở rộng có thể hoạt động hoàn toàn. Chúng tôi sẽ xem xét tất cả những điều này bên dưới, bao gồm cả cách làm cho tiện ích mở rộng tùy chỉnh của bạn hoạt động trong Chrome mà không cần tải lên hoặc chia sẻ nó với bất kỳ ai khác.

Tạo một tiện ích mở rộng Chrome(Chrome) phức tạp là một quá trình chi tiết hơn nhiều so với những gì bạn sẽ thấy bên dưới, nhưng quy trình chung là giống nhau. Hãy tiếp tục đọc để tìm hiểu cách tạo tiện ích mở rộng của Chrome mà bạn có thể bắt đầu sử dụng ngay hôm nay.

Mẹo(Tip) : Để xem tiện ích mở rộng của riêng bạn có thể tuyệt vời như thế nào, hãy xem các tiện ích mở rộng tuyệt vời này của Chrome(these amazing Chrome extensions) .

Cách tạo tiện ích mở rộng Chrome

Sử dụng hướng dẫn này, bạn sẽ tạo một tiện ích mở rộng Chrome đơn giản liệt kê một số trang web yêu thích của bạn. Nó hoàn toàn có thể tùy chỉnh và thực sự dễ cập nhật.

Đây là việc cần làm:

  • Tạo một thư mục chứa tất cả các tệp tạo nên phần mở rộng.
  • Tạo các tệp cơ sở mà tiện ích mở rộng này yêu cầu: manifest.json , popup.html , background.html , styles.css .
  • Mở popup.html trong trình soạn thảo văn bản và sau đó dán tất cả những thứ sau vào đó, đảm bảo lưu nó khi bạn hoàn tất.
<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Favorite Sites</title>
      <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
<body>
   <ul id="myUL">
      <li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li>
      <li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li>
      <li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li>
   </ul>
</body>
</html>

Hãy(Feel) thoải mái chỉnh sửa các liên kết và văn bản liên kết hoặc nếu bạn muốn tạo tiện ích mở rộng Chrome chính xác như hiện tại, chỉ cần giữ nguyên mọi thứ.

  • Mở tệp kê khai.json(manifest.json) trong trình soạn thảo văn bản và sao chép / dán nội dung sau:

{
“update_url”: “https://clients2.google.com/service/update2/crx”,

“Manifest_version”: 2,
“name”: “Các trang web yêu thích”, ( “name”: “Favorite Sites”,)
“description”: “Tất cả các trang web yêu thích của tôi.”, ( “description”: “All my favorite websites.”,)
“Phiên bản”: “1.0”, ( “version”: “1.0”,)
“biểu tượng”: { ( “icons”: {)
“16”: “icon.png”,
“32”: “icon.png”,
“48”: “icon.png”,
“128”: “icon.png”
},

   “Background”: { 
        “page”: ”background.html”
},

    “Browser_action”: {
        “default_icon”: “icon.png”,
        “default_title”: “Favourite Sites”, (        “default_title” : “Favorite Sites”,)
        “default_popup”: “popup.html”
    }
}

Các khu vực có thể ăn được của mã này bao gồm tên(name) , mô tả(description) và default_title .

  • Mở styles.css và dán đoạn mã sau. Đây là những gì trang trí menu bật lên để làm cho nó trông hấp dẫn hơn nhiều và thậm chí dễ sử dụng hơn.

#myUL {
list-style-type: none;
   đệm: 0; (   padding: 0;)
   lề: 0; (   margin: 0;)
   chiều rộng: 300px; (   width: 300px;)
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px;
  background-color: #f6f6f6;
  đệm: 12px; (  padding: 12px;)
  văn bản-trang trí: không có; (  text-decoration: none;)
  font-size: 18px;
  màu đen; (  color: black;)
  hiển thị: khối; (  display: block;)
  font-family: 'Noto Sans', sans-serif;
}

#myUL li a:hover:not(.header) {
   background-color: #eee;
}

Có rất nhiều thứ bạn có thể thay đổi trong tệp CSS . Hãy thử với các tùy chọn này sau khi tạo tiện ích mở rộng Chrome của bạn để tùy chỉnh nó theo ý thích của bạn.

  • Tạo(Create) một biểu tượng cho tiện ích mở rộng và đặt tên là icon.png . Đặt nó vào thư mục tiện ích mở rộng Chrome của bạn . Như bạn có thể thấy trong đoạn mã trên, bạn có thể tạo một biểu tượng riêng cho các kích thước đó: 16 × 16 pixel, 32 × 32, v.v.

Mẹo: (Tip: )Google có thêm thông tin(Google has more information) về cách tạo tiện ích mở rộng của Chrome . Có các ví dụ khác và các tùy chọn nâng cao vượt ra ngoài các bước đơn giản mà chúng tôi đã trình bày ở đây.

Cách thêm tiện ích mở rộng tùy chỉnh(Custom Extension) vào Chrome

Bây giờ bạn đã tạo tiện ích mở rộng Chrome , đã đến lúc thêm nó vào trình duyệt để bạn thực sự có thể sử dụng tất cả các tệp bạn vừa tạo. Cài đặt tiện ích mở rộng tùy chỉnh bao gồm một quy trình khác với cách bạn cài đặt tiện ích mở rộng Chrome thông thường(how you’d install a normal Chrome extension) .

  • Từ menu Chrome, chuyển tới Công cụ khác(More tools ) > Tiện ích mở rộng(Extensions) . Hoặc nhập chrome://extensions/ vào thanh địa chỉ.
  • Chọn nút bên cạnh Chế độ nhà phát triển(Developer mode) nếu nó chưa được chọn. Thao tác này sẽ bật một chế độ đặc biệt cho phép bạn nhập các tiện ích mở rộng Chrome của riêng mình .

  • Sử dụng nút Tải giải nén(Load unpacked ) ở đầu trang đó để chọn thư mục bạn đã tạo trong Bước 1(Step 1) ở trên.

  • Chấp nhận(Accept) bất kỳ lời nhắc nào nếu bạn nhìn thấy chúng. Nếu không, tiện ích mở rộng Chrome(Chrome) được tạo tùy chỉnh của bạn sẽ hiển thị cùng với bất kỳ tiện ích mở rộng nào khác mà bạn có ở góc trên cùng bên phải của trình duyệt.

Chỉnh sửa tiện ích mở rộng Chrome của bạn

Giờ đây, tiện ích mở rộng Chrome của bạn đã có thể sử dụng được, bạn có thể thực hiện các thay đổi để biến nó thành của riêng mình. 

Tệp styles.css kiểm soát cách phần mở rộng xuất hiện, vì vậy bạn có thể điều chỉnh kiểu danh sách tổng thể và thay đổi màu hoặc loại phông chữ. W3Schools là một trong những nguồn tốt nhất để tìm hiểu về tất cả những điều khác nhau mà bạn có thể làm với CSS .

Để thay đổi thứ tự các trang web được liệt kê hoặc để thêm hoặc nhiều trang web hoặc xóa những trang hiện có, hãy chỉnh sửa tệp popup.html. Chỉ cần đảm bảo giữ các chỉnh sửa của bạn chỉ URL và tên. Tất cả các ký tự khác, như <li> và <html> , là bắt buộc và không nên thay đổi. Hướng dẫn HTML trên W3Schools(HTML Tutorial on W3Schools) là một nơi tốt để tìm hiểu thêm về ngôn ngữ đó.



Bách Châu

About the author

Tôi là kỹ sư phần mềm và có kinh nghiệm với cả Microsoft Office và trình duyệt Chrome. Tôi am hiểu nhiều khía cạnh của phát triển web, bao gồm nhưng không giới hạn ở: HTML, CSS, JavaScript, jQuery và React. Sở thích làm việc với công nghệ của tôi cũng có nghĩa là tôi đã quen thuộc với các nền tảng khác nhau (Windows, Mac, iOS) và hiểu cách chúng hoạt động.


Related posts