Tiện ích mở rộng web của Chrome - Không cần trải nghiệm mã hóa trước: 6 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:31

Tiện ích mở rộng của Chrome là các chương trình nhỏ được xây dựng để nâng cao trải nghiệm duyệt web của người dùng. Để biết thêm thông tin về tiện ích mở rộng chrome, hãy truy cập

Để tạo một Tiện ích mở rộng web của Chrome, cần phải viết mã, vì vậy sẽ rất hữu ích khi xem lại HTML, JavaScript và CSS tại trang web bên dưới:

www.w3schools.com/default.asp (trường w3 là một trang web tốt cho các tài nguyên mã hóa)

Không biết làm thế nào để viết mã? Đừng lo lắng, hướng dẫn này sẽ giúp chỉ dẫn đường đi.

Điều tốt nhất về Tiện ích mở rộng của Chrome là chúng có thể được tùy chỉnh. Không chỉ một việc cụ thể có thể làm được, vì vậy hãy sáng tạo.

Quân nhu

Các nguồn cung cấp cần thiết dưới đây:

• Máy tính có trình soạn thảo văn bản (tôi đang sử dụng Notepad)
• Google Chrome

Và đó là tất cả!

Bước 1: Tạo thư mục

Đầu tiên, tạo một thư mục để chứa tất cả các tệp và đặt tên là 'phần mở rộng'. Tên có thể được thay đổi sau đó nếu muốn.

Bước 2: Tạo tệp kê khai và mã hóa tệp đó

Tệp kê khai là một phần rất quan trọng của tiện ích mở rộng. Nó cho tiện ích mở rộng biết chính xác những gì cần làm và phải làm. Tệp kê khai được định dạng bằng JSON. Bước đầu tiên là mở một trình soạn thảo văn bản và lưu một tệp mới dưới dạng 'manifest.json'.

Tiếp theo gõ script dưới đây:

{

"name": "First Extension", "version": "1.0", "description": "Tôi có thể viết code cho một extension", "manifest_version": 2, "browser_action": {"default_title": "First Extension"}}

Hãy nhớ dấu phẩy sau các giá trị!

Sau khi nhập xong tệp này, hãy lưu tệp kê khai và truy cập chrome: // extensions (Chrome nên được sử dụng làm trình duyệt cho việc này). Khi ở chrome: // extensions, hãy bật chế độ dành cho nhà phát triển. Sau đó, nhấn nút 'Tải giải nén' và chọn thư mục 'tiện ích mở rộng'.

trống cuộn xin vui lòng…

Yay! Đó là một phần mở rộng, ngoại trừ… kiểu của nó nhàm chán. Nó thực sự không có gì như ngay bây giờ, nhưng nó sẽ sớm trở nên tuyệt vời.

Bước 3: Tạo biểu tượng và cập nhật tệp kê khai

Một trang web hoạt động tốt để vẽ các biểu tượng là https://www.piskelapp.com/. Ngoài ra còn có các chương trình vẽ khác để sử dụng. Các biểu tượng phải là hình vuông. Dự án này sẽ sử dụng các biểu tượng 16x16, 32x32, 48x48 và 128x128. Khi biểu tượng được tạo, hãy tạo một thư mục có tên là 'hình ảnh' trong thư mục mở rộng và đặt biểu tượng vào thư mục đó. Có thể là một ý tưởng hay nếu bạn đặt tên cho một hình ảnh theo kích thước của nó. Ví dụ: 'icon32.png'. Mã mới bên dưới:

{

"name": "First Extension", "version": "1.0", "description": "Tôi có thể viết code cho một extension", "manifest_version": 2, "browser_action": {"default_title": "First Extension", " default_icon ": {" 16 ":" images / icon16.png "," 32 ":" images / icon32.png "," 48 ":" images / icon48.png "," 128 ":" images / icon128.png "}}}

Để tham khảo về mã tệp kê khai, hãy truy cập

Bước 4: Thêm cửa sổ bật lên

Tiện ích mở rộng này sẽ có một cửa sổ bật lên. Cửa sổ bật lên là một tệp HTML (Ngôn ngữ Đánh dấu Siêu văn bản), vì vậy, trước tiên bạn nên tìm hiểu những kiến thức cơ bản về HTML, CSS và JavaScript.

Đầu tiên, lưu tài liệu dưới dạng tệp 'popup.html' trong thư mục mở rộng.

Tiếp theo, chỉnh sửa tệp kê khai để hiển thị 'popup.html' khi nó được nhấp vào. Mã mới bên dưới:

{

"name": "Tiện ích mở rộng đầu tiên", "phiên bản": "1.0", "mô tả": "Tôi có thể viết mã tiện ích mở rộng", "manifest_version": 2, "browser_action": {"default_title": "Tiện ích mở rộng đầu tiên", " default_icon ": {" 16 ":" images / icon16.png "," 32 ":" images / icon32.png "," 48 ":" images / icon48.png "," 128 ":" images / icon128.png "}," default_popup ":" popup.html "}}

Đừng quên dấu phẩy!

Bây giờ, nếu mã HTML sau được thêm vào popup.html, thì nó sẽ hiển thị 'Hello World' khi được nhấp vào.

Chào thế giới

Bước 5: Làm cho nó trông đẹp và tương tác

Nếu một dòng HTML cơ bản được nhập, thì nó sẽ được thực hiện ở mức tối thiểu nhất. Nếu CSS (Cascading Style Sheets) được thêm vào, thì nó sẽ trông ngầu hơn và nếu thêm JavaScript, thì nó có thể tương tác hơn. Hướng dẫn này sẽ không giải thích chi tiết về HTML, JavaScript và CSS, nhưng có rất nhiều tài nguyên trực tuyến. Dưới đây là mã cho chương trình 'Hello World' đơn giản, sau đó là chương trình nhiều màu sắc hơn, tương ứng:

Chào thế giới

Chào thế giới

#hello {background-color: # 000000; màu: # ff0000; border: 8px outset # 86a3b2; bán kính đường viền: 50px; biến đổi: xoay (57deg); đệm: 10px; user-select: none; con trỏ: crosshair; chuyển tiếp: biến đổi 2s; } #hello: hover {biến đổi: xoay (-417deg); }

Ví dụ thứ hai này có thể rất khó hiểu đối với người mới bắt đầu. Tuy nhiên, điều này cho bạn thấy CSS quan trọng như thế nào đối với một chương trình / tiện ích mở rộng. Bây giờ sẽ là thời điểm tốt để nghỉ ngơi và tìm hiểu một số mã HTML5 và sử dụng developer.chrome.com để tham khảo. Có thể mất một chút thời gian, nhưng một phần mở rộng tuyệt vời có thể được thực hiện.

Bước 6: Xuất bản nó lên Cửa hàng Chrome trực tuyến

Nếu ai đó đã tạo ra một tiện ích mở rộng thực sự tuyệt vời và họ muốn chia sẻ nó với mọi người, thì họ có thể xuất bản nó. Đó là, sau tất cả, điểm của một phần mở rộng. Hướng dẫn này chỉ cố gắng giải thích tệp kê khai và cách bạn có thể sử dụng nó, và nó chỉ có chương trình 'Hello World'.

Điều đầu tiên cần làm để đặt tiện ích mở rộng ở chế độ công khai là đặt thư mục tiện ích mở rộng thành tệp zip. Điều thứ hai cần làm là truy cập https://chrome.google.com/webstore/category/extensions và đăng nhập vào tài khoản google. Sau đó, nhấp vào nút bánh răng cài đặt và sau đó nhấp vào 'bảng điều khiển dành cho nhà phát triển'. Nhấn nút 'New Item' để tải lên tệp zip. Khi đó, cần phải chỉnh sửa Danh sách cửa hàng, Quyền riêng tư và Giá cả. Một phần mở rộng có thể được xuất bản dễ dàng nếu nó được gửi để xem xét.

Bây giờ phần mở rộng đã hoàn thành, hãy tiếp tục viết mã!