Chào mừng bạn đến với Hướng dẫn Bắt đầu
Xuất bản ngày Thứ ba, ngày 4 tháng 10 năm 2022
Mục lục
- Khái niệm phát triển mở rộng
- hướng dẫn mở rộng
- Chia sẻ phản hồi của bạn
Chào mừng bạn đến với Hướng dẫn Bắt đầu. Mục đích của trang này là mô tả từng bài viết và cách chia sẻ phản hồi của bạn
# Khái niệm phát triển mở rộng
Tiện ích mở rộng 101 Trình bày ngắn gọn một số khái niệm cơ bản về phát triển Tiện ích mở rộng của Chrome như công nghệ web và các thành phần tiện ích mở rộng thường được sử dụng. Ngoài ra, nó bao gồm những điều cần lưu ý khi thiết kế và phân phối tiện ích mở rộng trong Cửa hàng Chrome trực tuyến. Khái niệm cơ bản về phát triểnGiới thiệu quy trình phát triển tiện ích mở rộng bằng cách tạo ví dụ Xin chào, Tiện ích mở rộng. Nó hướng dẫn tải phần mở rộng trong quá trình phát triển, định vị nhật ký và lỗi, chọn cấu trúc dự án và sử dụng Bản mô tả# Hướng dẫn mở rộng
Thời gian đọc Thật tốt khi biết chúng ta cần bao nhiêu thời gian để đọc xong một bài báo. Thời gian đọc hướng dẫn bạn cách chèn một phần tử chứa thời gian đọc ước tính trên mọi trang tài liệu mở rộng. Chế độ tập trung Loại bỏ sự lộn xộn thừa khỏi một trang cho phép tâm trí của chúng ta tập trung vào thông tin phù hợp nhất. Chế độ tiêu điểm trình bày cách thay đổi kiểu trang tài liệu mở rộng và ẩn một số yếu tố gây mất tập trung. Trình quản lý tab Trong khi nghiên cứu phát triển tiện ích mở rộng, bạn có thể kết thúc với nhiều tab tài liệu trên nhiều cửa sổ. Trình quản lý tab tổ chức tiện ích mở rộng Chrome và tab tài liệu cửa hàng Chrome trực tuyến của bạnCác hướng dẫn này không chỉ hướng dẫn bạn cách xây dựng các tiện ích mở rộng trong thế giới thực mà còn cố gắng chia sẻ các mẹo phát triển và các phương pháp hay nhất. Ngoài ra, việc sử dụng các tiện ích mở rộng này sẽ cải thiện trải nghiệm của bạn khi đọc tài liệu về tiện ích mở rộng
Mỗi hướng dẫn bao gồm các phần sau
- Nhiệm vụ mà tiện ích mở rộng sẽ thực hiện
- Các bài học sẽ được đề cập
- Những gì bạn cần biết trước khi bắt đầu
- Hướng dẫn từng bước về cách xây dựng tiện ích mở rộng
- Cách tải và kiểm tra tiện ích mở rộng
Nếu bạn sẵn sàng đối mặt với thử thách, chúng tôi đã bao gồm một phần có một số ý tưởng về cách tùy chỉnh hoặc thêm các tính năng khác vào tiện ích mở rộng của bạn
# Chia sẻ phản hồi của bạn
Chúng tôi rất vui khi được nghe từ bạn. Đây là hai cách bạn có thể đóng góp
Cải thiện các hướng dẫn hiện cóNếu bạn thấy điều gì đó sai hoặc không rõ ràng, hãy báo cáo lỗi trên kho lưu trữ GitHub của chúng tôi. Yêu cầu hướng dẫn dành cho người mới bắt đầuNếu bạn có ý tưởng về một hướng dẫn dành cho người mới bắt đầu khác, hãy tạo một vấn đề trên kho lưu trữ GitHub của chúng tôi, chọn "Yêu cầu hướng dẫn mở rộng" và điền vào biểu mẫuChúng tôi hy vọng các hướng dẫn Bắt đầu mới sẽ giúp bạn cảm thấy tự tin và được hỗ trợ khi bắt đầu hành trình phát triển tiện ích mở rộng của mình
Công việc nào cũng vậy, sau một thời gian chúng ta sẽ tự nhận thấy có những thứ cứ lặp đi lặp lại hàng ngày. Mình vậy, công việc của mình được thực hiện rất nhiều trên Google Chrome và sẽ thực sự hữu ích nếu như chúng ta có riêng cho một tiện ích mở rộng để tự động những công việc đó cũng như những công việc lặp đi lặp lại mơn mởn, cũng là một cách để tiết lộ . Bạn có thể mở thêm các chức năng khác cho một trang web mà bạn sử dụng nó thường xuyên, lấy dữ liệu, lưu trữ. và nhiều thứ hay ho khác, bạn có thể làm với một tiện ích mở rộng
Constructor of a Chrome Extension
Về cơ bản, một Chrome Extension chủ yếu sẽ được viết bằng Javascript và HTML. Bạn có thể tổ chức các tùy chọn thư mục sao cho phù hợp và thuận lợi nhất trong quá trình code. Với mình thì sẽ như thế này.
Lâm @Lâm
Theo dõi
1. 6K 33 37
Đã đăng vào ngày 11 tháng 20 năm 2019 6. 12 SA 9 phút đọc
5. 9K
7
9
- Report
- Add to series of me
Bài đăng này đã không được cập nhật trong 3 năm
Công việc nào cũng vậy, sau một thời gian chúng ta sẽ tự nhận thấy có những thứ cứ lặp đi lặp lại hàng ngày. Mình vậy, công việc của mình được thực hiện rất nhiều trên Google Chrome và sẽ thực sự hữu ích nếu như chúng ta có riêng cho một tiện ích mở rộng để tự động những công việc đó cũng như những công việc lặp đi lặp lại mơn mởn, cũng là một cách để tiết lộ . Bạn có thể mở thêm các chức năng khác cho một trang web mà bạn sử dụng nó thường xuyên, lấy dữ liệu, lưu trữ. và nhiều thứ hay ho khác, bạn có thể làm với một tiện ích mở rộng
Constructor of a Chrome Extension
Về cơ bản, Tiện ích mở rộng Chrome chủ yếu sẽ được viết bằng Javascript và HTML. Bạn có thể tổ chức các tùy chọn thư mục sao cho phù hợp và thuận lợi nhất trong quá trình code. Với mình thì sẽ như thế này. Dưới đây, chúng ta sẽ đi sâu vào bên trong để tìm hiểu chức năng của từng tệp
Chức năng của các thành phần
1. rõ ràng. json
This is file config for extension of them ta. Nó chứa thông tin cơ bản về phần mở rộng, các tập tin sẽ được chạy, inject
{
"name": "Nhaccuatui Extension",
"version": "0.0.1",
"manifest_version": 2,
"description" : "Extension for Nhaccuatui",
"icons": {
"16": "images/icon.png",
"48": "images/icon.png"
},
"browser_action": {
"default_icon": {
"19": "images/icon.png",
"38": "images/icon.png"
},
"default_title": "Nhaccuatui Extension",
"default_popup": "popup.html"
},
"background": {
"page": "background.html",
"persistent": false
},
"content_scripts": [
{
"matches": [
"*://nhaccuatui.com/bai-hat/*",
],
"js": [
"scripts/content.js",
],
"css": [
"styles/font.css",
"styles/main.css"
],
"run_at": "document_idle"
}
],
"permissions": [
"clipboardWrite",
"storage"
]
}
2. Thuộc tính xác định tên tiện ích mở rộng của bạndoctype html> My Extension This is popup page
3. Phiên bản hiện tại, Chrome sẽ dựa vào đây để xác định xem tiện ích mở rộng của bạn có bản cập nhật mới hay khôngdoctype html> My Extension This is popup page
4. Specify version of main file manifest. jsondoctype html> My Extension This is popup page
5. Miêu tả chi tiết hơn về tiện ích mở rộngdoctype html> My Extension This is popup page
6. Biểu tượng của tiện ích mở rộng sẽ được hiển thị trên cửa hàng. Trong trường hợp này, mình để chúng trong thư mục hình ảnhdoctype html> My Extension This is popup page
7doctype html> My Extension This is popup page
8. Biểu tượng sẽ được sử dụng để hiển thị trên trình duyệtdoctype html> My Extension This is popup page
9. Tiêu đề sẽ được hiển thị khi di chuột vào biểu tượng của tiện ích mở rộngdoctype html> My Extension This is popup page
0. Đây là tệp HTML sẽ được hiển thị khi bạn mở tiện ích mở rộng ra. Chúng ta sẽ nói rõ hơn về tập tin này trong phần sau
1
2. Đây sẽ là trang chạy bên dưới và thông thường sẽ chỉ chứa một thẻ script để đưa tệp javascript vào
3. Là cờ có giá trị là
4 hoặc
5. Xác định nền trang sẽ được chạy như thế nào
6
7. Xác định các trang web mà bạn muốn thêm nội dung của mình vào
8. Là danh sách các tệp javascript sẽ được đưa vào các trang web đã được khai báo bên trên
9. Tương tự như thuộc tính
8 nhưng là danh sách các tệp css
01. Thời điểm đưa nội dung tệp vào bên trong trang webdoctype html> My Extension This is popup page
02. Khai báo quyền hạn truy cập cho tiện ích mở rộngdoctype html> My Extension This is popup page
2. kịch bản nội dung
Đây là các thành phần được đưa vào các trang web mà bạn khai báo thuộc tính
doctype html>
My Extension
This is popup page
3. trang bật lên
Đây là trang sẽ chạy và hiển thị khi bạn mở tiện ích mở rộng của mình lên. Cấu trúc của nó cũng tương tự như các trang HTML khác. Trong trường hợp của mình thì đó trang
doctype html>
My Extension
This is popup page
doctype html>
My Extension
This is popup page
Bạn sẽ tạo giao diện chính cho tiện ích mở rộng của mình tại đây. Trang sẽ được tải lại mỗi khi tiện ích mở rộng được mở. Bạn có thể sử dụng
doctype html>
My Extension
This is popup page
4. trang nền
Cũng giống như trang
doctype html>
My Extension
This is popup page
doctype html>
My Extension
This is popup page
doctype html>
My Extension
This is popup page
Mặc dù trang này sẽ được tự động sinh ra và tự động đưa vào tệp
doctype html>
My Extension
This is popup page
Tệp
doctype html>
My Extension
This is popup page
Giao tiếp giữa các thành phần
Vừa rồi chúng ta đã hiểu chức năng của các thành phần trong một tiện ích mở rộng. Như chúng ta đã biết, tệp
doctype html>
My Extension
This is popup page
doctype html>
My Extension
This is popup page
doctype html>
My Extension
This is popup page
Chúng ta sẽ cùng nhau làm một ví dụ để hiểu rõ hơn vấn đề này nhé. Tiện ích mở rộng của chúng ta sẽ có chức năng là lưu lại các bài hát mà mình thích trên https. //www. nhaccuatui. com/ để hàng ngày có thể nghe lại chúng mà không mất công tìm kiếm. Tất nhiên là thực tế thì trang nhạc nào cũng có chức năng tạo playlist rồi. Nào hãy cùng bắt đầu thôi
doctype html>
My Extension
This is popup page
32
doctype html>
My Extension
This is popup page
Trong phần này, chúng tôi sẽ xử lý việc chèn thêm vào một nút trên trang mà khi nhấp vào nút đó, chúng tôi sẽ lấy dữ liệu ở trang hiện tại và gửi lên xử lý cho
doctype html>
My Extension
This is popup page
doctype html>
My Extension
This is popup page
Để lưu ý rằng, thuộc tính của
doctype html>
My Extension
This is popup page
doctype html>
My Extension
This is popup page
doctype html>
My Extension
This is popup page
09
doctype html>
My Extension
This is popup page
Vừa rồi ở
doctype html>
My Extension
This is popup page
doctype html>
My Extension
This is popup page
doctype html>
My Extension
This is popup page
Khi nhận được tin nhắn, chúng tôi thực hiện lưu dữ liệu vào trong
doctype html>
My Extension
This is popup page
doctype html>
My Extension
This is popup page
33
doctype html>
My Extension
This is popup page
Như đã thấy chúng ta sử dụng
doctype html>
My Extension
This is popup page
doctype html>
My Extension
This is popup page
doctype html>
My Extension
This is popup page
doctype html>
My Extension
This is popup page
Như vậy, mỗi lần tiện ích mở rộng được mở ra, chúng ta sẽ thấy danh sách các bài hát mà mình đã lưu được hiển thị ở đây. Bạn có thể bổ sung thêm các tính năng khác như tự động phát các bài hát trong danh sách, hay tải tất cả chúng về máy của mình
Tải phần mở rộng
- Các bạn vào google chrome, gõ vào địa chỉ
68doctype html> My Extension This is popup page - Nhấp vào nút
69 bên góc trái màn hìnhdoctype html> My Extension This is popup page - Tìm đến thư mục chứa phần mở rộng của chúng ta, thế là xong
Tổng kết
Vừa rồi chúng ta đã tìm hiểu về các thành phần của tiện ích mở rộng chrome cũng như các chức năng và sự giao tiếp giữa chúng. Hi vọng với những chia sẻ đó, các bạn sẽ có những phần hiểu rõ hơn về cấu trúc của một extension để có thể tự tạo riêng cho mình một extension, phục vụ các nhu cầu của bản thân.
Dưới đây là một phần mở rộng phục vụ cho công việc của mình. Chức năng của nó là lưu lại dữ liệu của các ticket, tạo template pull request, tạo tin nhắn gửi cho team trên chatwork. Các bạn có thể tham khảo tại đây nhé https. //github. com/dongoclam/rg-plugin