Thursday, January 19, 2012

[Solved] chrome-auto-translate-plugin-dialog of Auto-Translate extension of Chrome

It's surprising to me that there are many wordpress plugins that are similar to mine. Some of them are:
  • re.place
  • Real-Time Find and Replace
  • Search Regex
  • Word Replacer
  • WP RegEx Replace
I know that adding another new 'the-same' plugin is not cool. So I decided to test them if they can solve my initial problem - remove html that is automatically inserted with Auto-Translate chrome extension, i.e. div with id chrome-auto-translate-plugin-dialog.
The regexp pattern that find Auto-Translate code is:

<div id=.-chrome-auto-translate-plugin-dialog[^>]*>[\n ]*<div [^>]*><.div>[\n ]*<img [^>]*>[\n ]*<.div>

And I started to test each plugin if it can automatically find this pattern and remove Auto-Translate extension code from TinyMCE editor. Plugins: 're.place', 'Real-Time Find and Replace', 'Word Replacer' didn't replace chrome-auto-translate-plugin-dialog divs. 'Search Regex' plugin find error in my pattern and report error in it's php file. Plugin 'WP RegEx Replace' - escapes all backslashes, so you cannot specify any special symbol (for example, '\n').

So, if you want to remove chrome-auto-translate-plugin-dialog from your wordpress editor use HTML Regex Replace plugin, and the Regexp is:
<div id=.-chrome-auto-translate-plugin-dialog[^>]*>[\n ]*<div [^>]*><.div>[\n ]*<img [^>]*>[\n ]*<.div>

Wednesday, January 18, 2012

Auto-Translate chrome extension or why did I create the plugin?!

Hi there!

This is my first plugin, so if you find any problems please send me a reply with a prob description.

The beginning of plugin history.
One day I found strange pics and html constructions at the foot of my posts (I read them in google-reader). It was found that Auto-Translate plugin for Chrome inserts code into Visual TinyMCE editor (that is used in Wordpress) that can be found only if you switch to HTML view. Something like this:


<div id="-chrome-auto-translate-plugin-dialog" style="display: none; opacity: 1 !important; border-color: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; position: absolute !important; top: 0; left: 0; overflow: visible !important; z-index: 999999 !important; text-align: left !important;">
<div style="max-width: 300px !important; color: #fafafa !important; opacity: 0.8 !important; border-color: #000000 !important; border-width: 0px !important; -webkit-border-radius: 10px !important; background-color: #363636 !important; font-size: 16px !important; padding: 8px !important; overflow: visible !important; background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #000), color-stop(50%, #363636), color-stop(100%, #000)); z-index: 999999 !important; text-align: left !important;"></div>
<img style="position: absolute !important; z-index: -1 !important; right: 1px !important; top: -20px !important; cursor: pointer !important; -webkit-border-radius: 20px; background-color: rgba(200, 200, 200, 0.3) !important; padding: 3px 5px 0 !important; margin: 0 !important;" onclick="document.location.href='http://translate.google.com/';" src="http://www.google.com/uds/css/small-logo.png" alt="" /></div>


At first I tried to find suitable plugin that can fix the problem. Actually the plugin has to remove any specified html (using regexp of course, because how else can you specify such a big piece of html?) from the post. But I didn't find any. That was the initial kick to start developing a new one.

And now I'm going to release the very-first version of HTML Regex Replace plugin that can be used not only to remove annoying chrome-auto-translate-plugin-dialog HTML, but for any automatic replacement you want. And with the power of regular expressions!

I'm waiting for plugin review by wordpress.org team and ASAP will release it to the public.