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

Nếu bạn muốn thêm hoặc sửa đổi một số chức năng trong Google Chrome, bạn cần sử dụng tiện ích mở rộng. Mặc dù bạn có thể tải xuống tiện ích mở rộng từ Cửa hàng Chrome trực tuyến, nhưng đôi khi bạn cần một chức năng cụ thể mà bạn không thể tìm thấy trong bất kỳ tiện ích mở rộng hiện có nào.

Chà, tin tốt là bạn có thể tạo tiện ích mở rộng của riêng mình để thêm hoặc sửa đổi chức năng cần thiết hoặc tạo một tiện ích bổ sung hoặc ứng dụng mới cho Google Chrome, mà sau này bạn có thể phân phối cho người dùng khác sử dụng Cửa hàng Chrome trực tuyến.

Sau đây, tôi sẽ cho bạn thấy cách dễ nhất để tạo tiện ích mở rộng. Nếu bạn có một số kiến ​​thức về phát triển web (HTML, CSS và JS), bạn sẽ cảm thấy như ở nhà. Nếu không, trước tiên hãy xem các kênh này để tìm hiểu những điều cơ bản về phát triển web, sau đó tiếp tục bên dưới.

Điều kiện tiên quyết

Bạn cần phải hoàn thành các yêu cầu sau đây trước khi bắt đầu với hướng dẫn này.

1. Bạn phải làm quen với HTML, CSS và JavaScript. [Kiểm tra tài nguyên]
2. Bạn phải có một biên tập mã để viết phần mở rộng. [So sánh các biên tập viên]
3. (Tùy chọn) Nếu bạn muốn phân phối tiện ích mở rộng của mình cho người dùng khác, bạn phải có tài khoản nhà phát triển tại Cửa hàng Chrome trực tuyến. [Tạo một tài khoản]

Chú thích: Google yêu cầu bạn trả một khoản phí nhỏ để tạo tài khoản nhà phát triển tại Cửa hàng Chrome trực tuyến.

Tạo một phần mở rộng

Trong hướng dẫn này, tôi sẽ chia sẻ quá trình tạo ra một mở rộng việc cần làm cho Google Chrome. Đây sẽ là một tiện ích (như được hiển thị bên dưới) để thể hiện các thành phần thiết yếu và các khả năng được cung cấp cho các tiện ích mở rộng.

1. Lấy mẫu

Google Chrome, giống như bất kỳ nền tảng nào khác, yêu cầu nền tảng của nó tiện ích mở rộng để có cấu trúc thiết lập, có vẻ phức tạp cho người mới bắt đầu. Đó là lý do tại sao nên lấy một mẫu soạn sẵn cho một tiện ích mở rộng sẽ cung cấp tất cả các nhu cầu cần thiết.

Extensionizr là máy phát điện nồi hơi tốt nhất cho phần mở rộng chrome. Nó cho phép bạn chọn một trong các loại tiện ích mở rộng đã cho - hành động trình duyệt (một hành động cho tất cả các trang hoặc trình duyệt), hành động trang (một hành động cho trang hiện tại) hoặc mở rộng ẩn (một hành động nền thường được ẩn trong giao diện phía trước).

Hơn nữa, nó cung cấp các tùy chọn tinh chỉnh khác nhau để bao gồm / loại trừ các tiện ích bổ sung cần thiết, quyền, vv Bạn cần phải chọn “Trình duyệt hành động” là loại mở rộng và “Không có nền” làm trang nền cho hướng dẫn này.

Khi bạn hoàn thành việc chọn các tùy chọn để tạo tiện ích mở rộng mẫu của mình, hãy nhấn “Tải về nó!” nút trong Extensionizr. Cuối cùng, trích xuất kho lưu trữ (.zip) vào một thư mục và mở trình soạn thảo mã của bạn để bắt đầu viết phần mở rộng.

2. Mã mở rộng

Sau khi bạn đã tải xuống và trích xuất mẫu, bạn sẽ thấy cấu trúc thư mục như trong ảnh chụp màn hình bên dưới. Mẫu được sắp xếp gọn gàng và bạn phải biết rằng tệp quan trọng nhất là “manifest.json“.

Chúng ta cũng hãy làm quen với các tập tin và thư mục khác trong thư mục này:

1. _locales: Nó được sử dụng để lưu trữ thông tin ngôn ngữ cho một ứng dụng đa ngôn ngữ.
2. css: Nó có chức năng lưu trữ các thư viện mặt trước của bên thứ ba như Bootstrap 4.
3. biểu tượng: Nó được thiết kế để có các biểu tượng cho tiện ích mở rộng của bạn với các kích cỡ khác nhau.
4. js: Nó rất tiện để tiết kiệm thư viện phụ trợ của bên thứ ba như jQuery 3.
5. src: Nó lưu mã thực tế mà bạn sẽ viết cho phần mở rộng của mình.

manifest.json

Nó chứa siêu dữ liệu cơ bản về ứng dụng của bạn, trong đó xác định chi tiết ứng dụng của bạn với trình duyệt. Bạn có thể chỉnh sửa nó để đặt tên, mô tả, trang web, biểu tượng, v.v. của bạn cùng với các chi tiết cụ thể như hành động và quyền của trình duyệt.

Ví dụ: trong đoạn mã dưới đây, bạn sẽ nhận thấy rằng tôi đã thay đổi tên, mô tả và trang chủ_url cùng với default_title trong browser_action. Hơn nữa, tôi thêm “lưu trữ” dưới sự cho phép vì chúng tôi cần lưu trữ dữ liệu trong phần mở rộng của mình.

 "name": "Todoizr - To-do Simplified", "phiên bản": "0.0.1", "manifest_version": 2, "description": "Ứng dụng đơn giản để làm cho mọi người.", "home_url": " https://go.aksingh.net/todoizr "," icon ": " 16 ":" icon / icon16.png "," 48 ":" icon / icon48.png "," 128 ":" icon / icon128 .png "," default_locale ":" en "," browser_action ": " default_icon ":" icon / icon19.png "," default_title ":" Todoizr - To-do Simplified "," default_popup ":" src / browser_action / browser_action.html "," allow ": [" Storage "] 

src \ browser_action

Thư mục này sẽ giữ mã cho hành động trình duyệt. Trong trường hợp của chúng tôi, chúng tôi sẽ mã cửa sổ bật lên hiển thị khi nhấp vào biểu tượng của tiện ích mở rộng trong trình duyệt. Tiện ích mở rộng của chúng tôi sẽ cho phép người dùng thêm và xem các mục việc cần làm trong cửa sổ bật lên.

Chú thích: Bạn luôn có thể bắt đầu với mã bằng cách sao chép kho lưu trữ này.

Mã ban đầu từ mẫu

Mặc dù thư mục này chỉ có một tệp HTML có tất cả mã, tôi đã quyết định chia nó thành ba tệp riêng biệt để rõ ràng hơn. Điều đó nói rằng, tệp HTML có tên “browser_action.html” bây giờ có đoạn mã sau:

Hơn nữa, tập tin kiểu có tên “browser_action.css” có nội dung dưới đây trong khi tệp JavaScript có tên “browser_action.js” bây giờ trống.

 #mainPopup padding: 10px; chiều cao: 200px; chiều rộng: 400px; họ phông chữ: Helvetica, Ubuntu, Arial, sans-serif;  h1 cỡ chữ: 2em;  

Thiết kế giao diện của cửa sổ bật lên

Sau khi thiết lập dự án ban đầu, trước tiên hãy thiết kế giao diện của cửa sổ bật lên. Tôi có thiết lập giao diện với cách tiếp cận tối giản, hiển thị tên ở trên cùng theo sau là một biểu mẫu để thêm các mục việc cần làm và một khu vực bên dưới để xem các mục đã thêm. Nó được lấy cảm hứng từ thiết kế đơn giản của “Mẫu Phong cách 5“.

Trong đoạn mã dưới đây, tôi đã thêm hai div - một để hiển thị biểu mẫu để thêm một mục việc cần làm và một mục khác để hiển thị danh sách các mục việc cần làm đã thêm. Điều đó nói rằng, mã mới cho “browser_action.html” là như sau:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

Và tập tin phong cách “browser_action.css” bây giờ có đoạn mã sau:

 @import url ("./ form_style_5.css"); #mainPopup height: 200px; chiều rộng: 300px; họ phông chữ: Helvetica, Ubuntu, Arial, sans-serif;  / * Biểu mẫu mục việc cần làm * / .form-style-5 lề: auto; đệm: 0px 20px;  .form-style-5: con đầu lòng nền: không có;  .form-style-5 h1 color: # 308ce3; cỡ chữ: 20px; văn bản-align: trung tâm;  .form-style-5 đầu vào [type = "text"] width: auto; phao: trái; lề dưới: không đặt;  .form-style-5 đầu vào [type = "button"] nền: # 308ce3; chiều rộng: tự động; phao: phải; phần đệm: 7px; biên giới: không có; bán kính đường viền: 4px; cỡ chữ: 14px;  .form-style-5 đầu vào [type = "button"]: hover nền: # 3868d5;  / * Danh sách mục việc cần làm * / .form-style-5: last-child height: inherit; lề dưới: 5px;  .form-style-5 ul padding: 20px;  .form-style-5 ul li font-size: 14px;  

Cuối cùng, tệp kiểu của bên thứ ba “form_style_5.css” có nội dung dưới đây. Nó chỉ đơn giản là được lấy từ trang web của nó để truyền cảm hứng cho việc thiết kế phần mở rộng của chúng tôi.

 / * Mẫu Kiểu 5 của Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 max-width: 500px; phần đệm: 10px 20px; nền: # f4f7f8; lề: tự động 10px; phần đệm: 20px; nền: # f4f7f8; bán kính đường viền: 8px; họ phông chữ: Georgia, "Times New Roman", Times, serif;  .form-style-5 fieldset Border: none;  .form-style-5 huyền thoại font-size: 1.4em; lề dưới: 10px;  .form-style-5 nhãn display: block; lề dưới: 8px;  .form-style-5 input [type = "text"], .form-style-5 input [type = "date"], .form-style-5 input [type = "datetime"], .form-style -5 đầu vào [type = "email"], đầu vào .form-style-5 [type = "number"], đầu vào .form-style-5 [type = "search"], đầu vào .form-style-5 [type = "time"], .form-style-5 input [type = "url"], .form-style-5 textarea, .form-style-5 chọn font-family: Georgia, "Times New Roman", Times , serif; nền: rgba (255,255,255, .1); biên giới: không có; bán kính đường viền: 4px; cỡ chữ: 16px; lề: 0; phác thảo: 0; phần đệm: 7px; chiều rộng: 100%; kích thước hộp: hộp viền; -webkit-box-sizing: hộp viền; -moz-box-sizing: hộp viền; màu nền: # e8eeef; màu: # 8a97a0; -webkit-box-Shadow: 0 1px 0 rgba (0,0,0,0,03) in; hộp bóng: 0 1px 0 rgba (0,0,0,0,03) inet; lề dưới: 30px;  .form-style-5 input [type = "text"]: Focus, .form-style-5 input [type = "date"]: Focus, .form-style-5 input [type = "datetime"]: tiêu điểm, đầu vào .form-style-5 [type = "email"]: tập trung, .form-style-5 đầu vào [type = "number"]: tập trung, đầu vào .form-style-5 [type = "search"] : tập trung, .form-style-5 input [type = "time"]: tập trung, .form-style-5 input [type = "url"]: tập trung, .form-style-5 textarea: tập trung, .form- chọn kiểu 5: tập trung nền: # d2d9dd;  .form-style-5 chọn -webkit-ngoại hình: nút menulist; chiều cao: 35px;  .form-style-5 .number nền: # 1abc9c; màu: #fff; chiều cao: 30px; chiều rộng: 30px; hiển thị: khối nội tuyến; cỡ chữ: 0,8em; lề phải: 4px; chiều cao dòng: 30px; văn bản-align: trung tâm; bóng văn bản: 0 1px 0 rgba (255,255,255,0.2); bán kính viền: 15px 15px 15px 0px;  .form-style-5 input [type = "submit"], .form-style-5 input [type = "button"] vị trí: tương đối; hiển thị: khối; đệm: 19px 39px 18px 39px; màu: #FFF; lề: 0 tự động; nền: # 1abc9c; cỡ chữ: 18px; văn bản-align: trung tâm; kiểu chữ: bình thường; chiều rộng: 100%; viền: 1px solid # 16a085; đường viền rộng: 1px 1px 3px; lề dưới: 10px;  .form-style-5 input [type = "submit"]: hover, .form-style-5 input [type = "button"]: hover background: # 109177;  

Viết logic của cửa sổ bật lên

Khi chúng ta đã hoàn thành phần đầu của tiện ích mở rộng, bây giờ hãy viết logic để làm việc. Chúng tôi cần gia hạn để có thể thêm các mục việc cần làm và cũng hiển thị chúng trong cửa sổ bật lên. Vì vậy, chúng tôi sẽ thêm một trình nghe nhấp vào nút để thêm văn bản đầu vào dưới dạng một mục việc cần làm và một trình nghe tải trang để hiển thị các mục đó.

Trong đoạn mã dưới đây, chúng ta sẽ sử dụng hai hàm - sync.get () và sync.set (), đó là một phần của “chrome.st Storage“. Chúng ta cần cái thứ hai để lưu các mục việc cần làm trong bộ lưu trữ và cái thứ nhất để lấy chúng và hiển thị chúng.

Điều đó nói rằng, dưới đây là mã cuối cùng của “browser_action.js” tập tin. Như bạn có thể thấy bên dưới, mã được đánh giá cao để giúp bạn hiểu mục đích của nó.

 function loadItems () / * Trước tiên hãy lấy () dữ liệu từ bộ lưu trữ * / chrome.st Storage.sync.get (['todo'], function (result) var todo = [] if (result && result.todo && result.todo.trim ()! == ") / * Phân tích cú pháp và lấy mảng khi nó được lưu dưới dạng chuỗi * / todo = JSON.parse (result.todo) console.log ('todo.length =' + todo.length) cho (var i = 0; i < todo.length; i++)  item = todo[i] if (item && item.trim() !==")  /* Append the items in the #list for showing them */ var list = document.getElementById('list') var entry = document.createElement('li') var text = document.createTextNode(item) entry.appendChild(text) list.appendChild(entry)   )  /* Load the to-do items upon popup load */ document.addEventListener('DOMContentLoaded', function() console.log('Inside doc.loaded()') loadItems() ) /* Save the to-do item upon button click */ document.getElementById('btn').addEventListener('click', function (ev)  console.log('Inside btn.click()') text = document.getElementById('txt').value if (text && text.trim() !==")  /* First get() old data as calling set() will replace it */ chrome.storage.sync.get(['todo'], function(result)  var todo = [] if (result && result.todo && result.todo.trim() !==")  /* Parse and get the array as it is saved as a string */ todo = JSON.parse(result.todo)  todo.push(text) chrome.storage.sync.set('todo': JSON.stringify(todo), function()  /* Data is saved now */ var list = document.getElementById('list') while (list.firstChild)  list.removeChild(list.firstChild)  loadItems() ) )  ) 

3. Tải phần mở rộng

Sau khi bạn viết xong tiện ích mở rộng của mình, đây là lúc để kiểm tra tiện ích mở rộng thông qua tính năng của Google Chrome cung cấp để tải các tiện ích mở rộng không lưu trữ, không đóng gói. Nhưng trước tiên, bạn phải bật chế độ nhà phát triển trong trình duyệt của bạn: nhấp vào tùy chọn nút > chọn “Thêm công cụ” > Tiện ích mở rộng, và sau đó bật “Chế độ nhà phát triển“.

Bây giờ bạn sẽ thấy nhiều nút hơn dưới thanh tìm kiếm. Ở đây bấm vào “Tải không giải nén” nút. Nó sẽ yêu cầu thư mục - duyệt và chọn thư mục của tiện ích mở rộng của bạn và nó sẽ tải tiện ích mở rộng. Nếu bạn chỉnh sửa hoặc cập nhật mã của tiện ích mở rộng, bạn có thể nhấp vào tải lại nút để tải những thay đổi mới nhất.

Trong ví dụ của chúng tôi, bạn sẽ thấy biểu tượng của phần mở rộng bên cạnh biểu tượng hồ sơ vì chúng tôi đã thêm một hành động trình duyệt trong tiện ích mở rộng mẫu của chúng tôi. Bạn có thể nhấp vào biểu tượng đó để thêm và xem các mục việc cần làm trong phần mở rộng của chúng tôi vì đó là hành động được chỉ định.

Phân phối một phần mở rộng

Mặc dù nó là dễ dàng tải lên một phần mở rộng đối với Cửa hàng Chrome trực tuyến, quá trình này quá dài để bao gồm tất cả các chi tiết. Nói tóm lại, bạn tạo một tài khoản nhà phát triển, đóng gói tiện ích mở rộng của mình và sau đó gửi cùng với chi tiết nội dung của nó (như tên, biểu tượng, ảnh chụp màn hình, v.v.); như được liệt kê trong hướng dẫn từng bước của nó.

Tiếp theo là gì? Đọc và mã

Như bạn có thể mong đợi, mục đích của hướng dẫn này là giúp bạn bắt đầu với việc phát triển tiện ích mở rộng cho Google Chrome. Tôi đã cố gắng bao gồm các khái niệm cơ bản; Tuy nhiên, bạn cần biết nhiều hơn nữa để thực hiện phát triển mở rộng nghiêm túc.

Điều đó nói rằng, dưới đây là một số của tôi tài nguyên đi đến yêu thích để tìm hiểu cách phát triển tiện ích mở rộng cho Google Chrome và các trình duyệt dựa trên Chromium khác:

1. Tất cả các khả năng, thành phần và tính năng của tiện ích mở rộng.
2. Các tiện ích mở rộng mẫu của nhóm đằng sau Google Chrome.

Nếu bạn đã trải qua các tài nguyên này và sẵn sàng cho một số thách thức, hãy thử thêm các tính năng bên dưới trong tiện ích mở rộng bạn vừa hoàn thành:

1. Tùy chọn xóa các mục công việc đã lưu.
2. Một tính năng để hiển thị thông báo khi hoàn thành thêm một mục.

Đó là tất cả về việc phát triển tiện ích mở rộng đầu tiên của bạn cho trình duyệt phổ biến nhất. Bạn đã tạo tiện ích mở rộng nào? Bạn đã gặp phải một vấn đề? Vui lòng cho tôi biết câu chuyện của bạn bằng cách viết bình luận bên dưới hoặc nhắn tin cho tôi tại @aksinghnet.

Cuối cùng nhưng không kém phần quan trọng, xin lưu ý rằng bạn có thể dùng thử Todoizr (tiện ích mở rộng chúng tôi đã tạo) tại Cửa hàng Chrome trực tuyến và kiểm tra mã hoàn chỉnh của nó trong kho lưu trữ này.