Hướng dẫn user javascript and css google chrome - người dùng javascript và css google chrome

Google Chrome là một trong những trình duyệt được yêu thích nhất cho các nhà phát triển cũng như người dùng nói chung. Tôi sử dụng Google Chrome trên tất cả các thiết bị của mình và nó giúp tôi đồng bộ hóa dấu trang, lịch sử trình duyệt, trình quản lý mật khẩu và nhiều hơn nữa.

Đối với máy tính để bàn, có nhiều điều bạn có thể làm ngoài việc duyệt qua internet. Bạn có thể kiểm tra trang web của bạn và tất cả. Google Chrome trở nên mạnh mẽ hơn với việc sử dụng các tiện ích mở rộng.

Vì vậy, hôm nay, chúng tôi sẽ xem xét cách bạn có thể tạo tiện ích mở rộng Google Chrome đầu tiên của mình với việc sử dụng HTML, CSS và JavaScript.

Thành lập

Yêu cầu

Yêu cầu là rất ít để bắt đầu với phần mở rộng Chrome. Danh sách ở đây:

• Tiện ích mở rộng Google Chrome (cho mục đích thử nghiệm)
• Trình chỉnh sửa văn bản (tôi thích mã vs, bạn có thể sử dụng những người khác theo bạn)
• Kiến thức cơ bản về HTML, CSS và JavaScript

Mở rộng chrome

Chúng tôi sẽ phát triển một ứng dụng máy tính cho tiện ích mở rộng Chrome đầu tiên của chúng tôi. Nếu bạn biết cách tạo máy tính cho một ứng dụng web, hướng dẫn sẽ dễ dàng cho bạn. Bây giờ, bạn chỉ cần biết "làm thế nào để thiết lập tiện ích mở rộng?"

manifest.json

Mỗi ứng dụng đều cần một bản kê khai, một tệp được định dạng JSON có tên là DỰ ÁN.JSON mô tả ứng dụng. Tệp này sẽ giúp ứng dụng của bạn quản lý sự cho phép, lưu trữ, phiên bản kê khai, trang đích, tên, biểu tượng và nhiều hơn nữa.

Đây là mã cho bản kê khai

{
    "manifest_version" : 2,
    "name" : "Calculator",
    "version" : "1.0",
    "description" : "Calculate Anywhere",
    "icons" : {
        "128" : "img/icons128.png",
        "48" : "img/icons48.png",
        "16" : "img/icons16.png"
    },
    "browser_action" : {
        "default_icon" : "img/icons16.png",
        "default_popup" : "popup.html"
    },
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

Giải trình

• Manifest_Version: Bạn đang xác định phiên bản của bản kê khai mà bạn sẽ sử dụng. Chúng tôi hiện đang sử dụng 2, nhưng gần đây Google đã ra mắt phiên bản 3.
• Tên: Đó là tên của ứng dụng của bạn. Hiện tại, chúng tôi đang gọi nó là "máy tính."
• Mô tả: Như tên cho biết, bạn sẽ mô tả tiện ích mở rộng của bạn ở đây. Một vài câu để mô tả phần mở rộng là đủ. Hiện tại, chúng tôi đang cho nó "Tính toán bất cứ nơi nào."
• Biểu tượng: Bạn cần cung cấp SRC cho biểu tượng của phần mở rộng của bạn. Bạn cần cung cấp nguồn cho các kích thước khác nhau của biểu tượng.
• Browser_Actions: Chúng tôi sử dụng Browser_action để đặt tiện ích mở rộng vào thanh công cụ, phù hợp với thanh địa chỉ. Hành động trình duyệt có một biểu tượng, một chú giải công cụ, huy hiệu và cửa sổ bật lên.
  We use browser_action to put the extension to the toolbar, which is right to the address bar. The browser action has an icon, a tooltip, a badge, and a popup.
• Default_icon: Nguồn cho hình ảnh của biểu tượng.
• Default_popup: Đây là nguồn cho trang đích của tiện ích mở rộng. Nó phải ở định dạng HTML. Bạn có thể đặt tên cho nó theo bạn. Đối với tôi, đó là "popup.html."
• Content_Security_Policy: Nó được tuyên bố cho phép một số chức năng mà tiện ích mở rộng Chrome được coi là linh tinh. Tôi đã sử dụng hàm eval () để tính toán phương trình mà tôi không khuyên bạn nên sử dụng cho mục đích thương mại. Bạn có thể sử dụng một chức năng riêng cho mục đích tính toán.

Chúng tôi chỉ cần điều này nhiều cho tiện ích mở rộng máy tính của chúng tôi. Hãy di chuyển đến điểm đến tiếp theo là popup.html

popup.html, popup.js và style.css

Bây giờ chúng tôi đang ở trong vùng thoải mái. Chúng tôi có thể viết HTML khi bạn viết. Tôi sẽ không kéo dài các phần HTML, CSS và JavaScript.

Bạn có thể thấy toàn bộ mã trong repo GitHub của tôi ở đây.

https://github.com/surajondev/extension-calculator

Mã codepen cho popup.html, style.css và popup.js

Cài đặt tiện ích mở rộng trong Chrome

Để kiểm tra mục đích, ban đầu chúng tôi sẽ cài đặt ứng dụng cục bộ vào hệ thống của chúng tôi.

• Đầu tiên, hãy truy cập Chrome: // Tiện ích mở rộng để mở Trình quản lý mở rộng
• Nhấp vào nút tải mở rộng giải nén. Một hộp thoại tập tin xuất hiện.
• Trong hộp thoại Tệp, chọn thư mục MyApp (thư mục chứa BÀI TẬP.json). Trừ khi bạn nhận được hộp thoại lỗi, bây giờ bạn đã cài đặt ứng dụng.

Sau khi cài đặt thành công, phần mở rộng sẽ trông như thế này.

Lưu ý cuối cùng

Sau khi cài đặt thành công, phần mở rộng sẽ trông như thế này.

Lưu ý cuối cùng

Nếu bạn gặp lỗi, hãy kiểm tra mã của bạn và cố gắng giải quyết nó. Nếu bạn gặp bất kỳ rắc rối nào, bạn có thể liên hệ với tôi ở đây.

Công cụ kim phun JavaScript nhỏ cho Google Chrome

Tùy chỉnh một trang web từ xa khi nó không cung cấp cài đặt gốc và các nhà phát triển đang bận.

Có các phần mở rộng tiêm mã đẹp hơn, ví dụ: "JavaScript và CSS" của Dmitry Novikov. Tuy nhiên, bạn cung cấp "[email protected]", "JunkyCoder", v.v ... Toàn quyền kiểm soát mọi thứ bạn đọc trên web. Bạn cũng có thể thử các nhà quản lý người dùng như ViolentMonkey hoặc TamperMonkey, với các tập lệnh từ Greasyfork hoặc OpenuserJS.@yandex.ru", "junkycoder" etc. full control over everything you read on the web. You could also try userscript managers such as Violentmonkey or Tampermonkey, with scripts from Greasyfork or OpenUserJS.

Các tập lệnh nội dung Chrome có thể sửa đổi các trang web, ví dụ: nội dung chính trị, và thông tin cá nhân. Vì vậy, tôi đã thực hiện phần mở rộng của riêng mình, nhỏ và dễ kiểm tra nếu bạn cân nhắc sử dụng nó.

Phần mở rộng này cũng giúp thay thế các tiện ích mở rộng Chrome nhỏ hơn như "Goodreads Xếp hạng cho Amazon" của Rubén Martínez bằng cách thêm một hàm tương đương vào tập lệnh Mixins. Càng ít người lạ nghịch ngợm với trình duyệt của tôi thì càng tốt.

Tính năng chương trình và ảnh chụp màn hình

• Hỗ trợ chuyển hướng URL (thay thế tiện ích mở rộng chuyển hướng của Einar Egilsson)URL redirections (replaces Einar Egilsson's Redirector extension)

• Không có bản cập nhật tự động (không giống như điều này hoặc mua lại phần mềm quảng cáo này), xem phần Cài đặt

• Tiny, được giữ ở mức tối thiểu = ít bảo trì

• Dễ dàng kiểm tra nếu bạn cân nhắc sử dụng nó - không có bên thứ 3, không có gì được thu nhỏ, các tệp nhỏ

• Ngoài tab để thụt vào, CTRL+S để lưu, không gian Ctrl+để tự động hoàn thành đơn giản và một vài hàm trợ giúp như getUrl và saveUrl(), nó không có bất kỳ vẻ đẹp thoải mái và vẻ đẹp trực quan nào: không làm nổi bật hoặc xác nhận cú pháp (không có trình soạn thảo ACE, JSLINT,. ..); Bảng điều khiển trình duyệt, tuy nhiên, đã chứng minh đủ để gỡ lỗi

• Việc tiêm CSS hoặc JavaScript, ví dụ:

  • Cài đặt Chế độ xem Goodreads.com nhất quán
  • Hiển thị xếp hạng Goodreads.com trên Amazon
  • Bộ lọc giá cho danh sách mong muốn của Amazon
  • Bỏ qua Paywall của tờ báo địa phương của bạn
  • Thêm nút tải xuống vào các websites phát trực tuyến
  • nhiều kịch bản hơn

• Linh hoạt và dễ mở rộng do cấu hình dựa trên kịch bản của nó (thay vì có một giao diện người dùng phức tạp cố gắng linh hoạt như ngôn ngữ lập trình chỉ sử dụng ngôn ngữ lập trình); Bạn cũng có thể thêm nhận xét ở khắp mọi nơi

• Các tập lệnh mixin của bạn chạy trong bối cảnh của trang web mục tiêu

  • Vì vậy, bạn không thể chỉ truy cập DOM của nó, mà các biến và chức năng JavaScript của nó
  • Trang web được nhắm mục tiêu không thể dễ dàng chiếm đoạt tiện ích mở rộng của bạn
  • Mọi thứ bên ngoài Mixin () chạy trong bối cảnh của phần mở rộng, với các đặc quyền khác

• Xuất/Nhập = Sao chép/Dán nội dung của khu vực văn bản

Cài đặt

1. Không có sẵn trong cửa hàng web của Chrome
2. Bạn không thể dễ dàng cài đặt CRX-Files vĩnh viễn từ các trang web khác
3. Bản lưu trữ Git Clone hoặc lưu dưới dạng tệp zip
4. Chrome> Cài đặt> Phần mở rộng> [X] Chế độ nhà phát triển (góc trên bên phải)
5. Chrome> Cài đặt> Tiện ích mở rộng> Nhấp vào Tải tiện ích mở rộng chưa đóng gói
6. Duyệt đến thư mục nguồn của bản phát hành và xác nhận chưa được tải xuống và xác nhận

Nhận xét

Sử dụng tệp github hoặc xem tệp tác giả.md