Tạo tiện ích chrome để chạy javascript trên một trang
Tôi đã giải quyết vấn đề bằng cách chèn một nút tập lệnh mới vào trang hiện tại. Thẻ tập lệnh mới chứa javascript tùy chỉnh của tôi sẽ chạy ngay lập tức. Có một vấn đề với giải pháp của tôi - bạn không thể lấy lại kết quả cho tiện ích mở rộng. Vì vậy, nếu bạn cần chạy một cái gì đó, nhưng bạn không quan tâm đến kết quả, vui lòng sử dụng đoạn mã sau trong tệp nội dung của bạn
var yourCustomJavaScriptCode = '...'; var script = document.createElement('script'); var code = document.createTextNode('(function() {' + yourCustomJavaScriptCode + '})();'); script.appendChild(code); (document.body || document.head).appendChild(script);Cập nhật. bạn có thể nhận được_______1_______Đó là vì Chính sách bảo mật nội dung. Trong trường hợp của tôi, điều này xảy ra khi tôi đang làm việc với các trang web https. Vì vậy, có vẻ như giải pháp phức tạp này, giải pháp có chèn thẻ script, không hoạt động. May mắn thay, Chrome cung cấp một giải pháp khác - chrome. tab. phương thức execScript. chrome.tabs.getSelected(null, function(tab){ chrome.tabs.executeScript(tab.id, {code: "alert('test');"}, function(response) { }); });Tập lệnh này nên được thêm vào bên trong tập lệnh nền của bạn. Có một phương pháp tương tự để chèn CSS - insertCSS. Tin xấu là mã js gửi tới execScript không thể truy cập mã js khác có sẵn trên trang của bạn. Bạn chỉ có quyền truy cập lại vào các phần tử DOM. Một cái gì đó như thế này sẽ không hoạt động chrome.tabs.executeScript(tab.id, {code: "MyGlobalObject.method();"});Tuy nhiên nó vẫn hữu ích, bởi vì nó hoạt động. chrome.tabs.executeScript(tab.id, {code: "alert(document.querySelector('body'));"}); Tiện ích mở rộng của Chrome là các chương trình nâng cao chức năng của trình duyệt theo một cách nào đó. Có thể bạn đã sử dụng một hoặc hai tiện ích mở rộng, có thể là trình quản lý mật khẩu hoặc một số tiện ích bổ sung về quyền riêng tư. Bạn đã bao giờ muốn tạo tiện ích mở rộng của riêng mình nhưng băn khoăn không biết quá trình này sẽ khó đến mức nào? Show
Dự án JavaScript dành cho người mới bắt đầu (sê-ri 8 phần)
Bài viết này sẽ hướng dẫn bạn quy trình tạo tiện ích mở rộng đầu tiên của Chrome. Chúng tôi sẽ xây dựng một tiện ích mở rộng thay thế trang tab mới trong trình duyệt bằng một ảnh ngẫu nhiên từ Bapt. Đó là phiên bản thu nhỏ của tiện ích mở rộng Stellar Photos mà tôi đã tạo cách đây vài năm khi lần đầu tiên tôi học cách tạo tiện ích mở rộng của Chrome. Đây là minh chứng cho thấy tiện ích mở rộng đã hoàn thành sẽ trông như thế nào Tôi cũng đã bao gồm một số mẹo để gỡ lỗi tiện ích mở rộng của Chrome cũng như liên kết đến các tài nguyên nơi bạn có thể tìm hiểu cách gửi tiện ích mở rộng của mình tới cửa hàng Chrome trực tuyến. Điều này sẽ có ích sau này khi bạn tạo tiện ích mở rộng của riêng mình. Mã hoàn chỉnh cho dự án demo này có thể được tìm thấy ở đây điều kiện tiên quyếtBạn cần có kiến thức cơ bản về HTML, CSS, JavaScript và dòng lệnh để làm theo hướng dẫn này. Bạn cũng cần cài đặt phiên bản Chrome mới nhất trên máy tính của mình. Tôi đã kiểm tra mã được sử dụng cho dự án này trên Chrome 85 nhưng mã này sẽ tiếp tục hoạt động trên mọi phiên bản mới hơn Lấy các tập tin khởi độngCác tệp khởi động cho hướng dẫn này có trên GitHub. Kho lưu trữ bao gồm tất cả các đánh dấu và kiểu cho tiện ích mở rộng mà chúng tôi sẽ xây dựng. Bạn có thể chạy lệnh bên dưới trong thiết bị đầu cuối của mình để sao chép kho lưu trữ vào hệ thống tệp của bạn hoặc tải xuống tệp zip và giải nén nó trên máy tính của bạn
Khi kho lưu trữ đã được tải xuống, hãy 9 vào trong thiết bị đầu cuối của bạn và sử dụng lệnh 0 (nếu bạn đã cài đặt nó trên máy tính của mình) để kiểm tra cấu trúc thư mục
Nếu bạn không có lệnh 0, bạn có thể điều hướng đến thư mục trong trình quản lý tệp của mình và kiểm tra nội dung của nó theo cách đóCấu tạo của tiện ích mở rộng ChromeTiện ích mở rộng của Chrome bao gồm các tệp khác nhau tùy thuộc vào bản chất của tiện ích mở rộng. Thông thường, bạn sẽ thấy một tệp kê khai, một số biểu tượng và một số tệp HTML, CSS và JavaScript tạo nên các giao diện khác nhau của tiện ích mở rộng. Hãy xem nhanh các tệp có trong thư mục dự án để xem chúng làm gì bản kê khaiTệp này (_______7_______2) xác định cấu trúc của tiện ích mở rộng, quyền mà nó cần và các chi tiết khác như tên, biểu tượng, mô tả, phiên bản trình duyệt được hỗ trợ, v.v. t. c kịch bản nềnCác tập lệnh nền là những tập lệnh chạy trong nền, lắng nghe các sự kiện và phản ứng với các tin nhắn được gửi từ các tập lệnh khác tạo nên tiện ích mở rộng. Các tập lệnh này được xác định trong tệp kê khai. Dự án của chúng tôi chỉ có một tập lệnh nền. tệp 3 được đặt tên phù hợp trong thư mục 4Cửa sổ bật lênCửa sổ bật lên là cửa sổ nhỏ hiển thị khi người dùng nhấp vào biểu tượng thanh công cụ trong giao diện trình duyệt. Đó là một tệp HTML có thể bao gồm các tài nguyên khác như biểu định kiểu và tập lệnh, nhưng tập lệnh nội tuyến không được phép Một ví dụ về cửa sổ bật lên tiện ích mở rộng của Chrome Để sử dụng cửa sổ bật lên trong tiện ích của bạn, trước tiên bạn cần xác định nó trong tệp kê khai. Tệp bật lên cho tiện ích mở rộng này là 5 liên kết với 6 trong thư mục 4ghi đè trangTiện ích mở rộng có thể ghi đè các trang trình duyệt như trang tab mới, lịch sử hoặc dấu trang nhưng mỗi lần chỉ có một tiện ích mở rộng. Tất cả những gì bạn cần làm là chỉ định tệp HTML trong tệp kê khai và trang sẽ được thay thế ( 8, 9 hoặc 0). Trong trường hợp này, tệp 1 sẽ ghi đè lên trang tab mớiBiểu tượng tiện ích mở rộngCần phải bao gồm ít nhất một biểu tượng trong bảng kê khai tiện ích mở rộng để thể hiện biểu tượng đó nếu không một biểu tượng chung sẽ được sử dụng thay thế. Các biểu tượng cho phần mở rộng của chúng tôi nằm trong thư mục 2kịch bản nội dungTập lệnh nội dung là những tập lệnh sẽ được thực thi trong các trang web được tải trong trình duyệt của bạn. Họ có toàn quyền truy cập vào DOM và có thể giao tiếp với các phần khác của tiện ích mở rộng thông qua API nhắn tin. Chúng tôi không cần tập lệnh nội dung cho dự án cụ thể này, nhưng các tiện ích mở rộng cần sửa đổi DOM của các trang web khác thì cần Cập nhật tệp kê khaiHãy bắt đầu xây dựng tiện ích mở rộng của Chrome bằng cách xác định các trường bắt buộc trong tệp 2. Mở tệp này trong trình soạn thảo văn bản của bạn và cập nhật nó bằng đoạn mã saurõ ràng. json
Dưới đây là bảng phân tích từng trường trong tệp kê khai Phần bắt buộc
Các trường tùy chọn nhưng được đề xuất
Không bắt buộc
Tải tiện ích mở rộng trong ChromeMở trình duyệt Chrome của bạn và nhập 0 vào thanh địa chỉ. Đảm bảo chế độ Nhà phát triển được bật, sau đó nhấp vào nút Tải đã giải nén và chọn thư mục tiện ích mở rộng. Khi tiện ích mở rộng được tải, nó sẽ xuất hiện ở vị trí đầu tiên trên trangTại thời điểm này, trang tab mới của trình duyệt sẽ được thay thế bằng trang được xác định trong bảng kê khai tiện ích mở rộng của chúng tôi ( 1). Hãy dùng thử bằng cách mở một tab mới. Bạn sẽ thấy một trang trống như trong ảnh chụp màn hình bên dướiNhận khóa truy cập Bapt của bạnTrước khi bạn có thể sử dụng API Unsplash, trước tiên bạn cần tạo một tài khoản miễn phí trên trang web của họ. Thực hiện theo các hướng dẫn trên để làm như vậy, và. Sau khi ứng dụng của bạn được tạo, hãy lưu ý chuỗi khóa truy cập trong trang cài đặt ứng dụng Lấy hình nềnBước đầu tiên là tìm nạp một hình ảnh ngẫu nhiên từ Bapt. Một API tồn tại cho mục đích này
Điểm cuối này chấp nhận một số nhằm mục đích thu hẹp nhóm ảnh mà từ đó một ảnh ngẫu nhiên sẽ được chọn. Ví dụ: chúng ta có thể sử dụng tham số 2 để chỉ giới hạn kết quả đối với ảnh phong cảnh
Hãy sử dụng API 3 để truy xuất một ảnh ngẫu nhiên duy nhất từ Bapt. Thêm đoạn mã sau vào tệp 4 của bạnlai lịch. js
Điểm cuối 5 yêu cầu thông qua tiêu đề Ủy quyền HTTP. Điều này được thực hiện bằng cách đặt tiêu đề 6 thành 7 trong đó 8 là Khóa truy cập của ứng dụng của bạn. Nếu không có tiêu đề này, yêu cầu sẽ dẫn đến phản hồi 401 trái phépKhi yêu cầu này được thực hiện và nhận được phản hồi, hàm 9 được thực thi để kiểm tra xem phản hồi có mã trạng thái là 200 OK không. Nếu vậy, phản hồi được đọc dưới dạng JSON và tự động gói nó trong một lời hứa đã giải quyết. Nếu không, một lỗi sẽ được đưa ra và ảnh 0 bị từ chối do lỗiBạn có thể thử điều này bằng cách tải lại tiện ích mở rộng trên trang 0 sau khi lưu tệp, sau đó nhấp vào liên kết trang nền để kiểm tra bảng điều khiển để tìm tập lệnhĐảm bảo rằng bạn luôn tải lại tiện ích mở rộng sau khi thực hiện thay đổi đối với tệp 3 để các thay đổi mới có hiệu lựcBạn sẽ thấy đối tượng JSON nhận được từ Unsplash trong bảng điều khiển. Đối tượng này chứa rất nhiều thông tin về hình ảnh bao gồm chiều rộng và chiều cao, số lượt tải xuống, thông tin về nhiếp ảnh gia, liên kết tải xuống, v.v. t. c Toàn bộ phản hồi JSON Chúng tôi cần lưu đối tượng này trong bộ lưu trữ Chrome và sử dụng nó để đặt hình nền mỗi khi mở tab mới. Hãy giải quyết vấn đề đó trong bước tiếp theo Hãy thư giãn và xem mã hoàn chỉnh ở cuối bước này Lưu đối tượng hình ảnh cục bộChúng tôi không thể đặt hình nền trên các trang tab mới của mình trực tiếp từ 3, nhưng chúng tôi cần một cách để truy cập đối tượng Unsplash từ các trang tab mớiMột cách để chia sẻ dữ liệu giữa tập lệnh nền và các tập lệnh khác tạo nên tiện ích mở rộng là lưu dữ liệu vào một vị trí mà tất cả các tập lệnh trong tiện ích mở rộng đều có thể truy cập được. Chúng tôi có thể sử dụng API localStorage của trình duyệt hoặc chrome. bộ nhớ dành riêng cho tiện ích mở rộng của Chrome. Chúng tôi sẽ chọn cái sau trong hướng dẫn này Sửa đổi hàm 4 trong tệp 3 của bạn như hình bên dướilai lịch. js
Để lưu trữ dữ liệu cho tiện ích mở rộng của bạn, bạn có thể sử dụng 6 hoặc 7. Cái trước nên được sử dụng nếu bạn muốn dữ liệu được đồng bộ hóa bất kỳ trình duyệt Chrome nào mà người dùng đã đăng nhập, miễn là người dùng đã bật đồng bộ hóa. Chúng tôi không cần phải đồng bộ hóa dữ liệu ở đây nên tùy chọn thứ hai phù hợp hơn ở đâyĐặt hình nền trên mỗi trang tab mớiBây giờ, đối tượng Unsplash đang được lưu vào bộ nhớ cục bộ của tiện ích mở rộng, chúng ta có thể truy cập nó từ trang tab mới. Cập nhật tệp 8 của bạn như hình bên dướimục lục. js
Sau khi DOM được tải và phân tích cú pháp, dữ liệu được lưu trữ trong khóa 9 được truy xuất từ ngăn lưu trữ cục bộ của Chrome dành cho các tiện ích mở rộng. Nếu dữ liệu này tồn tại, hàm 0 được thực thi với đối tượng 9 làm đối số duy nhất của nó. Hàm này đặt kiểu 2 trên phần tử 3 thành URL trong thuộc tính 4Tại thời điểm này, việc mở một tab mới sẽ tải một hình nền trên màn hình nhưng lúc đầu hình ảnh tải chậm vì nó đang được tải mới từ máy chủ khi tab được mở. Vấn đề này có thể được giải quyết bằng cách lưu chính dữ liệu hình ảnh vào bộ nhớ cục bộ thay vì liên kết tới hình ảnh. Thao tác này sẽ khiến hình nền tải ngay lập tức khi một tab mới được mở, vì nó sẽ được tìm nạp từ bộ nhớ cục bộ chứ không phải máy chủ Unsplash. Để lưu dữ liệu hình ảnh vào bộ nhớ cục bộ, chúng tôi cần mã hóa nó sang định dạng Base64. Ví dụ: đây là mã hóa Base64 của hình ảnh này
Mã hóa hình ảnh sang định dạng Base64 tạo ra một chuỗi đại diện cho toàn bộ dữ liệu hình ảnh. Bạn có thể kiểm tra điều này bằng cách dán chuỗi Base64 vào thanh địa chỉ của trình duyệt. Nó sẽ tải hình ảnh được biểu thị bằng chuỗi như minh họa bên dưới Chuỗi base64 có thể được sử dụng thay cho URL để tải hình ảnh trong trình duyệt Những gì chúng ta cần làm tiếp theo là chuyển đổi từng hình ảnh nhận được từ API Unsplash thành chuỗi Base64 và đính kèm nó vào đối tượng hình ảnh trước khi lưu trữ nó trong bộ nhớ cục bộ. Khi một tab mới được mở, chuỗi Base64 sẽ được truy xuất và sử dụng trong thuộc tính 2 thay vì URL hình ảnhĐể chuyển đổi hình ảnh thành chuỗi Base64, trước tiên chúng ta cần truy xuất dữ liệu hình ảnh. Đây là cách lai lịch. js
URL 6 bao gồm một URL hình ảnh cơ sở mà chúng tôi có thể thêm vào để kiểm soát kích thước, chất lượng và định dạng của hình ảnh. Truy vấn tham số 7 sẽ cho ra ảnh có chiều rộng 2000px và chất lượng đạt 85% so với ảnh gốc. Điều này sẽ thể hiện chất lượng đủ tốt cho hầu hết các kích thước màn hìnhĐể đọc dữ liệu hình ảnh từ phản hồi, phương pháp 8 được sử dụng. Điều này trả về một đối tượng Blob đại diện cho dữ liệu hình ảnh. Đối tượng này sau đó được đặt trên một thuộc tính 9 mới trên đối tượng 0. Bước tiếp theo là mã hóa đối tượng blob thành chuỗi Base64 để nó có thể được lưu vào bộ nhớ cục bộ. Sửa đổi hàm 4 trong tệp 3 của bạn như hình bên dướilai lịch. js 0API 3 là cách chúng tôi chuyển đổi đốm màu hình ảnh thành chuỗi được mã hóa Base64. Phương thức 4 đọc nội dung của thuộc tính 5. Khi quá trình đọc hoàn tất, sự kiện 6 được kích hoạt và kết quả của hoạt động có thể được truy cập theo 7 như minh họa ở trên. Thuộc tính 8 này là một chuỗi được mã hóa Base64, sau đó được lưu trữ trên đối tượng 9 trong thuộc tính 0 mới và toàn bộ đối tượng sau đó được lưu trữ trong vùng lưu trữ cục bộ của Chrome cho các tiện ích mở rộngTải lại tiện ích mở rộng sau khi lưu tệp 3 của bạnBước tiếp theo là cập nhật giá trị của kiểu nền được sử dụng để đặt nền cho cơ thể trong hàm 2. Thay thế 4 bằng 4 như hình bên dướimục lục. js 1Nếu bạn mở một tab mới, bạn sẽ thấy rằng hình nền tải ngay lập tức. Điều này là do hình ảnh đang được truy xuất từ bộ lưu trữ cục bộ ở dạng chuỗi Base64 thay vì được tải mới từ máy chủ Unsplash như chúng tôi đã làm trước đó Lưu ý chuỗi Base64 theo kiểu hình nền Hãy thư giãn và xem mã hoàn chỉnh ở cuối bước này Tải hình ảnh mới trên mỗi tabHiện tại, chức năng 4 chỉ được gọi khi tiện ích mở rộng được cài đặt hoặc tải lại lần đầu. Điều này có nghĩa là cách duy nhất để tải một hình ảnh mới là tải lại tiện ích mở rộng trong trang tiện ích mở rộng. Trong phần này, chúng ta sẽ tìm ra cách gọi 4 mỗi khi một tab mới được mở để một hình ảnh mới được tìm nạp trong nền để thay thế hình ảnh trước đó mà không phải tải lại tiện ích mở rộng mỗi lầnlai lịch. js 2Tập lệnh 3 không biết khi nào một tab mới được mở, nhưng tập lệnh 8 này là do nó là một phần của trang tab mới tùy chỉnh. Để giao tiếp giữa hai tập lệnh, chúng tôi cần gửi tin nhắn từ một tập lệnh và lắng nghe tin nhắn trong tập lệnh khácChúng tôi sẽ sử dụng các hàm 9 và 00 để thêm giao tiếp giữa tập lệnh nền và tập lệnh tab mới. Cái trước sẽ được sử dụng trong tệp 8 của chúng tôi để thông báo cho tập lệnh nền rằng một hình ảnh mới sẽ được tìm nạp trong nền. Thêm dòng được đánh dấu bên dưới vào tệp 8 của bạnmục lục. js 3Mỗi khi tải một trang tab mới, một tin nhắn sẽ được gửi với đối tượng tin nhắn được hiển thị ở trên. Đối tượng thông báo này có thể là bất kỳ đối tượng JSON hợp lệ nào. Bạn cũng có thể thêm chức năng gọi lại tùy chọn làm đối số thứ hai cho 03 nếu bạn cần xử lý phản hồi từ đầu bên kia nhưng chúng tôi không cần điều đó ở đâyBước tiếp theo là sử dụng phương pháp 00 trong tập lệnh nền của chúng tôi để lắng nghe các sự kiện tin nhắn và phản ứng thích hợp khi được kích hoạt. Thêm các dòng được đánh dấu bên dưới vào cuối tệp 3 của bạnlai lịch. js 4Hàm 06 được sử dụng để đăng ký một người nghe nghe tin nhắn được gửi bởi 9. Phương thức 08 nhận một hàm gọi lại duy nhất có thể nhận tối đa ba tham số
Chúng tôi không sử dụng 10 hoặc 11 trong trường hợp này vì vậy tôi đã loại bỏ nó khỏi chức năng gọi lại. Trong phần thân của hàm, một câu lệnh 14 được sử dụng để kiểm tra đối tượng thông báo. Nếu nó tương ứng với đối tượng thông báo từ tập lệnh tab mới, hàm 4 được thực thi, tạo ra một hình ảnh mới thay thế hình ảnh trước đóTải lại tiện ích mở rộng và mở một vài trang tab mới. Bạn sẽ thấy một hình nền mới trong các tab mỗi lần. Nếu bạn nhìn thấy cùng một hình ảnh nhiều lần, đó có thể là do một trong hai lý do bên dưới
Hãy thư giãn và xem mã hoàn chỉnh ở cuối bước này Hạn chế hình ảnh đối với bộ sưu tập do người dùng xác địnhHiện tại, nhóm ảnh mà một ảnh ngẫu nhiên được chọn chỉ bị giới hạn bởi hướng theo giá trị của biến 16 trong 0
Chỉ cho phép hình ảnh ngang theo thông số 2Chúng tôi có thể sử dụng bất kỳ cái nào khác có sẵn để giới hạn thêm nhóm hình ảnh. Ví dụ: chúng ta có thể lọc hình ảnh theo bộ sưu tập 6Chỉ cho phép hình ảnh phong cảnh từ bộ sưu tập có id 19 và 20Bạn có thể truy xuất ID bộ sưu tập bằng cách truy cập trang bộ sưu tập và chọn ID từ bất kỳ URL bộ sưu tập nào như minh họa bên dưới ID bộ sưu tập được gạch dưới Hãy thêm khả năng để người dùng tùy ý hạn chế nhóm hình ảnh đối với những hình ảnh từ một bộ sưu tập cụ thể. Chúng tôi sẽ tạo một cách để thực hiện điều đó thông qua cửa sổ bật lên, đây là cách phổ biến thông qua đó các cài đặt tiện ích mở rộng cơ bản được định cấu hình. Đây là cách cửa sổ bật lên được thiết lập tại thời điểm này Nếu bạn không thấy biểu tượng tiện ích mở rộng ở thanh trên cùng, hãy đảm bảo biểu tượng được ghim như minh họa trong ảnh chụp màn hình bên dưới Cửa sổ bật lên có một đầu vào duy nhất mà người dùng có thể nhập một hoặc nhiều ID bộ sưu tập. Đánh dấu cho cửa sổ này nằm trong tệp 5 nếu bạn muốn kiểm tra nó. Nhiệm vụ đầu tiên của chúng tôi là xác thực và lưu bất kỳ ID bộ sưu tập tùy chỉnh nào vào bộ nhớ cục bộ. Mở tệp 22 trong trình soạn thảo văn bản của bạn và điền nội dung của tệp bằng mã saucửa sổ bật lên. js 7Mặc dù đó là một đoạn mã khá lớn, nhưng không có gì bạn chưa từng thấy trước đây. Khi nhấn phím Enter trên đầu vào, biểu mẫu được gửi và 23 được thực thi. Trong chức năng này, ID bộ sưu tập được xử lý và cuối cùng được lưu vào bộ nhớ cục bộ của chrome dành cho tiện ích mở rộng. Đừng quên thay thế trình giữ chỗ 24 bằng khóa truy cập thực tế của bạnBước tiếp theo là sử dụng bất kỳ ID bộ sưu tập đã lưu nào trong yêu cầu hình ảnh ngẫu nhiên. Mở tệp 3 của bạn và thêm các phần được đánh dấu của đoạn trích bên dướilai lịch. js 8Hàm 26 truy xuất mọi ID bộ sưu tập đã lưu. Nếu bất kỳ cái nào đã được người dùng chỉ định, nó sẽ được thêm vào điểm cuối thông qua tham số truy vấn 27. Theo cách đó, hình ảnh ngẫu nhiên sẽ được tìm nạp từ các bộ sưu tập được chỉ định thay vì toàn bộ danh mục UnsplashHãy thư giãn và xem mã hoàn chỉnh ở cuối bước này Mẹo gỡ lỗiTiện ích mở rộng của Chrome sử dụng quy trình gỡ lỗi giống như các trang web thông thường, nhưng chúng có một số thuộc tính riêng mà bạn cần biết. Để gỡ lỗi tập lệnh nền của bạn, hãy truy cập trang tiện ích mở rộng chrome tại 0 và đảm bảo Chế độ nhà phát triển được bật. Tiếp theo, tìm tiện ích mở rộng của bạn và nhấp vào trang nền bên dưới kiểm tra chế độ xem. Điều này sẽ mở một cửa sổ DevTools cho mục đích gỡ lỗiGỡ lỗi một cửa sổ bật lên có thể được thực hiện bằng cách nhấp chuột phải vào biểu tượng cửa sổ bật lên và sau đó nhấp vào Kiểm tra cửa sổ bật lên. Thao tác này sẽ khởi chạy cửa sổ DevTools cho cửa sổ bật lên của bạn. Đối với trang tab mới (hoặc các trang ghi đè khác), hãy gỡ lỗi chúng giống như cách bạn thực hiện với một trang web thông thường (sử dụng Ctrl+Shift+I để khởi chạy bảng điều khiển DevTools) Trong quá trình phát triển, bạn có thể thấy nút Lỗi bên cạnh Chi tiết và Xóa trên mục nhập tiện ích mở rộng của mình. Điều này chỉ ra rằng đã xảy ra lỗi ở đâu đó trong mã tiện ích mở rộng của bạn. Nhấp vào nút này để tìm ra dòng chính xác trong mã của bạn nơi xảy ra lỗi Xuất bản tiện ích mở rộng của bạnThực hiện theo các bước chi tiết trong hướng dẫn này để xuất bản tiện ích mở rộng của bạn lên cửa hàng Chrome trực tuyến. Cần có tài khoản Google. Bạn cũng nên cân nhắc việc điều chỉnh tiện ích mở rộng của mình cho Firefox và xuất bản trên cửa hàng Tiện ích Mozilla Phần kết luậnXin chúc mừng, bạn đã tạo thành công tiện ích mở rộng Chrome đầu tiên của mình. Tôi hy vọng bạn đã vui vẻ xây dựng nó. Vui lòng để lại nhận xét bên dưới nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào. Nếu bạn muốn xem cách triển khai đầy đủ hơn loại tiện ích mở rộng cụ thể này của Chrome, hãy xem Stellar Photos trên GitHub Làm cách nào để tạo JavaScript tiện ích mở rộng chrome?Hướng dẫn từng bước để khởi chạy tiện ích mở rộng Chrome của riêng bạn bằng JavaScript. . Bước 1. Thiết lập dự án ban đầu Bước 2. Tạo tệp kê khai Bước 3. Xây dựng phần mở rộng Bước 4. Gửi để xem xét Bước 5. Xuất bản ứng dụng trên Cửa hàng Chrome trực tuyến Làm cách nào để tạo tiện ích mở rộng trình duyệt trong JavaScript?Để tạo tiện ích mở rộng của Chrome, bạn cần có các thành phần sau. rõ ràng. tập tin json. . Tiện ích mở rộng được cài đặt lần đầu hoặc được cập nhật lên phiên bản mới Một sự kiện được gửi đi Kịch bản nội dung gửi tin nhắn Popup xem trang nền cuộc gọi Tôi có thể viết mã JavaScript trong Chrome không?Mở Chrome, nhấn Ctrl+Shift+j và Chrome sẽ mở bảng điều khiển JavaScript nơi bạn có thể viết và kiểm tra mã của mình .
Làm cách nào để bật JavaScript trên Chrome?Trình duyệt Chrome - Android - Bật/Tắt JavaScript . Biểu tượng ứng dụng. (Google) Chrome. . Nếu không khả dụng, hãy vuốt lên từ giữa màn hình, sau đó chạm vào. Trình duyệt Chrome. Chạm vào. biểu tượng trình đơn. (phía trên bên phải) Vỗ nhẹ. Cài đặt. Từ phần Nâng cao, chạm vào. Cài đặt Trang web. Vỗ nhẹ. JavaScript. Chạm vào. chuyển JavaScript. để bật hoặc tắt |