Manipulación de DOM en motor de navegador Chrome

El motor de navegador Internet Explorer se incluye en SiteKiosk Windows como navegador clásico y se mantiene por motivos de compatibilidad incluso tras el lanzamiento de Microsoft Edge en el sistema operativo, cuyas versiones más recientes forman parte del proyecto Chromium, al igual que el motor navegador Chrome (CEF Chromium) alternativo para SiteKiosk.

El SiteKiosk Object Model de SiteKiosk ofrece cientos de objetos, métodos y propiedades para permitir una programación personalizada de SiteKiosk, adicional a los numerosos ajustes que ya ofrece el asistente de configuración. También se desarrolló para el motor de navegador Internet Explorer, y tras la incorporación del motor de navegador Chrome se añadió el método callHostFunction para permitir emulación de las mismas funciones para el motor de navegador Chrome, además de un desarrollo paulatino de un Object Model para motor Chrome.

En este tema tratamos cómo modificar el DOM (Document Object Model) de una página web con el fin de adaptarla a un mejor uso en un Kiosco.

Las páginas web que se utilizan en cualquier proyecto de un kiosco, en general son creadas con antelación antes de tener en mente su potencial desde un terminal. En la mayoría de los casos no tiene importancia. Pero en ocasiones los requerimientos del proyecto para el kiosco pueden necesitar un uso particular para su uso en el terminal (ej. el cambio de tamaño de un botón). Lo ideal sería poder modificar una página en cuestión específicamente para su uso en el kiosco, pero esto no siempre es posible, por ejemplo si no tenemos acceso directo a la edición de esa página.

Con la ayuda del SiteKiosk Object Model el código que permite que la páginas sean mostradas en el navegador SiteKiosk (para el motor de navegador Internet Explorer, para el caso de Chrome ver el tema equivalente) puede alterarse editando directamente el DOM de esa página. Para ello necesitará echar un vistazo al código fuente de la página, por ejemplo utilizando la herramienta para desarrollador de IE, Chrome o Firefox, y encontrar las secciones de código en las que queremos aplicar los cambios.

En el siguiente ejemplo se muestra cómo hacer esto aplicado sobre la página de Google para mostrar "buscar SiteKiosk" como leyenda del botón buscar, y establecer "SiteKiosk" como criterio de búsqueda. Naturalmente, puede cambiar el texto a mostrar y criterio de búsqueda de acuerdo con sus preferencias para adaptarlo a su proyecto.

Copie el código de ejemplo al bloc de notas (o un editor de html), sálvelo como un archivo script con extensión ".js" con el nombre que prefiera, por ejemplo, manipulardom.js, y guárdelo por ejemplo en la carpeta ..\SiteKiosk\Html (que cuenta con permisos por defecto para su ejecución).

Abra el asistente de configuración de SiteKiosk, vaya a Página de inicio y navegador -> Navegador -> Diseño de navegador, haga clic en el botón Avanzado y añada el script como script externo.

Guarde la configuración, arranque SiteKiosk y vaya a https://www.google.com para ver el resultado.

CÓDIGO: SELECCIONAR TODO
SiteKiosk.Logfile.OnMessage = OnMessage;
function OnMessage(seq, time, utcoff, awtype, awlevel, facility, text)
{
if(text.indexOf("Navigation:") !== -1 && text.indexOf("google.") !== -1)
evtid = SiteKiosk.Scheduler.AddDelayedEvent(1000, ManipulateDOM);
}

function ManipulateDOM()
{
for (var i=1;i<=SiteKiosk.WindowList.Windows.Count;i++)
{
try
{
if(SiteKiosk.WindowList.Windows(i).SiteKioskWindow.SiteKioskWebBrowser.WebBrowser.LocationURL.indexOf("https://www.google.") !== -1)
{
SiteKiosk.WindowList.Windows(i).SiteKioskWindow.SiteKioskWebBrowser.WebBrowser.Document.getElementsByName('q').item(0).value = "SiteKiosk";
SiteKiosk.WindowList.Windows(i).SiteKioskWindow.SiteKioskWebBrowser.WebBrowser.Document.getElementsByName('btnK').item(1).value = "Buscar SiteKiosk";
}
}
catch(e)
{
//SiteKiosk.Logfile.Notification("Editing the DOM failed for window: " + SiteKiosk.WindowList.Windows(i).ItemText); //Debug
}
}
}

La parte superior del código revisa en todas las páginas web abiertas para encontrar la que está navegando en Google y entonces aplicar el código.

Tenga en cuenta para este o cualquier otro ejemplo donde manipule una página que debe cuidar todos los aspectos relativos a las leyes locales, propiedad intelectual y copyright, etc. También tenga en cuenta que este ejemplo funcionará mientras que Google no realice cambios en su página web, y de forma análoga para adaptar el funcionamiento de cualquier página web de terceros en su proyecto de kiosco.

La edición del DOM (Document Object Model) de una página a mostrar en el el motor de navegador Chrome de SiteKiosk Windows, se puede conseguir de forma sencilla añadiendo un script en el archivo C:\Program Files (x86)\SiteKiosk\SiteKioskNG\assets\customScriptExtension.js (para sistemas operativos en español puede utilizar la ruta universal en inglés, o de forma equivalente comenzando por "C:\Archivos de Programa (x86)\").

El archivo customScriptExtension.js está vacío por defecto, y se ejecutará para cada página web mostrada en el motor de navegador Chrome de Windows. Por tanto debería asegurarse de añadir el código script para la página que desea manipular.

La manipulación DOM en el motor de navegador Chrome con este archivo no requiere ningún código específico de SiteKiosk. Puede utilizar simplemente Javascript plano.

El siguiente código de ejemplo edita la página principal de Google para incluir SiteKiosk como término de búsqueda y cambiar el texto del botón de Búsqueda a "Buscar SiteKiosk". Observe que el código realiza una revisión básica para comprobar que se navega en la página de Google antes de ejecutar el resto del código Javascript.

CÓDIGO: SELECCIONAR TODO
if (document.URL.indexOf("https://www.google.") !== -1) {
document.addEventListener('DOMContentLoaded', documentLoadedFunc);
}

function documentLoadedFunc(e) {
document.getElementsByName('q').item(0).value = "SiteKiosk";
document.getElementsByName('btnK').item(1).value = "Buscar SiteKiosk";
}

Simplemente copie y pegue el código de arriba en el archivo C:\Program Files (x86)\SiteKiosk\SiteKioskNG\assets\customScriptExtension.js y después arranque SiteKiosk utilizando un archivo de configuración básico (puede utilizar los archivos de configuración de ejemplo con motor de navegador Chrome proporcionados con el instalador). Abra google.com, y compruebe el resultado.