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 quy trình khá đơn giản. Khi bạn thực hiện xong, bạn sẽ có thể sử dụng nó trên máy tính của mình để cải thiện 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 đầy đủ. Chúng tôi sẽ xem xét tất cả những điều dưới đây, bao gồm cách để 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.

Xây dựng tiện ích mở rộng 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 quá trình chung là như nhau. Hãy đọc để tìm hiểu cách tạo tiện ích mở rộng Chrome mà bạn có thể bắt đầu sử dụng ngay hôm nay.

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

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ễ dàng để cập nhật.

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

  • Tạo một thư mục sẽ chứa tất cả các tệp tạo nên tiện ích 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, nền.html, style.css.
  • Mở popup.htmltrong trình chỉnh sửa văn bản và sau đó dán tất cả các mục sau vào đó, đảm bảo lưu nó khi bạn hoàn thành.
  • <!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 thoải mái chỉnh sửa các liên kết và liên kết văn bản hoặc nếu bạn muốn tạo tiện ích mở rộng Chrome chính xác như chúng ta, chỉ cần giữ mọi thứ giống nhau.

    In_content_1 all: [300x250] / dfp: [640x360]->
    • Mở manifest.jsontrong trình chỉnh sửa văn bản và sao chép / dán nội dung sau:
    • {
      Cập nhật_urlviết: Hồi https://clents2.google.com.vn/service/update2/crx,

      Thẻ manifest_version Hồi: 2,
      Tên của tên: Các trang web yêu thích của chúng tôi,
      Mô tả về tính năng: Tất cả các trang web yêu thích của tôi.,,
      Phiên bản nâng cấp: Phiên bản 1.0 trực tuyến,
      Các biểu tượng của phạm vi: {
      Rối loạn 32, một trong những biểu tượng của trò chơi, biểu tượng của trò chơi. png xông
      },

      Nền nền Hồi: {
      Trang page Từ: Nền nền. html kèm
      },

      Trình duyệt_bảng_bằng: {
      icon.png xông,
      default default_title, mật khẩu: Các trang web yêu thích nhất,
      , default default_popup,: popup popup.html,
      }
      }

      Các vùng ăn được của mã này bao gồm tên, mô tảdefault_title.

      • Mở style.cssvà dá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 và thậm chí dễ sử dụng hơn.
      • #myUL {
        danh sách -style-type: none;
        padding: 0;
        lề: 0;
        width: 300px;
        }

        #myUL li a {
        viền: 1px solid #ddd;
        lề-top: -1px;
        màu nền: # f6f6f6;
        padding: 12px;
        trang trí văn bản: none;
        cỡ chữ: 18px;
        màu: đen;
        hiển thị : block;
        font-family: 'Noto Sans', sans-serif;
        }

        #myUL li a: hover: not (.header) {
        màu nền: #eee;
        }

        Có rất nhiều bạn có thể thay đổi trong tệp CSS. Chơi xung quanh 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 tiện ích mở rộng theo ý thích của bạn.

        • Tạo biểu tượng cho tiện ích mở rộng và đặt tên là icon.png. Đặt nó trong 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:Google có thêm thông tin khi tạo tiện ích mở rộng Chrome. Có các ví dụ và tùy chọn nâng cao khác vượt xa 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 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 bình thường.

          • Từ menu Chrome, đi tới Công cụ khác>Tiện ích mở rộng. Hoặc, nhập chrome: // extend /trong thanh địa chỉ.
          • Chọn nút bên cạnh Chế độ nhà phát triểnnếu nó đã được chọn. Điều 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ở đầu trang đó để chọn thư mục bạn đã tạo trong Bước 1 ở trên.
              • Chấp nhận bất kỳ lời nhắc nếu bạn nhìn thấy chúng. Mặt khác, tiện ích mở rộng 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 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

                Bây giờ 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 bạn.

                Tệp Styles.css kiểm soát cách tiện ích mở rộng xuất hiện, do đó 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ữ. Trường W3 là một trong những tài nguyên tốt nhất để tìm hiểu về tất cả những điều khác nhau bạn có thể làm với CSS.

                Để tăng thứ tự các trang web được liệt kê hoặc thêm hoặc nhiều hơn trang web hoặc xóa những cái hiện có, 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ỉ với URL và tên. Tất cả các ký tự khác, như

              • , đều được yêu cầu và nên thay đổi. HTML Tutorial on Trường W3 là một nơi tốt để tìm hiểu thêm về ngôn ngữ đó.

              • chrome extensions tutorial: Hướng dẫn viết tiện ích mở rộng Chrome extension

                bài viết liên quan:


                5.11.2019