Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to develop custom filters for the Imagus hover zoom extension?

After I read about Hover Zoom being evil (yikes!), two articles made me instantly switch to another one, called Imagus:

  • Hoverzoom’s Malware controversy, and Imagus alternative - ghacks.net
  • Imagus is a Hover Zoom Replacement to Enlarge Images on Mouseover - LifeHacker

Imagus seems to fit the bill by doing pretty much what Hover Zoom also could, but in addition, it seems to support custom filters (to support more sites), in addition to the huge bunch it already comes packed with.

In the options page, on Chrome, the filters section looks deliciously hackable:

  screenshot

However, at the same time, it seems to be written in what I would call Perl Javascript.

  Perl Coding Best Practices

I consider myself well-versed in Javascript, DOM and Regex, but it's just painful to try to guess what that is doing, so I looked for documentation. It seems like there was an MyOpera blog, and now the website of the project is, for the time being, hosted on Google Docs.

The page doesn't mention anything about how to develop "filters" (or "sieves", as written in that page?)

So, how can I develop a custom filter? I'm not aware of all the possibilities (it seems to be pretty flexible), but even a simple example like just modifying URLs would be good. (turning /thumb/123.jpg into /large/123.jpg or something).

Or even just an explanation of the fields. They seem to be:

  • link
  • url
  • res
  • img
  • to
  • note <- Probably Comment
like image 217
Camilo Martin Avatar asked Jun 04 '14 19:06

Camilo Martin


1 Answers

The fieds can contain a JavaScript function or a Regex.

  • link recives the address of any link you hover over.
  • url uses captured parentheses values from the link field to make an url.
  • res recives whatever page, in text, that was pointed to by url or link.

If one of them is empty, that step is skipped, e.g. no url and res just loads from link's output.
A simple example is the xkcd filter:
link:

^(xkcd\.(?:org|com)/\d{1,5})/?$

Finds links to xkcd comics. If you're unfamiliar with regex, anything between the parentheses is saved and can be used in Imagus as "$n" to refer to the nth capture. Note that if there's a "?:" after the first parentheses it wont get captured.

url:

$1/info.0.json

This simply appends "/info.0.json" to the address from link.

res:

:
if ($._[0] != '{') $ = null;
else $ = JSON.parse($._), $ = [$.img, [$.year, ('0'+$.month).slice(-2),
('0'+$.day).slice(-2)].join('-') + ' | ' + $.safe_title + ' - ' + $.alt + ' ' +
$.link];
return $;

This javascript function parses the JSON file and returns an array where the first element is the link and the second is the caption text displayed under the hoverzoomed image. If you return just a link then the caption will be the alt text of the link.

  • img is used as link is, but for image sources
  • to is used as res or url is

A simple use case is when you want to redirect from thumbnails to hires. Like the filter for wikimapia.org.
img:

^(photos\.wikimapia\.org/p/[^_]+_(?!big))[^.]+

This finds any wikimapia image that doesn't have big in the name.
to:

$1big

Adds big to the url.

  • note is just for notes.

Some filters have links to API docs here.

Now, there's no documentation for this feature yet so I probably missed a lot, but hopfully it'll be enough.

Cheers.

like image 65
lonjil Avatar answered Nov 19 '22 03:11

lonjil