Mind Control

Mind Control is a technique to inject a script into third-party HTML5 applications and webpages. The technique is useful to rapidly integrate HTML5 applications into your Finsemble application in a lightweight way. This tutorial will walk you through the basics of using Mind Control to integrate the Google Drive website into a Finsemble component.

Using The CLI

You can use the Finsemble CLI to create a Mind Control component. To issue CLI commands, remember that your command prompt needs to be navigated to your project's base level (e.g., finsemble-seed, if you are using the default naming conventions of a downloaded Finsemble seed project).

finsemble-cli add component --component-type=mc --url=https://drive.google.com/googleDrive

This will create a Google Drive Mind Control component with a single JavaScript file—googleDrive.js, located at baseURL + src/components/googleDrive/googleDrive.js. It will also create the proper entries so that the file is built by Webpack. This file will injected into your component. Since the file is built by Webpack, you can use require to include other files and libraries.

Manually adding Mind Control to a component

To add Mind Control to a component manually, you need to add the inject property to the component config:

"My Component": {
    "window": {
        "url": "https://someurl.com/foo/bar/",
        ...
    },
    "component": {
        "inject": "myfancyscript.js"
    },
    ...
}

If you don't specify a path for the file, it looks for the file in baseURL + /components/mindcontrol/ folder. Make sure your build process puts the file in that folder. You can also specify a full path if your component lives elsewhere. You can also specify a list of files to be included:

"My Component": {
    "window": {
        "url": "https://someurl.com/foo/bar/",
        ...
    },
    "component": {
        "inject": ["https://myurl.com/myfancyscript.js", "myuberfancyscript.js"]
    },
    ...
}

Further reading

Lightweight integration is also possible through the Assimilation API, which you can read about at the Assimilation tutorial.

Learn more about the CLI by reading the Finsemble CLI tutorial.