Để đơn giản hóa mọi thứ, chúng tôi sẽ tạo tiện ích mở rộng WikiSearch lấy từ khóa và hiển thị cho chúng tôi bản tóm tắt từ Wikipedia. Chúng tôi sẽ làm theo bốn bước đơn giản
1. Thiết lập máy chủ [Django] của chúng tôi
Chúng tôi sẽ sử dụng Django để xây dựng máy chủ phụ trợ của chúng tôi. Chúng tôi sẽ trực tiếp đi vào chi tiết thiết lập máy chủ của chúng tôi, để biết mô tả chi tiết hơn về Django, bạn có thể xem hướng dẫn chính thức của họ
Trước tiên hãy cài đặt gói cần thiết. Chúng tôi sẽ sử dụng gói Wikipedia để lấy kết quả Wikipedia
pip install wikipediaSau khi thiết lập môi trường Django của chúng tôi, Hãy xây dựng một wiki ứng dụng
python manage.py startapp wikiChúng tôi sẽ cập nhật “mysite/urls. py” để ứng dụng của chúng ta có thể truy cập được
urlpatterns = [
path['wiki/', include['wiki.urls']],
path['admin/', admin.site.urls],
]Máy chủ Django của chúng tôi hiện đã sẵn sàng hoạt động
2. Xây dựng API REST của chúng tôi
Chúng tôi sẽ liên lạc giữa tiện ích mở rộng Chrome của chúng tôi và Máy chủ Python bằng API REST. API REST đơn giản của chúng tôi sẽ hoạt động bằng cách trả về JSONResponse được cung cấp đầu vào truy vấn. Đây là phần quan trọng nhất nhưng đơn giản nhất trong toàn bộ hệ thống của chúng tôi
Để bắt đầu, chúng tôi sẽ thêm một “lượt xem. py” trong thư mục ‘wiki’. Sau đó, chúng tôi sẽ thêm một hàm nhận yêu cầu GET và gửi phản hồi JSON với kết quả được tìm nạp từ Wikipedia
Hãy cập nhật “wiki/urls của chúng tôi. py” để phản ánh những thay đổi của chúng tôi
urlpatterns = [
path['', views.index, name='index'],
url[r'^get_wiki_summary/$', views.get_wiki_summary, name='get_wiki_summary'],
]Bây giờ là lúc để kiểm tra xem API REST của chúng tôi có hoạt động không. Sau khi chạy máy chủ Django của chúng tôi, hãy điều hướng đến trang “get_wiki_summary” của chúng tôi với truy vấn mong muốn của bạn. Tôi sẽ đi với "meme". Máy chủ của tôi đang chạy trên cổng 8000, vì vậy trong trường hợp của tôi, url là - http. //127. 0. 0. 1. 8000/wiki/get_wiki_summary/?topic=“meme”
Kết quả truy vấn của API REST của chúng tôi
Vì vậy, nó đang làm việc. Bây giờ hãy đi sâu vào tiện ích mở rộng chrome của chúng tôi
3. Thiết lập Tiện ích mở rộng Chrome của chúng tôi
Chúng tôi sẽ xây dựng một tiện ích mở rộng đơn giản với mẫu giao diện người dùng rất cơ bản có tính năng nhập văn bản. Một lần nữa, chúng tôi sẽ chỉ thảo luận về các phần liên quan trong hướng dẫn của chúng tôi. Nếu bạn muốn hiểu từ cốt lõi, Codevolution có một loạt bài tuyệt vời để hiểu những điều cơ bản về Tiện ích mở rộng của Chrome
Giao diện người dùng của chúng tôi trông như thế này -
FrontEnd đơn giản của chúng tôi
4. Thiết lập kết nối Cross-Origin
Mỗi phần mở rộng đang chạy tồn tại trong nguồn gốc bảo mật riêng của nó. Để kết nối với máy chủ python của chúng tôi, máy chủ đó nằm trong máy chủ cục bộ của chúng tôi. 8000, chúng tôi cần sử dụng XMLHttpRequest nhiều nguồn gốc
Quy trình làm việc của chúng tôi sẽ như thế này -
- Tập lệnh bật lên của chúng tôi sẽ giao tiếp với tập lệnh nền thông qua Truyền tin nhắn. [dòng 10]
- Tập lệnh nền của chúng tôi sẽ gửi yêu cầu GET đến máy chủ của chúng tôi với từ khóa đầu vào và gửi lại cho cửa sổ bật lên. [dòng 12–15]
- Tập lệnh bật lên của chúng tôi sẽ hiển thị phản hồi của máy chủ dưới dạng cảnh báo/thông báo. [dòng 13–23]
Thiết lập cơ bản của chúng tôi gần như đã hoàn tất. Điều cuối cùng chúng ta cần là thêm Quyền truy cập vào Localhost trong tệp kê khai của chúng ta. Nếu bạn đang sử dụng bất kỳ máy chủ chuyên dụng nào để lưu trữ, [ví dụ: Ngrok], bạn cũng sẽ cần thêm máy chủ đó vào Quyền
"permissions":
[ ...,
"//127.0.0.1:8000/",
...,
...,
...
]Bây giờ hãy kiểm tra xem nó có hoạt động bình thường không. Sau khi mở giao diện người dùng của chúng tôi, cung cấp một từ khóa bạn muốn tìm kiếm. Hãy thử “COVID19”, một mối quan tâm lớn hiện nay
từ truy vấn của chúng tôi
và Bingo. Bây giờ chúng tôi sẽ được nhắc với một cảnh báo/thông báo với tóm tắt truy vấn của chúng tôi
Cảnh báo tiện ích mở rộng của chúng tôi
Thông báo tiện ích mở rộng của chúng tôi
Tiếp theo là đâu…
Chúng tôi đã xây dựng thành công tiện ích mở rộng chrome rất cơ bản của mình với Máy chủ Python. Bây giờ là lúc sử dụng khái niệm cơ bản này để tạo một dự án đầy đủ. Ý tưởng cơ bản là giống nhau, chúng ta chỉ cần sửa đổi API REST của mình để phù hợp với nhu cầu của mình. Thay vì gửi lại câu trả lời từ Wikipedia, bạn phải sử dụng đầu ra của mô hình Machine Learning hoặc các phương tiện liên quan khác. Toàn bộ mã của hướng dẫn này có sẵn ở đây
Tập lệnh sẽ chạy trên máy chủ của riêng bạn. Bạn có thể chạy bất kỳ tập lệnh Brython nào từ web. Sử dụng Brython, bạn có thể chỉ cần nhập mã Python bên trong các thẻ tập lệnh. Hãy xem ví dụ về Brython này hoặc chỉ cần duyệt qua thư viện
Phương pháp B. Biên dịch Python sang Javascript. [không có máy chủ, tiện ích mở rộng thuần túy]
Có một số công cụ để biên dịch Python sang Javascript. Rapydscript hoạt động tốt, Pyjs không hoạt động tốt với chrome [yêu cầu tham số đặc biệt khi bắt đầu].
Cài đặt Rapydscript với.
sudo apt-get install npm
sudo ln -s /usr/bin/nodejs /usr/bin/node
sudo npm install rapydscript
Tải xuống mã từ trang web này.
Tải xuống mã mở rộng
Thay đổi tệp /src/hello. py cho bạn cần.
# Example Python script
# [for rapydscript, a python to javascript compiler]
#def doHelloMessage[]:
# alert['hello']
#doHelloMessage[]
# modify html page
document.getElementById["result"].innerHTML = 'Compiled Python script in Chrome'
# write into log
console.log['hello from python']
Chạy
./make.sh
Bạn có thể tìm thấy phần mở rộng của mình trong /compiledpythonextension/. Tải nó trong chrome dưới dạng tiện ích mở rộng chưa được đóng gói và xem nó hoạt động. -]
kết luận
Plugin Chrome được tạo bằng HTML, JavaScript và CSS. Chúng tôi có thể sử dụng Python để tạo các tiện ích mở rộng Chrome thông thường bằng trình biên dịch Python sang Javascript [Rapydscript]
Để lại bình luận. -]
Được đăng trong python►tutorials
2015-04-16
- trình duyệt
- trình duyệt Chrome
- con trăn
Để lại câu trả lời.
Đừng điền vào đây nếu bạn là con người.
Tên
Địa chỉ emailThông báo
Gửi tin nhắn
Sam • Thứ Hai, ngày 04 tháng 5 năm 2015
Khủng khiếp. Tốt lắm
shubham aggarwal • Thứ ba, ngày 03 tháng 5 năm 2016
thật tuyệt vời. ]
Andrey Makarov • Thứ Sáu, ngày 30 tháng 6 năm 2017
Tôi đã dùng thử Flexx PyScript ngày hôm qua và tôi nghĩ nó hoạt động tốt hơn rapydscript. Ít nhất nó hỗ trợ lambdas