Objetivos: + Comprender el concepto de extensión de navegador en el contexto de la Aumentación Web. ++ Cómo desarrollar extensiones compatibles con múltiples navegadores. ++ Arquitectura de una extensión ++ Tipos de scripts (privilegios, mecanismos de comunicación) ++ Manipular el DOM: contenido, estructura, estilo, comportamiento ++ Consumir contenido externo e integrarlo en la página actual ++ Determinar un contexto de uso del usuario + Desarrollar una webextension, que permita explorar la API provista por los diferentes navegadores. ++ecma6, git, npm, webextensions, webextension-polyfill

1. Aumentación Web del lado del cliente
con webextensions
Gabriela BOSETTI
LIFIA, Facultad de Informática, UNLP
gbosetti@lifia.info.unlp.edu.ar
Curso “Adaptación, personalización y Refactorización de aplicaciones Web”
Facultad de Informática, UNLP
Septiembre, 2018

2. Objetivos de la clase
● Comprender el concepto de extensión de navegador en el contexto
de la Aumentación Web.
○ Cómo desarrollar extensiones compatibles con múltiples navegadores
○ Arquitectura de una extensión
○ Tipos de scripts (privilegios, mecanismos de comunicación)
○ Manipular el DOM: contenido, estructura, estilo, comportamiento
○ Consumir contenido externo e integrarlo en la página actual
○ Determinar un contexto de uso del usuario
● Desarrollar una webextension, que permita explorar la API provista
por los diferentes navegadores.
○ ecma6, git, npm, webextensions, webextension-polyfill...
2

3. Extensiones de navegador
● Es una de las técnicas que permiten
adaptar aplicaciones Web de acuerdo de
los requerimientos del usuario.
● También se puede agregar componentes a
de la GUI del navegador
Personalizar la
experiencia de
navegación
● Las modificaciones necesarias se hacen mediante manipulación del DOM,
del lado del cliente.
● Las webextensions
○ tienen acceso a gran parte de los componentes y el comportamiento
del navegador.
○ Diferentes navegadores implementan una misma API.
○ Actualmente esta API es un borrador publicado por el Browser
Extension Community Group de la W3C.
3

4. Varias versiones de un mismo navegador
● Firefox
○ Add-on SDK
○ Bootstraped extensions
○ Overlay extensions
○ Firefox for Android SDK
4

5. Algunas diferencias
● Algunas claves del manifest.json son diferentes
● Algunas firmas de mensajes son diferentes, sobre todo
aquellos en donde hay un callback o una Promise.
● Los espacios de nombres para acceder a la API son diferentes:
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities
5

6. Algunas diferencias
browser.runtime.sendMessage(
extensionId, // optional string
message, // any
options // optional object
)
chrome.runtime.sendMessage(
string extensionId,
any message,
object options,
function responseCallback
)
Promise
Callback
6

7. Algunas diferencias
● El borrador de estándar propone trabajar con Promesas
Promise<any> sendMessage(
long tabId,
any message,
optional BrowserExtTabSendMessageOptions details
);
● Existe una librería que permite las webextensions
“estandarizadas” puedan correr sobre aquellos navegadores
con API no estandarizada, con ningún o muy pequeños
cambios.
7

8. Componentes UI del browser
Cada extensión debe complir un único
propósito. Por ello:
● 1 solo botón en el toolbar
● 1 sidebar
● 1 entrada en el menú contextual
● ...
8

9. Componentes UI dentro de una página
● Sin embargo, se pueden generar
otros “componentes” dentro de la
capa de presentación de una
página
“Note that it's not possible for extension
to open sidebars programmatically:
sidebars can only be opened by the user”
https://developer.mozilla.org/en-US/docs
/Mozilla/Add-ons/WebExtensions/user_in
terface/Sidebars
Solución posible
9

10. Anatomía
Background
scripts
Content scripts
Browser UI
components
(e.g. browser action,
popup, context menus)
options
Web accessible
resources
Page actions
10

11. Dos tipos de scripts
Background scripts Content scripts
● Se ejecutan en el
contexto del navegador
● Una sola instancia por
navegador.
● No tienen tantas
restricciones como los
scripts convencionales
(ej. pueden evitar la
SOP)
● NO pueden manipular el
DOM.
● Browser-side debugging
tools
● Se ejecutan en el
contexto de una página
Web.
● Una instancia por
página.
● Pueden manipular el DOM.
● Tiene las restricciones
de un page-script.
● Page-side debugging
tools
11

12. Manipulación del DOM
div
div
div
h3
a
div
h3
a
div
div
h3
a
div (2) Application’s source code
(1) Application UI
(3) DOM
12

13. Dos tipos de scripts
Background
scripts
Content
scripts
browser.tabs.sendMessage
browser.runtime.sendMessage
browser.runtime.
onMessage.addListener
browser.runtime.
onMessage.addListener
13

14. Dos debuggers
Background
Content
14

15. Hands-on!
15

16. Crear el repo
1. Instalar git
2. Crear un nuevo repo en Github
3. Abrir una terminal donde queremos
que se encuentre el proyecto:
4. git clone https://.../demo.git
GIT: https://git-scm.com/downloads
Git cheatsheet: https://services.github.com/on-demand/downloads/github-git-cheat-sheet.pdf
16
servicio de
alojamiento
basado en web
para control de
versiones usando
git
software de control
de versiones

17. demo
⌙ readme.md
⌙ /docs
⌙ /tests
⌙ /src
Crear el esqueleto
Más allá de la anatomía, vamos a estructurar el proyecto en:
⌙ manifest.json
⌙ /resources
⌙ /options
⌙ /content_scripts
⌙ /background_scripts
Base de un proyecto, no necesariamente de
una webextension
⌙ main.js
⌙ ClassName.js
⌙ main.js
⌙ ClassName.js
17

18. readme.md
● Debe ser escrito en Markdown: un lenguaje de “marcado
ligero” con sintaxis de formato de texto plano.
● Un editor online: https://dillinger.io/
● Debe mencionar:
1. De qué se trata el proyecto
2. Cómo instalar lo necesario
3. Cómo usar lo que instalaron
4. Un ejemplo donde se muestra un
uso concreto
Por ejemplo,
https://github.com/gbosetti/todo-list-mongo-backend
#BuenaPráctica
18

19. manifest.json
Especicicación para Firefox: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json
Especificación para Chrome: https://developer.chrome.com/extensions/manifest
Especificación para Opera: https://dev.opera.com/extensions/manifest/
Especificación para Edge: https://docs.microsoft.com/en-us/microsoft-edge/extensions/api-support/supported-manifest-keys
//Required for Firefox, Chrome, Opera and Edge
{
"manifest_version": 2,
"author": "gbosetti",
"name": "Demo",
"version": "1.0"
}
19

20. content_scripts/main.js
document.querySelector("body")
.style["background-color"] = "yellow";
{
...
"version",
"content_scripts": [{
"matches": ["*://*/*"],
"js": [ "content_scripts/main.js" ]
}]
}
Más sobre la manipulación del DOM: https://www.w3schools.com/js/js_htmldom.asp
Manipulación del DOM
20

21. Instalar la extensión
● chrome://extensions/
21

22. Primer commit
● Desde el directorio raíz, creamos el commit:
git add -A
git commit -m "Commit inicial con esqueleto
de la extensión y un script del lado de la
página que cambia su color de fondo"
● Para enviarlo al repo remoto:
git push
Git cheatsheet: https://services.github.com/on-demand/downloads/github-git-cheat-sheet.pdf
22

23. De background al content
mediante Browser action
23

24. Dos tipos de scripts
Background
scripts
Content
scripts
browser.tabs.sendMessage
browser.runtime.sendMessage
browser.runtime.
onMessage.addListener
browser.runtime.
onMessage.addListener
24

25. manifest
Algunos elementos de la UI
del browser tienen una
entrada especial: un popup,
sidebar, options, botón...
"browser_action": {
"default_icon": {
"64": "res/logo-64.png"
},
"default_title": "Demo"
}
Los archivos que necesitamos para
crear nuestra instancia del lado
del navegador. Puede ser más de
uno → [].
"background": {
"scripts": [
"background_scripts/MyClass.js",
"background_scripts/main.js"
]
}
Crear un archivo por clase, con
el nombre de la misma escrito en
CamelCase.
#BuenaPráctica
25

26. background_scripts/main.js
1. Crear la clase BackgroundExtension
● Sabe comunicarse con “la página”
● Sabe obtener el tab actual
2. Crear una instancia de
BackgroundExtension (extension)
3. Enviarle unmensaje desde el listener del
botón
26

27. Gestionando y usando
dependencias:
polyfill, text-mining,
tag-cloud
27

28. Gestionando dependencias
Tener instalado el gestor npm
Inicializamos el proyecto
npm init
Instalamos webextension-polyfill
npm install
webextension-polyfill@^0.2.1
Si clonamos el repo en otra compu:
npm install
28

29. Usando dependencias
"content_scripts": [{
...
"js": [
"node_modules/webextension-polyfill/dist/browser-polyfill.js",
...
]
}],
"background": {
"scripts": [
"node_modules/webextension-polyfill/dist/browser-polyfill.js",
...
]
}
29

30. Excluyendo dependencias del repo
Desde la raíz del proyecto:
git status
git status ./src/
Excluir dependencias
src/node_modules
Gitignore generator: https://www.gitignore.io/
30

31. Compromise
Compromise es una librería para hacer Natural Language
Processing en javascript:
https://www.npmjs.com/package/compromise
Esta librería permite obtener (entre otras cosas), en base a un
cuerpo, las “named-entities” (personas, lugares,
organizaciones). Esto es una manera de permitirnos conocer “el
tema” de una pieza de texto.
NLP: https://en.wikipedia.org/wiki/Natural_language_processing
Named-entity recognition: https://en.wikipedia.org/wiki/Named-entity_recognition
31

32. De content al background
mediante una acción del
usuario
32

33. Dos tipos de scripts
Background
scripts
Content
scripts
browser.tabs.sendMessage
browser.runtime.sendMessage
browser.runtime.
onMessage.addListener
browser.runtime.
onMessage.addListener
33

34. Listeners & send message
browser.runtime.sendMessage({
"call": "retrieveRelatedNews",
"args": { "keywords": topics[0].normal }
}).then(tweets => {
this.presentRelatedTweets(tweets);
});
document.querySelectorAll("div, p").forEach(div => {
div.addEventListener("dblclick", (evt) => {
...
});
});
Runtime > sendMessage: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage
34
Event listeners: https://www.w3schools.com/js/js_htmldom_eventlistener.asp

35. Recuperando
contenido externo
35

36. Same-origin policy
● Es parte del modelo de seguridad de una aplicación Web
● El navegador permite a los scripts de una página consumir datos
de otra, sólo si ambas pertenecen al mismo origen.
● Si los documentos son recuperados de distintos orígenes, son
aislados.
● Origen
○ esquema
○ hostname
○ puerto
Same-origin policy: https://www.w3.org/Security/wiki/Same_Origin_Policy
Ejemplo de caso permitido
http://example.com/doc.html (http, example.com, 80)
http://example.com/target.html (http, example.com, 80)
Ejemplo de caso NO permitido
http://example.com/doc.html (http, example.com, 80)
https://example.com/target.html (https, example.com, 80)
36

37. Recuperando contenido externo
● con XMLHttpRequest (desde el background)
● con un iframe (content + manifest)
○ inyectar en todos los documentos ("all_frames": true) un
content script que notifique el contenido del documento
al cargarse.
● ...
37

38. Opciones
de la extensión
38

39. Recuperando contenido externo
● En qué casos es necesario?
● Una entrada especial en el manifest
● al menos,
○ un archivo html
○ un script para el archivo html
● habilitar en permiso para acceder al storage
39

40. Ejercicio
40

41. Ejercicio
● Con la base de lo que vimos en esta clase, implementar los
mockups diseñados en la primera clase.
41

42. Recursos
42

43. Repo con la demo completa de clase
https://github.com/gbosetti/a-very-basic-demo-of
-webextensions
43

44. Repos con ejemplos de la comunidad
● de Firefox https://github.com/mdn/webextensions-examples
● de Chrome https://developer.chrome.com/extensions/samples
● de Opera
https://dev.opera.com/extensions/extension-samples/
● https://stackoverflow.com/search?q=webextensions
● https://wiki.mozilla.org/IRC
Ayuda de la comunidad
44

45. Aumentación Web del lado del cliente
con webextensions
Gabriela BOSETTI
LIFIA, Facultad de Informática, UNLP
gbosetti@lifia.info.unlp.edu.ar
Curso “Adaptación, personalización y Refactorización de aplicaciones Web”
Facultad de Informática, UNLP
Septiembre, 2018
45