artoo.js The client-side scraping companion.

User Interface

Sometimes, when designing a tool or a bookmarklet for non-dev people, you might want to display a UI to facilitate things.

artoo.js therefore enables you to leverage HTML5 Shadow DOM to inject parasitic user interfaces in any web pages.

Example

You want to design a à la carte Google Scholar scraper for researchers.

You would be able, through the library’s UI methods, to display a div with a fixed position on a Google Scholar result page proposing some options to the user as a button to finally download the scraped data as a CSV file.

Note

Building a user interface is never a trivial task and you might want a comfortable development environment to do so.

You might want to check the Yeoman generator which is able to scaffold a full project for a bookmarklet necessiting a user interface.

UI class

Stylesheets & Templates

artoo.ui

The artoo.ui class can be instantiated to create a Shadow DOM instance within the host page.

The main advantage of Shadow DOM in our case is that it will only abide by its own CSS style and not the one of the host page which is incredibly handy when designing parasitic interfaces.

Note however that the Shadow DOM implementations are quite recent and that it will require a fairly modern browser to work.

var ui = new artoo.ui(params);

Parameters

  • name ?string : optional ui identifier.
  • mountNode ?DOMElement : the ui’s Shadow DOM mount node. If none is provided, the body of the page will serve as the ui’s mount node.
  • stylesheets ?string or array : An array of stylesheets names or a single stylesheet name to be injected from artoo.stylesheets.

Properties

  • mountNode : the ui’s mount node.
  • host : the div hosting the Shadow DOM.
  • shadow : the Shadom DOM reference.

artoo.ui.$

A artoo.js’ ui instance comes with its own $ method able to make jQuery selection within its Shadow DOM.

Example

var ui = new artoo.ui();

// Appending a div to the Shadow DOM
ui.$().append('<div class="container"></div>');

// Selecting elements
var $container = ui.$('.container');

artoo.ui.injectStyle

Inject a stylesheet coming from artoo.stylesheets into the ui’s Shadow DOM.

ui.injectStyle(stylesheetName);

artoo.ui.injectInlineStyle

Inject a CSS style string into the ui’s Shadow DOM.

ui.injectInlineStyle(styleString);

artoo.ui.kill

Destroy a ui and its attached Shadow DOM permanently.

ui.kill();

artoo.stylesheets

artoo.stylesheets is a variable where one can store a selection of stylesheets in a JavaScript object.

To see an example of how this variable is used, you should see how projects scaffolded by the Yeoman generator use this variable to make stylesheets accessible to a bookmarklet.

artoo.templates

artoo.templates is a variable where one can store a selection of templates in a JavaScript object.

To see an example of how this variable is used, you should see how projects scaffolded by the Yeoman generator use this variable to make templates accessible to a bookmarklet.