sách gpt4 ăn đã đi

Chuỗi phát triển plug-in Chrome 1: Phát triển thực tế về trình kết thúc cửa sổ bật lên

In lại Tác giả: qq735679552 Thời gian cập nhật: 29-09-2022 22:32:09 31 4
mua khóa gpt4 giày nike

CFSDN nhấn mạnh vào giá trị tạo ra nguồn mở và chúng tôi cam kết xây dựng nền tảng chia sẻ tài nguyên để mọi nhân viên CNTT có thể tìm thấy thế giới tuyệt vời của bạn tại đây.

Bài viết trên blog CFSDN này Chuỗi phát triển plug-in Chrome 1: Phát triển thực tế của trình kết thúc cửa sổ bật lên được tác giả sưu tầm và biên soạn. Nếu bạn quan tâm đến bài viết này, hãy nhớ thích nó.

1. Plug-in là gì?

Plug-in là những chương trình được viết theo những giao diện lập trình ứng dụng tiêu chuẩn nhất định, trong khi plug-in của chrome là những chương trình nhỏ chạy trên trình duyệt chrome, có thể giúp chúng ta giải quyết một số việc lặp đi lặp lại, tẻ nhạt trong công việc và học tập.

2. Kiến thức cơ bản về plug-in.

Đối với các plug-in chrome, tệp cấu hình cốt lõi phải là express.json. Bằng cách sử dụng nó, chúng ta có thể xác định tập lệnh nào sẽ được thực thi trên trang nào vào thời gian nào và hành vi nào sẽ xảy ra. json đầu tiên:

{ // Tên tiện ích mở rộng "name": "MyExtension", // Version. Nó bao gồm 1 đến 4 số nguyên. Sử dụng "." để phân tách nhiều số nguyên "version": "1.0", // số phiên bản của tệp kê khai. Nó phải là 2 bắt đầu từ Chrome 18 "manifest_version": 2, // Description. Trong vòng 132 ký tự "description": ", // Biểu tượng mở rộng. Kích thước được đề xuất 16, 48, 128 "icons": { "16": "image/icon-16.png", "48": "image/icon- 48 .png", "128": "image/icon-128.png" }, // Ngôn ngữ "default_locale": "en", // Quản lý biểu tượng ở bên phải thanh địa chỉ, bao gồm cài đặt cho biểu tượng và trang bật lên, v.v. // Nên giữ ít nhất một cài đặt, nếu không biểu tượng tiện ích mở rộng sẽ tối "browser_action": { "default_icon" : "image/icon-128.png", "default_title ": "My Message", "default_popup": "html/browser.html" }, // Đính kèm biểu tượng ở cuối thanh địa chỉ. , v.v. "page_action": { "default_icon": "image/icon-48.png", "default_title": "My Test", "default_popup": "html/page.html" }, // Theme, dùng để thay đổi giao diện của toàn bộ trình duyệt " theme ": {}, // Chỉ định URL mà tiện ích mở rộng cần chuyển đến "app": {}, // Chỉ định môi trường chạy nền và tập lệnh chạy của quy trình tiện ích mở rộng "background": { "scripts": [ "lib/jquery-3.3.1.min.js", "js/background.js" ], "page: //html/background.html" }, // Thay thế trang "chrome_url_overrides": { "pageToOverride": " html/overrides.html" }, // Chỉ định tập lệnh/chèn css sẽ chạy trên trang web và thời gian thực hiện/chèn "content_scripts": [{ "matches": ["https://www.baidu.com/*"], "css": ["css/mystyles.css"], "js": ["lib/jquery-3.3.1.min.js", " js/content.js"], "run_at": "document_idle" }], // Chính sách bảo mật "content_security_policy": ", "file_browser_handlers": [], // Trang chủ chính thức của tiện ích mở rộng "homepage_url": "http://xxx", // Cấu hình của plugin ở chế độ bảo mật "ẩn danh": "mở rộng", // Mô tả ý định hoạt động của người dùng "intents": {} , // Mã định danh duy nhất mở rộng. Không cần chỉ định thủ công "key": ", // Phiên bản tối thiểu của chrome cần thiết cho tiện ích mở rộng "minimum_chrome_version": "1.0", // Ánh xạ mô-đun xử lý cục bộ và thông báo "nacl_modules": [], // Có cho phép không chạy ngoại tuyến" offline_enabled": true, // ominbox là thanh địa chỉ. Được sử dụng để phản hồi các sự kiện đầu vào trong thanh địa chỉ. Trang tùy chọn Được sử dụng để chuyển đến cài đặt tùy chọn trên trang quản lý tiện ích mở rộng "options_page": "aFile.html", // Đăng ký quyền "quyền": [ "https://www.baidu.com/*", " nền" , "tabs" ], // Tiện ích mở rộng. Có thể gọi tiện ích mở rộng của bên thứ ba là "plugin": [{ "path": "extension_plugin.dll", "public": true }], // Chỉ định công nghệ đặc biệt được yêu cầu. Hiện tại chỉ hỗ trợ "3D": {}, // Tự động nâng cấp "update_url": "http://path/to/updateInfo.xml", // Chỉ định đường dẫn tài nguyên, đó là Chuỗi. Mảng "web_accessible_resource": []}

rất nhiều? Hãy bình tĩnh lại bằng cách viết một số mã trước. Đừng sợ. Mặc dù có rất nhiều thuộc tính có sẵn nhưng chỉ có một số thuộc tính được sử dụng phổ biến.

1. tên mở rộng tên.

2. version Phiên bản của plug-in.

3. Phiên bản tệp cấu hình tệp kê khai express_version.

4. mô tả Mô tả về chức năng của trình cắm thêm.

5. biểu tượng Đối với biểu tượng của plugin, bạn có thể tìm thấy một biểu tượng đẹp mắt cho plugin.

6. browser_action có thể xác định biểu tượng của trình cắm, trang bật lên khi nhấp vào trình cắm và tiêu đề của trình cắm. Bạn nên luôn giữ một thuộc tính này. trực tiếp, biểu tượng sẽ có màu xám và nó sẽ sáng lên sau khi được đặt.

7. Trang nền nền, mở rộng môi trường chạy nền của quy trình và có thể chặn các yêu cầu sửa đổi, v.v.

8. Tập lệnh nội dung Content_scripts có thể chỉ định tập lệnh hoặc tài nguyên css nào sẽ chèn vào trang nào vào thời điểm nào.

9. Các mục ứng dụng cấp quyền, chẳng hạn như quyền lưu trữ, quyền yêu cầu chặn webRequest, webRequestBlocking, v.v.

Sau khi hiểu rõ những kiến ​​thức cơ bản này, công việc còn lại là viết code theo chức năng thực tế mà chúng ta muốn đạt được. Bây giờ chúng ta chính thức bắt đầu viết plug-in đầu tiên của mình. Vì đây là plug-in đầu tiên, mặc dù chức năng rất đơn giản. , nhưng chúng ta cũng cần đặt cho nó một cái tên vang dội là "Plug-in Terminator".

Đầu tiên, chúng ta mở liên kết tài liệu: http://webpack.wuhaolin.cn. Đây là một cuốn sách trực tuyến có tên "Giải thích về Webpack bằng ngôn ngữ đơn giản và đơn giản". Quay lại tổng thể, khi chúng ta xem chương Trong chương đầu tiên, mọi thứ đều ổn, nhưng đến chương thứ hai, một cửa sổ bật lên rất khó chịu xuất hiện.

Chuỗi phát triển plug-in Chrome 1: Phát triển thực tế về trình kết thúc cửa sổ bật lên

Tất nhiên, với tư cách là lập trình viên, chúng ta không được bối rối trước cửa sổ bật lên nhỏ này. Sau đó, chúng tôi đã thử lần đầu tiên, mở công cụ dành cho nhà phát triển, tìm thấy nút nơi đặt cửa sổ bật lên và xóa nó, nhưng khi chúng tôi gặp phải. cuộn trang Lúc đó cái hộp bật lên chết tiệt lại xuất hiện, biểu thị có mã giám sát nút cửa sổ bật lên, khi không tồn tại thì nó trực tiếp thêm một cái mới. Sau đó, chúng tôi đã thực hiện lần thử thứ hai. Vì bạn không cho phép tôi xóa nút nên chúng tôi cũng đã tìm thấy nút cửa sổ bật lên và thêm kiểu:

Hiển thị: không có! quan trọng,

Mục đích của việc sử dụng !important là tăng mức độ ưu tiên của kiểu để cửa sổ bật lên luôn ẩn sau khi viết kiểu này, cửa sổ bật lên sẽ bị ẩn và sẽ không xuất hiện lại khi cuộn mà khi chúng ta nhìn vào. các chương khác Hoặc khi hộp bật lên khó chịu bật lên trở lại khi làm mới trang, nó có thể tự động ẩn không?

Đã đến lúc thể hiện công nghệ thực sự. Chúng tôi đã đề cập đến trường content_scripts trước khi giới thiệu kiến ​​thức cơ bản. Nó có thể xác định tập lệnh hoặc tài nguyên css nào sẽ chèn vào trang nào vào thời điểm nào. đã được tải. Chỉ cần ẩn mã css của cửa sổ bật lên.

.gitbook-plugin-modal { hiển thị: không có! quan trọng;}

tập tin cấu hình bảng kê khai:

{ "name": "PopBlock", "version": "1.0", "manifest_version": 2, "description": "移除闹人的弹框", "browser_action": { "default_title": "PopBlock" } , "content_scripts": [{ "khớp": ["http://webpack.wuhaolin.cn/*"], "css": ["css/popup.css"], "run_at": "document_end" }]}

Điều này không thêm biểu tượng. Bạn có thể tự thêm nó. Sau đó, chúng tôi sử dụng chế độ nhà phát triển trình duyệt Chrome để tải plugin mà chúng tôi đã viết và chúng tôi sẽ thấy rằng sẽ không còn các cửa sổ bật lên gây phiền nhiễu cản trở chế độ xem của chúng tôi.

Chuỗi phát triển plug-in Chrome 1: Phát triển thực tế về trình kết thúc cửa sổ bật lên

Chuỗi phát triển plug-in Chrome 1: Phát triển thực tế về trình kết thúc cửa sổ bật lên

Phần này kết thúc tại đây. Trong loạt bài này, tôi sẽ cố gắng viết thêm một số plug-in thực tế hơn cùng các bạn.

Bấm vào đây để tải xuống gói mã nguồn của trường hợp bài viết này.

Đến đây là kết thúc bài viết về loạt bài phát triển plug-in Chrome 1: Thực hành phát triển trình kết thúc cửa sổ bật lên. Để biết thêm nội dung phát triển plug-in Chrome có liên quan, vui lòng tìm kiếm các bài viết trước của tôi hoặc tiếp tục duyệt các bài viết liên quan bên dưới. tương lai tôi! .

Liên kết gốc: https://www.deanhan.cn/chrome-plugin-tools-1.html.

Cuối cùng, bài viết này về loạt bài phát triển plugin Chrome 1: Quá trình phát triển thực tế của trình kết thúc cửa sổ bật lên kết thúc tại đây. Nếu bạn muốn biết thêm về loạt bài phát triển trình cắm thêm Chrome 1: Quá trình phát triển thực tế của trình kết thúc cửa sổ bật lên, vui lòng tìm kiếm CFSDN. Hoặc tiếp tục duyệt các bài viết liên quan. Tôi hy vọng bạn sẽ ủng hộ blog của tôi trong tương lai! .

31 4 0
qq735679552
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress