Connect users from a Chrome extension

We want to create an extension that works on a pop-up system. To create the latter, we just need to create a classic HTML page. As configured in the Manifest file.JSON we will use a popup file.html

Google Chrome tutorial: Create an extension

I invite you to discover how to create an extension for the Google Chrome web browser. Creating an extension may seem complex, but don’t be frightened ! Indeed, Google Chrome extensions can be created with languages ​​that we know well: JS, HTML and CSS.

The little prerequisite

First you need to activate the Developer mode in chrome settings to be able to load your extension. To do this you go to your settings> More tools> Extensions and check the box Developer mode. You should then see three new buttons appear to load extensions.

Configure your extension

The starting point for creating an extension is the creation of a Manifest file.JSON at the root of your file. He will contain all the information concerning the configuration of the extension such as the name, the description, the scripts to be loaded.

< "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 >, "Icons": < // 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 >>

All the parameters available for this file are described in the documentation.

Permissions

By default your extension will be in a sort of sandbox and will not have access to anything. In some cases, we want to create extensions capable of communicating with web pages, or with certain browser APIs. It will then be necessary to specify in our configuration which permissions we wish to obtain (these permissions will be requested during the installation of the extension). These permissions can take two forms:

• A character string representing a particular type of permission, for example access to TABS tabs (list of permissions)
• A reason representing an URL format to which we will access (match patterns)

"Permissions": [// permissions, we will come back below "http: //*/*", "https: //*/*", "tabs" // tabs is permission to create new tabs],

For the “http: ///“and the” https: ///“, We tell him that the extension can work on all HTTP or HTTPS pages.

Create a pop-up

We want to create an extension that works on a pop-up system. To create the latter, we just need to create a classic HTML page. As configured in the Manifest file.JSON we will use a popup file.html

 H1, p 
Good morning
 
Hello I am a simple popup
who does not take up much room

That’s all we have to do for the moment, when we click on the Chrome button will automatically open the pop-up by changing the page that we have just written.

Test its extension

We now want to test our extension, for that we will have to go through the extension panel and click the TET charge button then Select the folder containing your extension. Automatically, you should see the icon of your extension appear.

Script

Necessarily an extension that displays a pop-up, it is relatively limited ! Fortunately, we can use JavaScript to add different behaviors to our extension. There are several ways to load Javascript depending on what you want to accomplish.

Javascript in pop-up

It is first of all possible to load JavaScript directly in pop-up. Indeed, this is a classic web page on which we can load any JavaScript file with the tag .

 // We load our script in the HTML H1 content, p 
Good morning
 
Hello I am a simple popup
who does not take up much room

That said, the JavaScript file will only be loaded at the opening of the pop-up, suddenly if the user never supports the button, your JavaScript will never be executed

Javascript in “background”

It is also possible to execute javascript in the background to keep your code active even when pop-up is not deployed. To do this, they will have to change the Manifest file.JSON to include the path to the JavaScript file that we want to load.

The content scripts

THE Happy scripts are JavaScript files that will be executed in the context of the web page and which can interact with it using the DOM. Unlike the scripts launched from background these scripts do not have access to chrome apis.*. In addition, they operate relatively isolated and do not have access to JavaScript functions which would be defined in the web page on which they are injected.

This type of load will be used when you want to interact directly with the web page to change the font size or manipulate certain items.

Chrome notifications

Finally, small bonus concerning notifications. On Google Chrome it is possible to manage a notification system that will be displayed on the user’s desktop. If you want to use this API, you will need to ask permission beforehand in the Manifest file.json .

"Permissions": [// permissions, we will come back below "http: //*/*", "https: //*/*", "tabs", // tabs is permission to create new tabs "Notifications" // Activates notifications],

Once this is done, we can use the class allowing to manage the notifications.

Var notification = new notification ('title of the notive !', < icon: 'votreicon.jpg', body: "Votre petite description de la notification", >);

This class is not unique to Google Chrome, but is a new API has or blocks in several browsers. If you want to have more information on how it works, I invite you to watch the documentation. The advantage in the case of an extension is that the user has already accepted permissions which allows notifications to get started directly.

Connect users from a Chrome extension

This document explains how to use identity platform to connect users from a chrome extension.

Important : Identity Platform is only compatible with extensions that use Manifest V2. Manifest V3 is not compatible because it does not provide pop-up operations. Important: The use of a telephone or a multifactor authentication from a Chrome extension is not available.

Before you start

• Activate Identity Platform and configure an identity provider. To find out how, see fast start -up.
• Add the following URLs to the Authorizations List of Content_Security_Policy of your extension:
  • https: // apis.Google.com
  • https: // www.gstatic.com
  • https: // www.googleapis.com
  • https: // Securetoken.googleapis.com

  For more information, see the CSP documentation.

  Save the ID of your extension

  To connect users from a Chrome extension, you must save the extension ID as an authorized domain:

  1. Access the page Settings Identity Platform in the Google Cloud console. Access the Settings page
  2. Click on the tab Security.
  3. In the section Authorized Domains (Authorized areas), click on Add Domain (Add a domain).
  4. Enter the URI of your extension. This extension normally resembles this: Chrome-Expension: // Chrome_extension_id .
  5. Click on Add.

  Proceed to the connection of users

  User connection from a chrome extension is similar to a web application, to a few differences:

  • Telephone and multifactor authentication is not supported.
  • Chrome extensions cannot use HTTP redirects. You must therefore use pop-up operations (Signinwithpopup () and linkwithpopup ()) to connect users.
  • The call for authentication methods from a browser action cancels the action of the browser. So you should rather call them from a script in the background.
  • Pop-up methods can only be used in extensions that use Manifest V2.

  The following example illustrates the connection of a user with Google:

  Javascript

  popup.js

  // get reference to background page. Const Bgage = Chrome.extension.GetBackGroundPage (); // Sign in with popup, typically attached to button click. bgpage.Signinwithpopup (); 

  background.js

  Const app = Firebase.InitializeAPP (config); Const Auth = App.author (); Const Signinwithpopup = () => < const provider = new firebase.auth.GoogleAuthProvider(); return auth.signInWithPopup(provider).catch((error) =>< console.log(error); >); >; 

  Following steps

  • Connect users with different identity providers.
  • Learn more about Identity Platform users.

  Comment

  Unless otherwise indicated, the content of this page is governed by a Creative Commons Assignment 4 license.0, and code samples are governed by a Apache 2 license.0. For more information, see the rules of the Google Developers site. Java is a registered trademark of Oracle and/or its affiliated companies.

  Last update on 2023/06/17 (UTC).

  Ringcentral for Google Chrome extension

  Stay up to date with the latest features, improvements and bug corrections from the Ringcentral for Google Chrome extension.

  Version 21.3.30 (RC)

  Release date : 09/29/2021

  • Possibility to hide the user profile in the company’s directory

  Bogs corrections

  • Display of the RC logo in a floating window
  • Icon not disturb

  Release date : 07/28/2021

  • Possibility to add the details of the Room Connector Ringcentral Video in your invitations to a meeting

  Release date : 01/22/2021

  • Ringcentral Video:
    • Activation of the waiting room
    • Global access numbers
    • Automatic composition of the password from invitations by e-mail
    • Automatic application of a password for non -PMI meetings
    • Compliance with the values ​​of the locking parameters of the web service
    • Ringcentral Video
      • Update of the label “join before the host” by replacing it with “participants can only join the meeting after me”
      • Improvement of the password UX

      Release date : 23/09/2020

      • The contact details page now includes a field for the site
      • The extension number is now displayed with activated site codes
      • Possibility to search for contact with the short extension number
      • Composition of a short extension number
      • Fusion of 3 Ringout call options into a single Ringout option

      Release date : 07/31/2020

      • Possibility of authorizing only authenticated users to join the meetings
      • Screen sharing option reserved only for host and moderators
      • Category of additional security options
      • Reception of notifications for extension changes to the video supplier
      • Use of the Ringcentral application as a call termination

      Bogs corrections

      • Unable to make emergency calls

      Release date : 05/18/2020

      • Definition of Ringout from the ID of the web caller as the default ID ID

      Bogs corrections

      • Display of numbers transferred to the list of calls of callers

      Release date : 04/22/2020

      • Adding a meeting password for planned meetings
      • Deactivation of the functionality “join before the host”

      Release date : 04/09/2020

      Bogs corrections

      • Fixed double meeting options in the drop -down menu of the conference on Google Agenda.

      Release date : 02/04/2020

      Bogs corrections

      • Resolution of the problem of expiration of meetings after 24 hours.
      • Correction of the number of the number to compose Ringcentral Meetings

      Release date : 28/10/2019

      • Option to hide the disclosure of compliance for limited use to adhere to Google’s policy
      • Deleting the Gmail tab in recent activities (to successfully check Google, do not call the Gmail API)
      • Adding the disclosure of compliance for limited use to adhere to Google’s policy
      • C2D/SMS black list management
      • Movement of the Add a meeting option in the “Adding conference” drop -down list
      • The Google Agenda extension is a priority if Ringcentral for Google is also installed.
      • The C2D injection interferes with HTML/text publishers, in particular with Radederor
      • Incorrect display of the click icon to call in Google Agenda
      • Modification of the Google contact API for the new extension authorization
      • Improvement of the remote call monitor in the page All calls
      • Option to mask the meeting if the user is not connected
      • Deletion of the version number in the News page

      Bogs corrections

      • Research on the contact page can sometimes cause the application of the application
      • Unable to match Google contact
      • Disabling the button to send to the conversation page after failure to send the message
      • Unable to update the presence status correctly
      • Delays and jumps from the cursor at the end of the text when entering messages
      • The collage of telephone numbers in a modifiable content field can trigger a C2D injection
      • Old Ringcentral logo on new pages
      • Missing Ringcentral Reunion option in the “Adding conferences” drop -down list on Google Agenda page
      • Display of the most recent information on the conference after update/modification
      • Addition of the home page for new products
      • The injection click to call/send an SMS sometimes does not appear in the right position.
      • Options Click to call and click to send a basic SMS on any web page
      • All call controls (except calling for calls and calling for calls)
      • Access to the Ringcentral extension on any Chrome web page
      • New user interface
      • Professional SMS and internal SMS
      • Synchronization of Google and Ringcentral directories
      • Access to the directory from SMS
      • Access to the directory from numbering
      • Activation of vocal/fax messaging functionality
      • Activation of the teleconference functionality
      • Detailed business card
      • Integration of Google Agenda
      • Possibility to put the functional prototype on black/white list (to prevent certain websites from displaying the Ringcentral and C2D user interface)
      • Sending an appeal to vocal messaging
      • Incoming call transfer
      • Response by SMS to an incoming call
      • Modification of presence status
      • Ringcentral Meetings collaboration support
      • Contact us form
      • News
      • Ringcentral support at
      • Google Ho for Ringcentral conferences
      • Webrtc error badge (display of an error notification in the event of a problem with the webrtc call)
      • Call notification entering the Ringcentral badge when the application is reduced (in addition to the notification of the browser)