Kết nối người dùng từ tiện ích mở rộng Chrome

Chúng tôi muốn tạo một tiện ích mở rộng hoạt động trên hệ thống bật lên. Để tạo phần sau, chúng ta chỉ cần tạo một trang HTML cổ điển. Như được định cấu hình trong tệp kê khai.JSON Chúng tôi sẽ sử dụng một tệp bật lên.HTML

Hướng dẫn của Google Chrome: Tạo tiện ích mở rộng

Tôi mời bạn khám phá cách tạo tiện ích mở rộng cho trình duyệt web Google Chrome. Tạo một phần mở rộng có vẻ phức tạp, nhưng đừng sợ hãi ! Thật vậy, tiện ích mở rộng Google Chrome có thể được tạo bằng các ngôn ngữ mà chúng ta biết rõ: JS, HTML và CSS.

Điều kiện tiên quyết nhỏ

Đầu tiên bạn cần kích hoạt Chế độ nhà phát triển Trong cài đặt Chrome để có thể tải tiện ích mở rộng của bạn. Để làm điều này, bạn đi đến Cài đặt của bạn> Thêm công cụ> Tiện ích mở rộng và chọn hộp Chế độ nhà phát triển. Sau đó, bạn sẽ thấy ba nút mới xuất hiện để tải các phần mở rộng.

Định cấu hình tiện ích mở rộng của bạn

Điểm bắt đầu để tạo tiện ích mở rộng là việc tạo tệp kê khai.JSON ở gốc của tệp của bạn. Anh ta sẽ chứa tất cả các thông tin liên quan đến cấu hình của phần mở rộng như tên, mô tả, các tập lệnh sẽ được tải.

< "manifest_version": 2, // Indique la version du manifest (toujours 2) "name": "Tutoriel créer une extension", // Le nom de votre extension "description": "Chaine YT Plati'Script", // La description "version": "1.0", // La version en en l'occurrence la première donc 1.0 "permissions": [ // Les permissions, on y reviendra plus bas "http://*/*", "https://*/*", ], "browser_action": < // Les paramètres "default_icon" : "img/icon.png", // L'icône qui s'affiche en haut à droite de votre navigateur "default_popup": "popup.html" // Le popup qui s'affichera quand vous cliquez sur l'îcone >, "Biểu tượng": < // L'îcone qui s'affichera lorse que vous êtes sur la page extensions des paramètre "128" : "img/icon_128.png" // 128 = 128x128 la taille de votre image >>

Tất cả các tham số có sẵn cho tệp này được mô tả trong tài liệu.

Quyền

Theo mặc định, tiện ích mở rộng của bạn sẽ nằm trong một loại hộp cát và sẽ không có quyền truy cập vào bất cứ thứ gì. Trong một số trường hợp, chúng tôi muốn tạo các tiện ích mở rộng có khả năng giao tiếp với các trang web hoặc với API trình duyệt nhất định. Sau đó, nó sẽ là cần thiết để chỉ định trong cấu hình của chúng tôi về quyền mà chúng tôi muốn có được (các quyền này sẽ được yêu cầu trong quá trình cài đặt tiện ích mở rộng). Những quyền này có thể có hai biểu mẫu:

• Một chuỗi ký tự đại diện cho một loại quyền cụ thể, ví dụ như truy cập vào các tab Tab (Danh sách quyền)
• Một lý do đại diện cho một định dạng URL mà chúng tôi sẽ truy cập (các mẫu phù hợp)

"Quyền": [// Quyền, chúng tôi sẽ quay lại bên dưới "http: //*/*", "https: //*/*", "tab" // tab là quyền tạo các tab mới],

Đối với “http: ///“Và” https: ///“, Chúng tôi nói với anh ấy rằng tiện ích mở rộng có thể hoạt động trên tất cả các trang HTTP hoặc HTTPS.

Tạo một cửa sổ bật lên

Chúng tôi muốn tạo một tiện ích mở rộng hoạt động trên hệ thống bật lên. Để tạo phần sau, chúng ta chỉ cần tạo một trang HTML cổ điển. Như được định cấu hình trong tệp kê khai.JSON Chúng tôi sẽ sử dụng một tệp bật lên.HTML

 H1, p 
Chào buổi sáng
 
Xin chào, tôi là một cửa sổ bật lên đơn giản
ai không chiếm nhiều phòng

Đó là tất cả những gì chúng ta phải làm trong thời điểm này, khi chúng ta nhấp vào nút Chrome sẽ tự động mở cửa sổ bật lên bằng cách thay đổi trang mà chúng ta vừa viết.

Kiểm tra phần mở rộng của nó

Bây giờ chúng tôi muốn kiểm tra tiện ích mở rộng của mình, vì chúng tôi sẽ phải đi qua bảng tiện ích mở rộng và nhấp vào nút Charge Tet sau đó chọn thư mục chứa tiện ích mở rộng của bạn. Tự động, bạn sẽ thấy biểu tượng của tiện ích mở rộng của bạn xuất hiện.

Kịch bản

Nhất thiết là một phần mở rộng hiển thị cửa sổ bật lên, nó tương đối hạn chế ! May mắn thay, chúng ta có thể sử dụng JavaScript để thêm các hành vi khác nhau vào phần mở rộng của mình. Có một số cách để tải JavaScript tùy thuộc vào những gì bạn muốn thực hiện.

JavaScript trong bật lên

Trước hết có thể tải JavaScript trực tiếp trong cửa sổ bật lên. Thật vậy, đây là một trang web cổ điển mà chúng tôi có thể tải bất kỳ tệp javascript nào với thẻ .

 // Chúng tôi tải tập lệnh của chúng tôi trong nội dung HTML H1, p 
Chào buổi sáng
 
Xin chào, tôi là một cửa sổ bật lên đơn giản
ai không chiếm nhiều phòng

Điều đó nói rằng, tệp JavaScript sẽ chỉ được tải khi mở cửa sổ bật lên, đột nhiên nếu người dùng không bao giờ hỗ trợ nút, JavaScript của bạn sẽ không bao giờ được thực thi

JavaScript trong “Bối cảnh”

Cũng có thể thực thi JavaScript trong nền để giữ cho mã của bạn hoạt động ngay cả khi bật lên không được triển khai. Để làm điều này, họ sẽ phải thay đổi tệp kê khai.JSON để bao gồm đường dẫn đến tệp javascript mà chúng tôi muốn tải.

Các tập lệnh nội dung

CÁC Kịch bản hạnh phúc là các tệp JavaScript sẽ được thực thi trong ngữ cảnh của trang web và có thể tương tác với nó bằng cách sử dụng DOM. Không giống như các tập lệnh được khởi chạy từ nền, các tập lệnh này không có quyền truy cập vào API Chrome.*. Ngoài ra, chúng hoạt động tương đối bị cô lập và không có quyền truy cập vào các chức năng JavaScript sẽ được xác định trong trang web mà chúng được tiêm.

Loại tải này sẽ được sử dụng khi bạn muốn tương tác trực tiếp với trang web để thay đổi kích thước phông chữ hoặc thao tác một số mục nhất định.

Thông báo Chrome

Cuối cùng, tiền thưởng nhỏ liên quan đến thông báo. Trên Google Chrome, có thể quản lý một hệ thống thông báo sẽ được hiển thị trên máy tính để bàn của người dùng. Nếu bạn muốn sử dụng API này, bạn sẽ cần phải xin phép trước trong tệp kê khai.json .

"Quyền": [// Quyền, chúng tôi sẽ quay lại bên dưới "http: //*/*", "https: //*/*", "tab", // tab là quyền tạo các tab mới "Thông báo" // Kích hoạt thông báo],

Khi điều này được thực hiện, chúng tôi có thể sử dụng lớp cho phép quản lý các thông báo.

VAR Thông báo = Thông báo mới ('Tiêu đề của người nổi tiếng !', < icon: 'votreicon.jpg', body: "Votre petite description de la notification", >);

Lớp này không phải là duy nhất đối với Google Chrome, nhưng là API mới có hoặc khối trong một số trình duyệt. Nếu bạn muốn có thêm thông tin về cách thức hoạt động, tôi mời bạn xem tài liệu. Ưu điểm trong trường hợp tiện ích mở rộng là người dùng đã chấp nhận quyền cho phép thông báo bắt đầu trực tiếp.

Kết nối người dùng từ tiện ích mở rộng Chrome

Tài liệu này giải thích cách sử dụng nền tảng nhận dạng để kết nối người dùng từ tiện ích mở rộng Chrome.

Quan trọng : Nền tảng nhận dạng chỉ tương thích với các tiện ích mở rộng sử dụng BÀI VIẾT V2. Bản kê khai v3 không tương thích vì nó không cung cấp các hoạt động bật lên. Quan trọng: Việc sử dụng điện thoại hoặc xác thực đa yếu tố từ tiện ích mở rộng Chrome.

Trước khi bạn bắt đầu

• Kích hoạt nền tảng nhận dạng và định cấu hình nhà cung cấp nhận dạng. Để tìm hiểu làm thế nào, xem Fast Start -up.
• Thêm các URL sau vào danh sách ủy quyền của Content_Security_Policy của tiện ích mở rộng của bạn:
  • https: // apis.Google.com
  • https: // www.gstatic.com
  • https: // www.Googleapis.com
  • https: // securetoken.Googleapis.com

  Để biết thêm thông tin, hãy xem tài liệu CSP.

  Lưu id của tiện ích mở rộng của bạn

  Để kết nối người dùng từ tiện ích mở rộng Chrome, bạn phải lưu ID tiện ích mở rộng dưới dạng miền được ủy quyền:

  1. Truy cập trang Cài đặt Nền tảng danh tính trong bảng điều khiển Google Cloud. Truy cập trang Cài đặt
  2. Bấm vào tab Bảo vệ.
  3. Trong phần Miền ủy quyền (Khu vực được ủy quyền), nhấp vào Thêm tên miền (Thêm một miền).
  4. Nhập URI của tiện ích mở rộng của bạn. Tiện ích mở rộng này thường giống với điều này: chi phối chrome: // chrome_extension_id .
  5. Bấm vào Thêm vào.

  Tiến hành kết nối người dùng

  Kết nối người dùng từ tiện ích mở rộng Chrome tương tự như một ứng dụng web, với một vài khác biệt:

  • Xác thực điện thoại và đa yếu tố không được hỗ trợ.
  • Phần mở rộng Chrome không thể sử dụng chuyển hướng HTTP. Do đó, bạn phải sử dụng các hoạt động bật lên (SignInWithPopup () và LinkWithPopup ()) để kết nối người dùng.
  • Lời kêu gọi các phương thức xác thực từ một hành động trình duyệt hủy bỏ hành động của trình duyệt. Vì vậy, bạn nên gọi họ từ một tập lệnh trong nền.
  • Các phương thức bật lên chỉ có thể được sử dụng trong các tiện ích mở rộng sử dụng biểu hiện v2.

  Ví dụ sau minh họa kết nối của người dùng với Google:

  JavaScript

  bật lên.JS

  // Nhận tham chiếu đến trang nền. Const bals = chrome.sự mở rộng.GetbackgroundPage (); // Đăng nhập bằng cửa sổ bật lên, thường được đính kèm vào nút Nhấp vào. BGPAGE.SignInWithPopup (); 

  lý lịch.JS

  Const app = firebase.Khởi tạo (config); Const auth = Ứng dụng.tác giả (); Const SignInWithPopup = () => < const provider = new firebase.auth.GoogleAuthProvider(); return auth.signInWithPopup(provider).catch((error) =>< console.log(error); >); >; 

  Các bước sau

  • Kết nối người dùng với các nhà cung cấp nhận dạng khác nhau.
  • Tìm hiểu thêm về người dùng nền tảng nhận dạng.

  Bình luận

  Trừ khi có quy định khác, nội dung của trang này được điều chỉnh bởi giấy phép Creative Commons 4.0 và các mẫu mã được điều chỉnh bởi giấy phép Apache 2.0. Để biết thêm thông tin, hãy xem các quy tắc của trang web của nhà phát triển Google. Java là nhãn hiệu đã đăng ký của Oracle và/hoặc các công ty liên kết của nó.

  Cập nhật cuối cùng vào ngày 2023/06/17 (UTC).

  Ringcentral cho tiện ích mở rộng Google Chrome

  Luôn cập nhật các tính năng, cải tiến và chỉnh sửa lỗi mới nhất từ ​​phần mở rộng google chrome của Google Chrome.

  Phiên bản 21.3.30 (RC)

  Ngày phát hành : 29/29/2021

  • Khả năng ẩn hồ sơ người dùng trong thư mục của công ty

  Sửa chữa Bogs

  • Hiển thị logo RC trong cửa sổ nổi
  • Biểu tượng không làm phiền

  Ngày phát hành : 07/28/2021

  • Khả năng thêm các chi tiết của video kết nối phòng trong lời mời của bạn vào một cuộc họp

  Ngày phát hành : 01/22/2021

  • Video Ringcentral:
    • Kích hoạt phòng chờ
    • Số truy cập toàn cầu
    • Thành phần tự động của mật khẩu từ các lời mời bằng e-mail
    • Tự động ứng dụng mật khẩu cho các cuộc họp không phải
    • Tuân thủ các giá trị của các tham số khóa của dịch vụ web
    • Video Ringcentral
      • Cập nhật nhãn “Tham gia trước máy chủ” bằng cách thay thế nó bằng “Người tham gia chỉ có thể tham gia cuộc họp sau tôi”
      • Cải thiện mật khẩu ux

      Ngày phát hành : 23/09/2020

      • Trang chi tiết liên hệ hiện bao gồm một trường cho trang web
      • Số tiện ích mở rộng hiện được hiển thị với mã trang web được kích hoạt
      • Khả năng tìm kiếm liên hệ với số tiện ích mở rộng ngắn
      • Thành phần của một số mở rộng ngắn
      • Fusion of 3 Ringout Call Tùy chọn vào một tùy chọn Ringout duy nhất

      Ngày phát hành : 07/31/2020

      • Khả năng chỉ cho phép người dùng được xác thực tham gia các cuộc họp
      • Tùy chọn chia sẻ màn hình chỉ dành riêng cho máy chủ và người điều hành
      • Danh mục các tùy chọn bảo mật bổ sung
      • Tiếp nhận thông báo cho các thay đổi mở rộng cho nhà cung cấp video
      • Sử dụng ứng dụng Ringcentral làm chấm dứt cuộc gọi

      Sửa chữa Bogs

      • Không thể thực hiện các cuộc gọi khẩn cấp

      Ngày phát hành : 18/05/2020

      • Định nghĩa của Ringout từ ID của Trình gọi web là ID mặc định ID

      Sửa chữa Bogs

      • Hiển thị các số được chuyển vào danh sách các cuộc gọi của người gọi

      Ngày phát hành : 04/22/2020

      • Thêm mật khẩu cuộc họp cho các cuộc họp theo kế hoạch
      • Vô hiệu hóa chức năng “Tham gia trước máy chủ”

      Ngày phát hành : 04/09/2020

      Sửa chữa Bogs

      • Đã sửa lỗi các tùy chọn cuộc họp kép trong menu thả xuống của hội nghị về chương trình nghị sự của Google.

      Ngày phát hành : 02/04/2020

      Sửa chữa Bogs

      • Giải quyết vấn đề hết hạn các cuộc họp sau 24 giờ.
      • Sửa số số lượng để soạn các cuộc họp ringcentral

      Ngày phát hành : 28/10/2019

      • Tùy chọn để che giấu việc tiết lộ tuân thủ cho việc sử dụng hạn chế để tuân thủ chính sách của Google
      • Xóa tab Gmail trong các hoạt động gần đây (để kiểm tra thành công Google, không gọi API Gmail)
      • Thêm việc tiết lộ tuân thủ sử dụng hạn chế để tuân thủ chính sách của Google
      • Quản lý danh sách đen C2D/SMS
      • Chuyển động của tùy chọn Thêm một cuộc họp trong Danh sách giảm giá của Hội nghị Thêm vào Hội nghị
      • Tiện ích mở rộng chương trình nghị sự của Google được ưu tiên nếu RingCentral cho Google cũng được cài đặt.
      • Tiêm C2D can thiệp vào các nhà xuất bản HTML/văn bản, đặc biệt là với Radederor
      • Hiển thị không chính xác của biểu tượng nhấp chuột để gọi trong chương trình nghị sự của Google
      • Sửa đổi API liên hệ với Google cho ủy quyền mở rộng mới
      • Cải thiện màn hình cuộc gọi từ xa trong trang tất cả các cuộc gọi
      • Tùy chọn che giấu cuộc họp nếu người dùng không được kết nối
      • Xóa số phiên bản trong trang tin tức

      Sửa chữa Bogs

      • Nghiên cứu trên trang liên hệ đôi khi có thể gây ra ứng dụng của ứng dụng
      • Không thể khớp với liên hệ của Google
      • Vô hiệu hóa nút để gửi đến trang trò chuyện sau khi không gửi tin nhắn
      • Không thể cập nhật trạng thái hiện diện một cách chính xác
      • Sự chậm trễ và nhảy từ con trỏ ở cuối văn bản khi nhập tin nhắn
      • Việc ghép các số điện thoại trong trường nội dung có thể sửa đổi có thể kích hoạt tiêm C2D
      • Logo Ringcentral cũ trên các trang mới
      • Thiếu tùy chọn Reunion RingCentral trong các hội nghị thêm vào Danh sách thả xuống trên trang chương trình nghị sự của Google
      • Hiển thị thông tin gần đây nhất về hội nghị sau khi cập nhật/sửa đổi
      • Bổ sung trang chủ cho các sản phẩm mới
      • Tiêm nhấp để gọi/gửi SMS đôi khi không xuất hiện ở đúng vị trí.
      • Tùy chọn Bấm để gọi và nhấp để gửi SMS cơ bản trên bất kỳ trang web nào
      • Tất cả các điều khiển cuộc gọi (ngoại trừ gọi cuộc gọi và gọi cho cuộc gọi)
      • Truy cập vào phần mở rộng RingCentral trên bất kỳ trang web Chrome nào
      • Giao diện người dùng mới
      • SMS chuyên nghiệp và SMS nội bộ
      • Đồng bộ hóa các thư mục Google và Ringcentral
      • Truy cập vào thư mục từ SMS
      • Truy cập vào thư mục từ việc đánh số
      • Kích hoạt chức năng nhắn tin về giọng hát/fax
      • Kích hoạt chức năng Teleconference
      • Danh thiếp chi tiết
      • Tích hợp chương trình nghị sự của Google
      • Khả năng đặt nguyên mẫu chức năng vào danh sách đen/trắng (để ngăn chặn một số trang web nhất định hiển thị giao diện người dùng RingCentral và C2D)
      • Gửi lời kêu gọi nhắn tin bằng giọng hát
      • Chuyển cuộc gọi đến
      • Phản hồi bằng SMS cho một cuộc gọi đến
      • Sửa đổi tình trạng hiện diện
      • Hỗ trợ hợp tác của các cuộc họp Ringcentral
      • Liên hệ với chúng tôi hình thức
      • Tin tức
      • Hỗ trợ ringcentral tại
      • Google ho cho các hội nghị ringcentral
      • Huy hiệu lỗi WebRTC (hiển thị thông báo lỗi trong trường hợp có vấn đề với cuộc gọi WEBRTC)
      • Thông báo cuộc gọi Nhập Huy hiệu Ringcentral khi ứng dụng bị giảm (ngoài thông báo của trình duyệt)