Creating a New Electron Browser Module

    This is not a comprehensive end-all guide to creating an Electron Browser API, rather an outline documenting some of the more unintuitive steps.

    Electron uses as a meta build system to generate files for its compiler, Ninja. This means that in order to tell Electron to compile your code, we have to add your API’s code and header file names into .

    You will need to append your API file names alphabetically into the appropriate files like so:

    filenames.gni

    Note that the Windows, macOS and Linux array additions are optional and should only be added if your API has specific platform implementations.

    Type definitions are generated by Electron using and @electron/typescript-definitions. This step is necessary to ensure consistency across Electron’s API documentation. This means that for your API type definition to appear in the electron.d.ts file, we must create a .md file. Examples can be found in .

    Electron constructs its modules using .

    Here is a basic example of code that you may need to add, in order to incorporate object_template_builder and wrappable into your API. For further reference, you can find more implementations here.

    In your api_name.h file:

    api_name.h

    2. #ifndef ELECTRON_SHELL_BROWSER_API_ELECTRON_API_{API_NAME}_H_
    3. #define ELECTRON_SHELL_BROWSER_API_ELECTRON_API_{API_NAME}_H_
    5. #include "gin/wrappable.h"
    7. namespace electron {
    9. namespace api {
    11. class ApiName : public gin::Wrappable<ApiName>  {
    12.  public:
    13.   static gin::Handle<ApiName> Create(v8::Isolate* isolate);
    14.   // gin::Wrappable
    15.   static gin::WrapperInfo kWrapperInfo;
    17.       v8::Isolate* isolate) override;
    18.   const char* GetTypeName() override;
    19. } // namespace api
    20. } // namespace electron

    In your api_name.cc file:

    api_name.cc

    In the typings/internal-ambient.d.ts file, we need to append a new property onto the Process interface like so:

    typings/internal-ambient.d.ts

    1. interface Process {
    2.     _linkedBinding(name: 'electron_browser_{api_name}', Electron.ApiName);
    3. }

    api_name.cc

    In your file, add your node binding name to Electron’s built-in modules.

    shell/common/node_bindings.cc

    1.   V(electron_browser_{api_name})

    We will need to create a new TypeScript file in the path that follows:

    An example of the contents of this file can be found here.

    Expose your module to TypeScript

    lib/browser/api/module-list.ts