Google Chrome 비디오 자습서 : 확장 생성 | Grafikart, Chrome Extension에서 사용자의 연결로 진행 | 문서화 아이덴티티 플랫폼 | 구글 클라우드

/ /

크롬 확장에서 사용자를 연결하십시오

우리는 팝업 시스템에서 작동하는 확장을 만들고 싶습니다. 후자를 만들려면 클래식 HTML 페이지를 만들면됩니다. 매니페스트 파일에 구성된대로.JSON 우리는 팝업 파일을 사용합니다.HTML

Google Chrome 튜토리얼 : 확장을 만듭니다

Google Chrome 웹 브라우저의 확장을 만드는 방법을 발견하도록 초대합니다. 확장을 만드는 것은 복잡해 보일 수 있지만 두려워하지 마십시오 ! 실제로 Google Chrome Extensions는 우리가 잘 알고있는 언어로 만들 수 있습니다 : JS, HTML 및 CSS.

작은 전제 조건

먼저 활성화해야합니다 개발자 모드 연장을로드 할 수있는 크롬 설정에서. 이렇게하려면 설정> 더 많은 도구> 확장자로 이동하여 상자를 확인합니다 개발자 모드. 그런 다음 3 개의 새 버튼이 확장을로드하는 것처럼 보일 것입니다.

확장자를 구성하십시오

확장을 만들기위한 시작점은 매니페스트 파일의 생성입니다.파일의 루트에있는 JSON. 그는 이름, 설명,로드 될 스크립트와 같은 확장자 구성에 관한 모든 정보를 포함합니다.

< "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 >, "아이콘": < // 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 >>

이 파일에 사용 가능한 모든 매개 변수는 문서에 설명되어 있습니다.

권한

기본적으로 연장은 일종의 샌드 박스에 있으며 아무것도 액세스 할 수 없습니다. 경우에 따라 웹 페이지 또는 특정 브라우저 API와 통신 할 수있는 확장자를 만들고자합니다. 그러면 우리가 얻으려는 권한을 구성 할 수있는 권한을 지정해야합니다 (이 권한은 확장 설치 중에 요청됩니다). 이 권한은 두 가지 형태를 취할 수 있습니다

  • 특정 유형의 권한을 나타내는 문자열 (예 : 탭에 대한 액세스) (권한 목록)
  • 우리가 액세스 할 URL 형식을 나타내는 이유 (매치 패턴)
"권한": [// 권한, 우리는 "http : //*/*", "https : //*/*", "탭"아래로 돌아올 것입니다. // 탭은 새 탭 생성 권한입니다],

“http : ///“그리고”https : ///“, 우리는 그에게 확장이 모든 HTTP 또는 HTTPS 페이지에서 작동 할 수 있다고 말합니다.

팝업을 만듭니다

우리는 팝업 시스템에서 작동하는 확장을 만들고 싶습니다. 후자를 만들려면 클래식 HTML 페이지를 만들면됩니다. 매니페스트 파일에 구성된대로.JSON 우리는 팝업 파일을 사용합니다.HTML

 H1, p 
좋은 아침이에요
 
안녕하세요 저는 간단한 팝업입니다
많은 공간을 차지하지 않는 사람

Chrome 버튼을 클릭하면 방금 작성된 페이지를 변경하여 팝업을 자동으로 열면 지금 우리가해야 할 전부입니다.

확장을 테스트하십시오

우리는 이제 확장자를 테스트하고 싶습니다. 확장 패널을 통해 TET 충전 버튼을 클릭 한 다음 확장자가 포함 된 폴더를 선택해야합니다. 자동으로 확장자의 아이콘이 나타납니다.

스크립트

반드시 팝업을 표시하는 확장 기능은 비교적 제한적입니다 ! 다행히도 JavaScript를 사용하여 확장에 다른 동작을 추가 할 수 있습니다. 달성하고자하는 것에 따라 JavaScript를로드하는 방법에는 여러 가지가 있습니다.

팝업의 JavaScript

팝업에 직접 JavaScript를로드하는 것이 가능한 모든 것입니다. 실제로 이것은 태그로 JavaScript 파일을로드 할 수있는 클래식 웹 페이지입니다 .

 // HTML H1 컨텐츠에 스크립트를로드합니다 
좋은 아침이에요
 
안녕하세요 저는 간단한 팝업입니다
많은 공간을 차지하지 않는 사람

즉, JavaScript 파일은 팝업의 개구부에서만로드됩니다. 갑자기 사용자가 버튼을 지원하지 않으면 JavaScript가 실행되지 않습니다

“배경”의 JavaScript

팝업이 배포되지 않은 경우에도 코드를 활성화시키기 위해 백그라운드에서 JavaScript를 실행할 수도 있습니다. 이렇게하려면 매니페스트 파일을 변경해야합니다.JSON은로드하려는 JavaScript 파일로의 경로를 포함합니다.

컨텐츠 스크립트

그만큼 행복한 스크립트 웹 페이지의 맥락에서 실행되고 DOM을 사용하여 상호 작용할 수있는 JavaScript 파일입니다. 배경에서 시작된 스크립트와 달리이 스크립트는 Chrome API에 액세스 할 수 없습니다.*. 또한 비교적 분리되어 작동하며 주사 된 웹 페이지에서 정의 될 JavaScript 기능에 액세스 할 수 없습니다.

이 유형의 하중은 웹 페이지와 직접 상호 작용하여 글꼴 크기를 변경하거나 특정 항목을 조작 할 때 사용됩니다.

크롬 알림

마지막으로, 알림에 관한 작은 보너스. Google Chrome에서는 사용자의 데스크탑에 표시 될 알림 시스템을 관리 할 수 ​​있습니다. 이 API를 사용하려면 매니페스트 파일에서 미리 허가를 요청해야합니다.JSON .

"권한": [// 권한, 우리는 "http : //*/*", "https : //*/*", "탭"아래로 돌아올 것입니다. // 알림 활성화],

이 작업이 완료되면 알림을 관리 할 수있는 클래스를 사용할 수 있습니다.

var notification = 새로운 알림 ( '주목 제목 !', < icon: 'votreicon.jpg', body: "Votre petite description de la notification", >);

이 클래스는 Google Chrome에 고유하지 않지만 여러 브라우저에 새로운 API가 있거나 차단됩니다. 작동 방식에 대한 자세한 정보를 원한다면 문서를 시청하도록 초대합니다. 확장의 경우 이점은 사용자가 이미 알림을 직접 시작할 수있는 권한을 수락했다는 것입니다.

크롬 확장에서 사용자를 연결하십시오

이 문서는 Identity 플랫폼을 사용하여 Chrome 확장에서 사용자를 연결하는 방법을 설명합니다.

중요한 : Identity Platform은 Manifest V2를 사용하는 확장과 호환됩니다. Manifest V3는 팝업 작업을 제공하지 않기 때문에 호환되지 않습니다. 중요한: 크롬 확장에서 전화 또는 다중 인증 인증을 사용할 수 없습니다.

시작하기 전에

  • ID 플랫폼을 활성화하고 ID 제공자를 구성하십시오. 방법을 알아 보려면 빠른 시작 -UP를 참조하십시오.
  • 내용의 content_security_policy의 승인 목록에 다음 URL을 추가하십시오
    • https : // apis.Google.com
    • https : // www.Gstatic.com
    • https : // www.googleapis.com
    • https : // securetoken.googleapis.com

    자세한 내용은 CSP 문서를 참조하십시오.

    확장자의 ID를 저장하십시오

    크롬 확장에서 사용자를 연결하려면 Extension ID를 승인 된 도메인으로 저장해야합니다

    1. 페이지에 액세스하십시오 설정 Google Cloud 콘솔의 ID 플랫폼. 설정 페이지에 액세스하십시오
    2. 탭을 클릭하십시오 보안.
    3. 섹션에서 공인 도메인 (공인 영역), 클릭하십시오 도메인 추가 (도메인 추가).
    4. 확장의 URI를 입력하십시오. 이 확장은 일반적으로 이것과 비슷합니다 : Chrome-expension : // chrome_extension_id .
    5. 클릭 추가하다.

    사용자의 연결로 진행하십시오

    크롬 확장의 사용자 연결은 웹 응용 프로그램과 유사하며 몇 가지 차이점과 비슷합니다

    • 전화 및 다중 인 인증은 지원되지 않습니다.
    • Chrome Extensions는 HTTP 리디렉션을 사용할 수 없습니다. 따라서 사용자를 연결하려면 팝업 작업 (SigninWithPopup () 및 LinkWithPopup ())을 사용해야합니다.
    • 브라우저 동작의 인증 방법 호출은 브라우저의 동작을 취소합니다. 그래서 당신은 오히려 백그라운드의 스크립트에서 전화해야합니다.
    • 팝업 방법은 Manifest V2를 사용하는 확장에서만 사용할 수 있습니다.

    다음 예는 사용자와 Google과의 연결을 보여줍니다

    자바 스크립트

    팝업.JS

    // 배경 페이지에 대한 참조를 얻습니다. Const Bgage = Chrome.확대.getbackgroundpage (); // 팝업으로 로그인, 일반적으로 버튼 클릭에 첨부. BGPAGE.SignInwithPopup ();

    배경.JS

    const app = firebase.InitializeApp (config); const auth = 앱.작가 (); const SignInwithPopup = () => < const provider = new firebase.auth.GoogleAuthProvider(); return auth.signInWithPopup(provider).catch((error) =>< console.log(error); >); >;

    다음 단계

    • 다른 신분 공급자와 사용자를 연결하십시오.
    • Identity Platform 사용자에 대해 자세히 알아보십시오.

    논평

    달리 명시되지 않는 한,이 페이지의 내용은 Creative Commons 할당 4 라이센스에 의해 관리됩니다.0 및 코드 샘플은 Apache 2 라이센스에 의해 관리됩니다.0. 자세한 내용은 Google 개발자 사이트의 규칙을 참조하십시오. Java는 Oracle 및/또는 계열사의 등록 상표입니다.

    2023/06/17 (UTC)의 마지막 업데이트.

    Google 크롬 확장 용 RingCentral

    Google Chrome Extension 용 Ringcentral의 최신 기능, 개선 및 버그 수정 사항을 최신 상태로 유지하십시오.

    버전 21.삼.30 (RC)

    출시일 : 09/29/2021

    • 회사 디렉토리에서 사용자 프로필을 숨길 가능성

    늪지 수정

    • 떠 다니는 창에 RC 로고 표시
    • 아이콘은 방해하지 않습니다

    출시일 : 07/28/2021

    • 초대장에서 회의에 룸 커넥터 RingCentral 비디오의 세부 사항을 추가 할 수 있습니다

    출시일 : 01/22/2021

    • RingCentral 비디오 :
      • 대기실의 활성화
      • 글로벌 액세스 번호
      • 전자 메일로 초대장에서 비밀번호의 자동 구성
      • 비 -PMI 회의를위한 비밀번호의 자동 응용 프로그램
      • 웹 서비스의 잠금 매개 변수의 값 준수
      • RingCentral 비디오
        • “참가자는 나에게만 회의에 참여할 수 있습니다”로 대체하여 “호스트 이전에 가입”라벨의 업데이트
        • 비밀번호 UX의 개선

        출시일 : 23/09/2020

        • 연락처 세부 정보 페이지에는 이제 사이트 필드가 포함되어 있습니다
        • 확장 번호는 이제 활성화 된 사이트 코드로 표시됩니다
        • 짧은 연장 번호와의 접촉을 검색 할 가능성
        • 짧은 연장 번호의 구성
        • 단일 링 아웃 옵션에 3 개의 벨소리 통화 옵션을 융합

        출시일 : 07/31/2020

        • 인증 된 사용자 만 회의에 가입 할 수있는 가능성
        • 화면 공유 옵션은 호스트 및 중재자에만 예약되어 있습니다
        • 추가 보안 옵션 범주
        • 비디오 공급 업체에 대한 확장 변경 알림 수신
        • 통화 종료로 RingCentral 응용 프로그램 사용

        늪지 수정

        • 비상 전화를 걸 수 없습니다

        출시일 : 05/18/2020

        • 웹 발신자의 ID에서 기본 ID ID로 벨소리 정의

        늪지 수정

        • 발신자 통화 목록으로 전송 된 번호 표시

        출시일 : 04/22/2020

        • 계획된 회의를위한 회의 비밀번호 추가
        • 기능의 비활성화 “호스트 이전에 조인”

        출시일 : 04/09/2020

        늪지 수정

        • Google의 안건에 관한 컨퍼런스의 드롭 다운 메뉴에서 이중 회의 옵션 수정.

        출시일 : 02/04/2020

        늪지 수정

        • 24 시간 후 회의 만료 문제 해결.
        • RingCentral 회의를 구성하기 위해 번호 수의 수정

        출시일 : 28/10/2019

        • Google 정책을 준수하기 위해 제한된 사용에 대한 준수 공개를 숨기는 옵션
        • 최근 활동에서 Gmail 탭 삭제 (Google을 성공적으로 확인하려면 Gmail API에 전화하지 마십시오)
        • Google 정책을 준수하기 위해 제한된 사용에 대한 준수 공개 추가
        • C2D/SMS 블랙리스트 관리
        • “회의 추가”드롭 다운 목록에서 회의 추가 옵션 추가
        • Google의 RingCentral도 설치되면 Google의 안건 확장이 우선 순위입니다.
        • C2D 주입은 HTML/텍스트 게시자, 특히 RadeDeror를 방해합니다
        • Google 아젠다에서 호출 할 클릭 아이콘의 잘못 표시
        • 새로운 확장 승인을 위해 Google Contact API 수정
        • 페이지에서 원격 통화 모니터 개선 모든 통화
        • 사용자가 연결되지 않은 경우 회의를 가리는 옵션
        • 뉴스 페이지에서 버전 번호 삭제

        늪지 수정

        • 연락처 페이지에 대한 연구는 때때로 응용 프로그램의 적용을 유발할 수 있습니다
        • Google 연락처와 일치 할 수 없습니다
        • 메시지 보내지 못한 후 대화 페이지로 보낼 버튼 비활성화
        • 존재 상태를 올바르게 업데이트 할 수 없습니다
        • 메시지를 입력 할 때 텍스트 끝에서 커서에서 지연 및 점프
        • 수정 가능한 콘텐츠 필드에서 전화 번호 콜라주는 C2D 주입을 유발할 수 있습니다
        • 새 페이지의 오래된 반지 중앙 로고
        • Google의 안건 페이지의 “회의 추가”드롭 -다운 목록에서 RingCentral 동창회 옵션 누락
        • 업데이트/수정 후 컨퍼런스에 대한 최신 정보 표시
        • 신제품 용 홈페이지 추가
        • 주입은 전화를 클릭하여 전화/보내기가 때때로 올바른 위치에 나타나지 않습니다.
        • 옵션 전화를 클릭하고 클릭하여 모든 웹 페이지에서 기본 SMS를 보내십시오
        • 모든 통화 제어 (전화 요청 및 전화 요청 제외)
        • Chrome 웹 페이지의 RingCentral 확장에 대한 액세스
        • 새로운 사용자 인터페이스
        • 전문 SMS 및 내부 SMS
        • Google 및 RingCentral 디렉토리의 동기화
        • SMS에서 디렉토리에 대한 액세스
        • 번호 매기기에서 디렉토리에 대한 액세스
        • 보컬/팩스 메시징 기능의 활성화
        • 원격 회의 기능의 활성화
        • 자세한 명함
        • Google의 안건의 통합
        • 기능 프로토 타입을 흑백 목록에 넣을 가능성 (특정 웹 사이트가 RingCentral 및 C2D 사용자 인터페이스를 표시하지 않도록합니다)
        • 보컬 메시징에 호소력을 보냅니다
        • 들어오는 통화 전송
        • SMS에 의한 신뢰에 대한 응답
        • 존재 상태 수정
        • RingCentral 회의 협업 지원
        • 저희에게 문의하십시오
        • 소식
        • ringcentral 지원
        • RingCentral 회의를위한 Google Ho
        • WEBRTC 오류 배지 (WEBRTC 호출에 문제가 발생한 경우 오류 알림 표시)
        • 응용 프로그램이 줄어드면 링 센트 랄 배지에 입력하는 통화 통지 (브라우저 알림 외에)