Hướng dẫn viết extension chrome

Tạo một extension cơ bản

Phần này bản thân đã lí giải bạn thêm 1 extension cơ bạn dạng vào Chrome.Bắt đầu với việc sinh sản một tlỗi mục Hello Extensions để chứa những file mang lại extension, tiếp sau chúng ta chế tạo ra một tệp tin tên là manifest.json cùng thêm đoạn code sau:

"name": "Hello Extensions", "description" : "Base Level Extension", "version": "1.0", "manifest_version": 2 Tiếp theo bạn cần thêm extension vừa sinh sản vào Chrome:

Mngơi nghỉ trang cai quản extension qua băng thông chrome://extensions.

Bạn đang xem: Hướng dẫn viết extension chrome

Hoặc bạn cũng có thể chọn trên chrome menu

Bật chính sách Developer.

Cliông chồng vào LOAD UNPACKED với lựa chọn tlỗi mục Hello Extensions.

Giờ chúng ta cũng có thể bắt gặp extension của bản thân trên tkhô nóng menu

Các thành phần chính

Một extension rất có thể gồm hoặc ko một số trong những phần chính sau:

Thành phầnMô tả

File manifest.json	Với file này chúng ta có thể hỗ trợ các lên tiếng về extension của khách hàng, version, name, ibé, các quyền cần thiết, ... Xem thêm: Sửa Lỗi Không Nhìn Thấy Máy Khác Trong Mạng Lan Win 7 Win 10
Background script	Đây là tệp tin bạn xử trí các sự kiện của trình duyệt: load extensions, dìm message trường đoản cú nội dung script hoặc extension không giống, ...
UI Elements	Là phần đồ họa liên quan với người dùng của extension, nó hoàn toàn có thể là context trên trang web, hộp tra cứu kiếm bên trên tkhô cứng thực đơn, hoặc phím tắt, ... thường xuyên là 1 trong popup hiện ra khi chúng ta bấm chuột Icon của extension bên trên Chrome menu
Content script	Là đông đảo đoạn mã đã điều khiển xe trên website mà nhiều người đang xem

Background script

Giờ cùng với ví dụ Hello Extensions ở bên trên các bạn hãy thêm đoạn code sau vào file manifest.json:

"background": "scripts": <"background.js">, "persistent": false quý khách hãy sinh sản thêm file background.js:

chrome.runtime.onInstalled.addListener(function() alert("Hello Extensions"););Giờ lúc ngay trong lúc cài đặt extensions, sẽ có một alert thông báo hiện ra. Đây là 1 trong ví dụ đơn giản và dễ dàng về background script giúp cho bạn dễ dàng tưởng tượng.

UI Elements

Mình đã lấy ví dụ đơn giản là một trong popup đang chỉ ra khi bạn click chuột Inhỏ của Extension trên Chrome menu.

Trong tệp tin manifest.json các bạn thêm đoạn code sau:

"browser_action": "default_popup": "popup.html" Giờ trong tệp tin popup.html:

Vậy là mình bao gồm chiếc extension nhấp chuột thì sẽ hiện tại một đoạn Clip OST của phyên Itaewon Class :v

Content script

Trước tiên bạn cần phải biết nội dung script hoàn toàn có thể chạy xe trên website bạn đang xem tức thị chúng ta có thể làm việc cùng với DOM, Hotline các Web API, ... nhỏng các script thông thường mặc dù nội dung script chạy xe trên một môi trường thiên nhiên độc lập với các script trên trang web bao gồm, tức thị nếu khách hàng trên website của người tiêu dùng có một thỏng viện JS nhỏng Jquery bạn sẽ không thể thực hiện nó trong nội dung script.

Giờ họ mang lại cùng với ví dụ, chúng ta thêm đoạn code sau vào file manifest.json:

"content_scripts": < "matches": <"*://*/*">, "js": <"contentScript.js"> >Và vào tệp tin contentScript.js:

var div = document.createElement("div");div.style = "position: fixed; bottom: 0; right: 0; z-index:9999";div.innerHTML = ``;document.body.appendChild(div);Load lại extension: