Advertisement
  1. Computer Skills

Crea tu propia extensión personalizada para PopClip

Scroll to top
Read Time: 9 min

() translation by (you can also view the original English article)

PopClip es una de nuestras aplicaciones favoritas en Mactuts+ y una de las razones por las que es compatible con extensiones. Puedes realizar acciones en el texto seleccionado usando PopClip que lo hace extremadamente versátil, ya sea que desees abrir un enlace en otro navegador, buscar el texto seleccionado en Google o agregarlo como una tarea a las Cosas, PopClip proporciona un estilo iOS menú emergente que facilita la realización de estas tareas.

En este tutorial, demostraré lo fácil que es crear tu propia extensión para que PopClip realice una acción personalizada.


¿Qué es PopClip?

PopClip provides an iOS-style menu that can be further customised with extensionsPopClip provides an iOS-style menu that can be further customised with extensionsPopClip provides an iOS-style menu that can be further customised with extensions
PopClip proporciona un menú estilo iOS que se puede personalizar aún más con extensiones

PopClip ($4,99) es una aplicación para OS X que proporciona un menú emergente similar a iOS al seleccionar texto. Su uso principal es cortar, copiar y pegar, de nuevo, muy similar a iOS. Donde realmente se pone interesante es la capacidad de instalar extensiones para hacer más que simplemente agregar al portapapeles.

Al momento de escribir este artículo, había más de 92 extensiones disponibles para descargar de forma gratuita. Estas extensiones van desde abrir un enlace en Google Chrome, publicar texto seleccionado en Facebook, agregar comillas alrededor del texto seleccionado y más.

Consejo: hay muchas extensiones y te animo a que eches un vistazo, todas las cuales se pueden encontrar en la página de extensiones de PopClip.

Utilizo PopClip con regularidad y uso una extensión para agregar texto seleccionado a Cosas, mi aplicación de tareas pendientes de elección.


Como están construidos

PopClip admite extensiones escritas de diferentes formas:

  • Servicio Mac OS X
  • AppleScript
  • Guion de concha
  • URL
  • Pulsación de tecla

Tanto URL como Pulsación de tecla no requieren conocimientos de programación para crearlos. Siempre que conozcas la URL de un sitio que puedes incluir texto o presionar una determinada combinación de teclas, puedes crear tu propia extensión.

Los tres restantes se crean utilizando lenguajes de secuencias de comandos. Pueden manipular el texto de una forma más avanzada. Para los propósitos de este tutorial, crearé una extensión usando el método de URL.

Una extensión de URL requiere solo dos archivos, nuestro archivo de configuración de extensión y un icono para mostrar dentro del menú emergente cuando seleccionamos algún texto.


Construyendo nuestra propia

Existe una gran selección de extensiones que podemos usar, pero es posible que no haya una que se adapte exactamente a nuestras necesidades. Como ejemplo, te mostraré cómo crear una extensión PopClip que pueda buscar en Mactuts+ el texto seleccionado.

Para hacer esto, no te mostraré cómo crear uno desde cero, sino que usaremos parte del código de muestra proporcionado por el desarrollador y haremos cambios en él para satisfacer nuestras necesidades. Esto te dará una buena idea de cómo funciona la extensión y qué cambios debemos realizar para comenzar a crear nuestras propias extensiones.

Sugerencia: solo necesitaremos un editor de texto para realizar cambios. TextEdit no es ideal para editar código, por lo que recomendaría algo como TextWrangler, que no solo es una gran aplicación, sino que también es gratuita.


1. Crea una carpeta

You can create this folder anywhere as it will just be somewhere to work from for nowYou can create this folder anywhere as it will just be somewhere to work from for nowYou can create this folder anywhere as it will just be somewhere to work from for now
Puedes crear esta carpeta en cualquier lugar, ya que será un lugar desde donde trabajar por ahora

En tu escritorio (o donde quieras), crea una carpeta llamada mactuts. Aquí es donde almacenaremos nuestros archivos de extensión antes de convertirlos en una extensión PopClip adecuada.


2. Descarga código fuente

En el sitio para desarrolladores de PopClip Extension, podemos descargar algunos ejemplos de código fuente. Bajo el encabezado Descripción general, verás los tipos de acciones que admite PopClip. Queremos descargar el código de ejemplo para la acción URL, que es el código fuente de la extensión del Traductor de Google.

Verás dos archivos dentro de la vista, Config.plist y TranslationIcon.png. Solo nos interesa el archivo de configuración.

Here is what the code looks like when it's opened/pasted into a text editor (in this case, TextMate)Here is what the code looks like when it's opened/pasted into a text editor (in this case, TextMate)Here is what the code looks like when it's opened/pasted into a text editor (in this case, TextMate)
Así es como se ve el código cuando se abre/pega en un editor de texto (en este caso, TextMate)

El archivo de configuración principal de una extensión es lo que se conoce como archivo de lista de propiedades, también conocido como Plist. Es posible que hayas oído hablar de ellos antes, ya que es el mismo tipo de archivo que usa OS X para almacenar las preferencias de las aplicaciones. Se basa en un formato conocido como XML. Tómate unos minutos para familiarizarte con el formato.

¿Parece familiar? XML está diseñado para funcionar de manera similar a HTML, el lenguaje de marcado utilizado para crear páginas web.

Sugerencia: si deseas obtener más información sobre las listas de propiedades, la Biblioteca para desarrolladores de Apple tiene un excelente artículo introductorio que puedes leer.

Si no estás familiarizado con GitHub, puedes descargar la extensión directamente. (Haz clic derecho en el enlace y selecciona Descargar archivo como…, guardándolo en la carpeta mactuts que creamos anteriormente).


3. ¡Editemos!

A estas alturas, deberías haber guardado el archivo Config.plist en tu carpeta mactuts. Editemos ese archivo con un editor de texto.

Como has visto, este archivo tiene varias opciones configurables diferentes. Notarás que una opción se llama Clave. Estos le dicen a PopClip que la extensión puede proporcionar cierta información. No cambiaremos ninguna clave, sino que modificaremos la información que contiene.

Paso 1

The first thing we'll change is the name of the extensionThe first thing we'll change is the name of the extensionThe first thing we'll change is the name of the extension
Lo primero que cambiaremos es el nombre y la descripción de la extensión.

En primer lugar, debemos cambiar nuestro Nombre de extensión y Descripción de extensión. Busca la línea que tiene la clave para esto y cambia el nombre que está en la cadena a continuación, actualmente escrito como "Traductor de Google" en consecuencia. Recuerda, no cambies la clave.

Ahora que cambiaste el nombre de la extensión, cambiemos la descripción para reflejar mejor lo que hace. Siguiendo los mismos pasos anteriores, cambia la descripción para describir mejor lo que hará nuestra extensión de búsqueda Mactuts+. Dejaré que tú decidas qué escribir.

Paso 2

We'll also need to update the version as this is the first Mactuts extension ever! We'll also need to update the version as this is the first Mactuts extension ever! We'll also need to update the version as this is the first Mactuts extension ever!
¡También necesitaremos actualizar la versión ya que esta es la primera extensión de Mactuts!

Ahora, dado que es la primera vez que crearemos esta extensión, hagámosla en la versión 1. Ubica el número de versión cerca de la parte superior del archivo y cámbialo de 2 a 1.

Es posible que hayas notado que, a diferencia del nombre de la extensión, se trata de algo llamado Integer y no Cadena. Entero solo significa que solo está especificando un número, por lo que no hay letras ni caracteres especiales.

Paso 3

The identifier needs to be changed as it is unique to each extension and developerThe identifier needs to be changed as it is unique to each extension and developerThe identifier needs to be changed as it is unique to each extension and developer
El identificador debe cambiarse, ya que es único para cada extensión y desarrollador.

Cada extensión necesita una forma única de ser identificada. En lugar de usar su nombre, usa un identificador especial que parece un nombre de dominio escrito al revés. En este código fuente, lo verás escrito de la siguiente manera:

com.pilotmoon.popclip.extension.google-translate

Cambia esto a lo siguiente:

com.mactuts.extension.mactuts-search

Incluso si cambiamos el nombre de la extensión, PopClip todavía se confundiría si tuviéramos nuestra extensión y la extensión de Traductor de Google instaladas al mismo tiempo.

Paso 4

Ahora es el momento de controlar cómo funciona realmente la extensión. Nuestra extensión buscará en Mactuts+ el texto que has seleccionado. Para hacer esto, necesitamos saber cuál es nuestra dirección de búsqueda.

Abre una nueva pestaña o ventana con Mactuts+ cargado y busca la palabra clave "TEST". Una vez que se complete la búsqueda, echa un vistazo a la barra de direcciones. Deberías ver la siguiente dirección:

http://mac.tutsplus.com/?s=TEST

A partir de esto, podemos ver que la dirección de búsqueda es:

http://mac.tutsplus.com/?s=

Puedes probar esto ingresando la dirección anterior y luego cualquier palabra clave que desees en la barra de direcciones de tu navegador. Una vez que se cargue la página, verás la búsqueda que deseabas.

PopClip utiliza el texto {popclip text} como marcador de posición para el texto que has seleccionado. Lo que esto significa es que la dirección de búsqueda de nuestra extensión será:

http://mac.tutsplus.com/?s={popclip text}

We'll now change the URL that PopClip opens (with the selected text) to search Mactuts+We'll now change the URL that PopClip opens (with the selected text) to search Mactuts+We'll now change the URL that PopClip opens (with the selected text) to search Mactuts+
Ahora cambiaremos la URL que abre PopClip (con el texto seleccionado) para buscar Mactuts+

Esta dirección de búsqueda es lo que impulsará nuestra extensión. En el archivo de configuración, cambia la cadena que se encuentra debajo de la sección de URL a la anterior.

Paso 5

Our icon that PopClip uses needs to be a 256px square with a transparent background and a solid area in blackOur icon that PopClip uses needs to be a 256px square with a transparent background and a solid area in blackOur icon that PopClip uses needs to be a 256px square with a transparent background and a solid area in black
Nuestro icono que utiliza PopClip debe ser un cuadrado de 256px con un fondo transparente y un área sólida en negro.

Con la función de búsqueda principal configurada, necesitamos agregar un icono. El icono debe ser un PNG transparente cuadrado de 256px. Para ahorrar tiempo, incluí uno con el archivo de origen que puedes descargar y usar.

Agrega este icono (o el tuyo propio) a tu carpeta mactuts. He nombrado el icono que te he proporcionado MactutsIcon.png.

Once we've added a new image, we need to update the Config file with the new nameOnce we've added a new image, we need to update the Config file with the new nameOnce we've added a new image, we need to update the Config file with the new name
Una vez que agregamos una nueva imagen, necesitamos actualizar el archivo de configuración con el nuevo nombre

Volviendo al archivo de configuración, necesitamos cambiar el nombre del archivo de imagen al que estamos usando ahora.

Paso 6

Finally, change the title of the extension and remove the "key" and "string" for "Regular Expression"Finally, change the title of the extension and remove the "key" and "string" for "Regular Expression"Finally, change the title of the extension and remove the "key" and "string" for "Regular Expression"
Por último, cambia el título de la extensión y elimina la "clave" y la "cadena" de "Expresión regular"

Cambia el título de la ventana emergente de "Traducir" a "Mactuts+". Además, elimina la clave y la cadena relacionadas con la expresión regular. Este es un extra opcional que no requerimos.

Paso 7

Nuestra extensión ya está lista para funcionar. Para comenzar a usarlo, necesitamos convertirlo en una extensión PopClip. Todas las extensiones de PopClip son en realidad carpetas con nombres especiales. No hay herramientas de conversión ni trucos de línea de comandos que hacer.

Duplicate the folder we've been working with and rename it, adding ".popclipext" to the endDuplicate the folder we've been working with and rename it, adding ".popclipext" to the endDuplicate the folder we've been working with and rename it, adding ".popclipext" to the end
Duplica la carpeta con la que hemos estado trabajando y cámbiale el nombre, agregando ".popclipext" al final

En primer lugar, duplica la carpeta. Con la carpeta recién duplicada, cámbiale el nombre a mactuts.popclipext. El Finder te pedirá que confirmes que deseas cambiarle el nombre.

You'll be asked if you're sure you want to add a file extension to the duplicated folderYou'll be asked if you're sure you want to add a file extension to the duplicated folderYou'll be asked if you're sure you want to add a file extension to the duplicated folder
Se te preguntará si estás seguro de que deseas agregar una extensión de archivo a la carpeta duplicada.

4. Instala y prueba la extensión

PopClip will warn that this extension isn't signed, meaning it wasn't approved by the developer. As it's brand new, that's okPopClip will warn that this extension isn't signed, meaning it wasn't approved by the developer. As it's brand new, that's okPopClip will warn that this extension isn't signed, meaning it wasn't approved by the developer. As it's brand new, that's ok
PopClip advertirá que esta extensión no está firmada, lo que significa que no fue aprobada por el desarrollador. Como es nuevo, está bien.

Una vez convertido, haz doble clic en el archivo de extensión recién creado para instalar. Recibirás una advertencia de PopClip que te explicará que esta no es una extensión aprobada. No te preocupes, esto solo significa que queremos instalar una extensión que no es del sitio web del desarrollador. Confirma que deseas instalarlo y luego se instalará la extensión. Una vez instalado, lo verás en la lista de extensiones que PopClip tienes activas. ¡Al final de la lista estará nuestra extensión Mactuts+ recientemente desarrollada!

Once installed, PopClip will display our new extension in the menuOnce installed, PopClip will display our new extension in the menuOnce installed, PopClip will display our new extension in the menu
Una vez instalado, PopClip mostrará nuestra nueva extensión en el menú

Ahora para probarlo. Resalta un poco de texto en cualquier lugar y cuando aparezca PopClip, ahora deberías ver la pantalla de nuestro botón de búsqueda Mactuts+.

Selecting text will display the PopClip menu... along with our new extension!Selecting text will display the PopClip menu... along with our new extension!Selecting text will display the PopClip menu... along with our new extension!
Al seleccionar texto, se mostrará el menú PopClip... ¡junto con nuestra nueva extensión!

Al hacer clic en él, se abrirá una nueva pestaña o ventana (o incluso se iniciará) tu navegador predeterminado y se abrirá directamente a la página de resultados de búsqueda para lo que seleccionaste.

When selected, PopClip will open a new tab with the selected text searched on Mactuts+When selected, PopClip will open a new tab with the selected text searched on Mactuts+When selected, PopClip will open a new tab with the selected text searched on Mactuts+
Cuando se selecciona, PopClip abrirá una nueva pestaña con el texto seleccionado buscado en Mactuts+

Terminando

Al final de este tutorial, espero que hayas podido aprender mucho de él y comenzar a crear extensiones más avanzadas. La página del desarrollador de la extensión PopClip en GitHub te proporciona el código fuente para todo tipo de extensiones para que pueda ver exactamente cómo funcionan.

Dado que crear una extensión para PopClip puede ser increíblemente fácil, es posible que no necesites esperar a que alguien desarrolle una extensión que ha estado esperando, ¡es posible que puedas crearla tú mismo!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Computer Skills tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.