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.
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.
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.
Stylesheets & Templates
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);
divhosting the Shadow DOM.
A artoo.js' ui instance comes with its own
$ method able to make jQuery selection within its Shadow DOM.
var ui = new artoo.ui(); // Appending a div to the Shadow DOM ui.$().append('<div class="container"></div>'); // Selecting elements var $container = ui.$('.container');
Inject a stylesheet coming from
artoo.stylesheets into the ui's Shadow DOM.
Inject a CSS style string into the ui's Shadow DOM.
Destroy a ui and its attached Shadow DOM permanently.
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.
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.