DEV Community: dani

How to use preload script in Electron Webview with React

dani — Wed, 15 Jun 2022 09:49:31 +0000

The preload attribute requires to use the file: protocol.
Because of the way electron and webpack work, it's a nightmare to use the preload attribute from the Renderer process, in the DOM.

The trick is to do it from the Main process.

In src/main/main.ts:

app.on('web-contents-created', (_event, contents) => {
  contents.on('will-attach-webview', (_wawevent, webPreferences, _params) => {
    webPreferences.preloadURL = `file://${__dirname}/webview-preload.js`;
  });
});

In src/main/webview-preload.js:

document.addEventListener(
  'DOMContentLoaded',
  () => {
    // YOUR CODE HERE
  },
  false
);

If this article helped you, please have a look at our Browser built with Electron, React, TypeScript and Redux: https://github.com/danielfebrero/bonb-browser

How to use and Measurement Protocol with Electron

dani — Tue, 14 Jun 2022 11:44:12 +0000

Abstract

Bonb is a browser based on Electron. It's being developed by a small international team. It's open source, and can be downloaded on github: https://github.com/danielfebrero/bonb-browser

In this article, we will use terms such as Main or Renderer process. We assume that you have at least a basic knowledge of Electron.

Also, we are looking for beta testers and cofounders of any kind.

Securing Electron Webview tag

Preload a script

Instead of setting a preload attribute in the tag from the Renderer process, we force it's value directly in the Main process. It reduces the attack vectors and facilitates the import of the preload file.

app.on('web-contents-created', (_event, contents) => {
  contents.on('will-attach-webview', (_wawevent, webPreferences, _params) => {
    webPreferences.preloadURL = `file://${__dirname}/webview-preload.js`;
  });
});

Opening pop-ups

A browser needs to support pop-ups and new windows. What we did is to intercept the 'new-window' event, and use a custom method 'addBrowser', after filtering the url with an adblocker.

In the renderer:

webview.addEventListener('new-window', (e) => {
    if (!isBlockedUrl(e.url)) addBrowser({ url: e.url });
});

Also, to prevent a new window opening from the Main process, we intercept the event and prevent default:

app.on('web-contents-created', (_event, contents) => {
  contents.on('new-window', (e) => {
    e.preventDefault();
  });
});

Permission requests

We have not completed the permission requests (webcam, mic...) implementation yet. Meanwhile, we are rejecting all requests:

session
      .fromPartition('user-partition')
      .setPermissionRequestHandler((webContents, permission, callback) => {
        callback(false);
      });

Implement Google Analytics in Electron

By default, Gtag is not compatible with electron, because of the file protocol used to serve the app. We won't learn how to implement Gtag in Electron, but how to use the Measurement Protocol of Google Analytics.

Measurement protocol

The measurement protocol permits collecting analytic data through https requests. It requires to create an 'api_secret' for the property.

Main or Renderer process?

Because of CORS policy, it's less secure to implement Google Analytics in the renderer. You will prefer send the request from the Main process, after receiving events from the Renderer process.

For example, in the Main process:

const sessionId = v4();

const makePayload = (eventName: string, params?: Record<string, unknown>) => {
  return {
    client_id: machineIdSync(),
    events: [
      {
        name: eventName,
        params: {
          app_is_packaged: app.isPackaged ? 'true' : 'false',
          engagement_time_msec: 1,
          app_name: 'Bonb',
          app_version: appPackageJson.default.version,
          session_id: sessionId,
          ...params,
        },
      },
    ],
  };
};

export const event = (eventName: string, params?: Record<string, unknown>) => {
  const payload = makePayload(eventName, params);
  axios
    .post(
      'https://google-analytics.com/mp/collect?api_secret=&measurement_id=G-',
      payload
    )
    .catch(console.log);
};


ipcMain.on('analytics', async (_event, args) => {
  event(args.eventName, args.params);
});

And in the Renderer process:

window.electron.ipcRenderer.sendMessage('analytics', {
    eventName: 'browser_navigate',
 });

Logging users

As specified in the documentation, events don't trigger a user on Google Analytics. If you want to count one user when using the Measurement Protocol, you should add two parameters in the payload: 'engagement_time_msec' and 'session_id'.

How to write Chaincode Contract for Hyperledger Fabric in TypeScript

dani — Sun, 14 Feb 2021 12:36:07 +0000

Hello developer, in this tutorial we will learn how to create Chaincode Contract for Hyperledger Fabric. This post is the first of a series dedicated to setting up a development environment for Hyperledger Fabric.

Create a folder and a package.json file

$ mkdir contracts/myFirstContract
$ cd contracts/myFirstContract
$ touch package.json

Edit contracts/myFirstContract/package.json file (replace with this)

{
    "name": "myfirstcontract",
    "version": "0.1.0",
    "description": "Hyperledger Fabric Chaincode Contract",
    "main": "dist/index.js",
    "typings": "dist/index.d.ts",
    "engines": {
        "node": ">=8",
        "npm": ">=5"
    },
    "scripts": {
        "lint": "tslint -c tslint.json './**/*.ts'  -e './node_modules/**'",
        "pretest": "npm run lint",
        "start": "fabric-chaincode-node start",
        "build": "tsc",
        "build:watch": "tsc -w",
        "prepublishOnly": "npm run build"
    },
    "engineStrict": true,
    "author": "Hyperledger",
    "license": "Apache-2.0",
    "dependencies": {
        "fabric-contract-api": "^2.0.0",
        "fabric-shim": "^2.0.0",
        "hyperledger-fabric-chaincode-helper": "^0.0.14"
    },
    "devDependencies": {
        "@types/chai": "^4.1.7",
        "@types/mocha": "^5.2.5",
        "@types/node": "^10.12.10",
        "@types/sinon": "^5.0.7",
        "@types/sinon-chai": "^3.2.1",
        "chai": "^4.2.0",
        "mocha": "^5.2.0",
        "nyc": "^14.1.1",
        "sinon": "^7.1.1",
        "sinon-chai": "^3.3.0",
        "ts-node": "^7.0.1",
        "tslint": "^5.11.0",
        "typescript": "^3.1.6"
    },
    "nyc": {
        "extension": [
            ".ts",
            ".tsx"
        ],
        "exclude": [
            "coverage/**",
            "dist/**"
        ],
        "reporter": [
            "text-summary",
            "html"
        ],
        "all": true,
        "check-coverage": true,
        "statements": 100,
        "branches": 100,
        "functions": 100,
        "lines": 100
    },
    "resolutions": {
        "class-transformer": "^0.3.1",
        "minimist": "^0.2.1"
    }
}

$ npm install

Create: contracts/myFirstContract/typescript/tsconfig.json

$ touch typescript/tsconfig.json

{
  "compilerOptions": {
      "outDir": "dist",
      "target": "es2017",
      "moduleResolution": "node",
      "module": "commonjs",
      "declaration": true,
      "sourceMap": true
  },
  "include": [
      "./**/*.ts"
  ],
  "exclude": [
      "./**/*.spec.ts"
  ]
}

Create: contracts/myFirstContract/typescript/tslint.json

$ touch typescript/tslint.json

{
  "defaultSeverity": "error",
  "extends": [
      "tslint:recommended"
  ],
  "jsRules": {},
  "rules": {
      "indent": [true, "spaces", 4],
      "linebreak-style": [true, "LF"],
      "quotemark": [true, "single"],
      "semicolon": [true, "always"],
      "no-console": false,
      "curly": true,
      "triple-equals": true,
      "no-string-throw": true,
      "no-var-keyword": true,
      "no-trailing-whitespace": true,
      "object-literal-key-quotes": [true, "as-needed"]
  },
  "rulesDirectory": []
}

Create the entry file: contracts/myFirstContract/typescript/index.ts

$ touch typescript/index.ts

'use strict';

import { MyFirstContract } from './lib/myfirstcontract';
export { MyFirstContract } from './lib/myfirstcontract';

export const contracts: any[] = [ MyFirstContract ];

Create the main file: contracts/myFirstContract/typescript/lib/myfirstcontract.ts

$ touch typescript/lib/myfirstcontract.ts

/*
 * SPDX-License-Identifier: Apache-2.0
 */

'use strict';

import { BlockotusContract } from 'hyperledger-fabric-chaincode-helper';

import type { Context } from 'fabric-contract-api';

export class MyFirstContract extends BlockotusContract {

    constructor(...args) {
        super(...args);
    }

    public async initLedger() {
        console.log('initLedger');
    }

    public helloWorld(ctx: Context) {
        const params = this.getParams(ctx);
        return `Hello ${params[0]}`;
    }

}

Here we are, your first contract with no functionality is ready! 🍾