tag:blogger.com,1999:blog-77441318227630038852024-02-20T14:30:58.005+03:00HTML Regex Replace plugin for WPHTML Regex Replace is a plugin for Wordpress. It can replace any html you write in editor (Visual or HTML) with pre-defined string. User can use Regexp to define patterns for replacement.Unknownnoreply@blogger.comBlogger2125tag:blogger.com,1999:blog-7744131822763003885.post-71439480558306858652012-01-19T17:27:00.001+04:002012-01-19T17:27:32.929+04:00[Solved] chrome-auto-translate-plugin-dialog of Auto-Translate extension of ChromeIt's surprising to me that there are many wordpress plugins that are similar to mine. Some of them are:<br />
<ul><li>re.place</li>
<li>Real-Time Find and Replace</li>
<li>Search Regex</li>
<li>Word Replacer</li>
<li>WP RegEx Replace</li>
</ul><div>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 <i>Auto-Translate</i> chrome extension, i.e. div with id chrome-auto-translate-plugin-dialog.</div><div>The regexp pattern that find Auto-Translate code is:</div><div><br />
</div><div><code> <div id=.-chrome-auto-translate-plugin-dialog[^>]*>[\n ]*<div [^>]*><.div>[\n ]*<img [^>]*>[\n ]*<.div></code></div><br />
<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: '<i>re.place</i>', '<i>Real-Time Find and Replace</i>', '<i>Word Replacer</i>' didn't replace chrome-auto-translate-plugin-dialog divs. '<i>Search Regex</i>' plugin find error in my pattern and report error in it's php file. Plugin '<i>WP RegEx Replace</i>' - escapes all backslashes, so you cannot specify any special symbol (for example, '<i>\n</i>').<br />
<br />
<span class="Apple-style-span" style="font-size: large;">So, if you want to remove chrome-auto-translate-plugin-dialog from your wordpress editor use <b><a href="http://wordpress.org/extend/plugins/html-regex-replace/" target="_blank">HTML Regex Replace</a></b> plugin, and the <i>Regexp</i> is:</span><br />
<span class="Apple-style-span" style="font-size: large;"><div id=.-chrome-auto-translate-plugin-dialog[^>]*>[\n ]*<div [^>]*><.div>[\n ]*<img [^>]*>[\n ]*<.div></span></div><div></div><div id="-chrome-auto-translate-plugin-dialog" style="background: transparent !important; border-color: none !important; display: none; left: 0; margin: 0 !important; opacity: 1 !important; overflow: visible !important; padding: 0 !important; position: absolute !important; text-align: left !important; top: 0; z-index: 999999 !important;"><div style="-webkit-border-radius: 10px !important; background-color: #363636 !important; background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #000), color-stop(50%, #363636), color-stop(100%, #000)); border-color: #000000 !important; border-width: 0px !important; color: #fafafa !important; font-size: 16px !important; max-width: 300px !important; opacity: 0.8 !important; overflow: visible !important; padding: 8px !important; text-align: left !important; z-index: 999999 !important;"><div class="translate"></div><div class="additional"></div></div><img onclick="document.location.href='http://translate.google.com/';" src="http://www.google.com/uds/css/small-logo.png" style="-webkit-border-radius: 20px; background-color: rgba(200, 200, 200, 0.3) !important; cursor: pointer !important; margin: 0 !important; padding: 3px 5px 0 !important; position: absolute !important; right: 1px !important; top: -20px !important; z-index: -1 !important;" /></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-7744131822763003885.post-60208365658145576072012-01-18T17:27:00.001+04:002012-01-18T18:56:35.736+04:00Auto-Translate chrome extension or why did I create the plugin?!<div dir="ltr" style="text-align: left;" trbidi="on">Hi there!<br />
<br />
<blockquote class="tr_bq">This is my first plugin, so if you find any problems please send me a reply with a prob description.</blockquote><br />
<u>The beginning of plugin history.</u><br />
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:<br />
<br />
<br />
<div class="html4strict" style="background-attachment: initial; background-clip: initial; background-color: #f8f8f8; background-image: none; background-origin: initial; border-bottom-style: none; border-color: initial; border-color: initial; border-left-style: none; border-right-style: none; border-style: initial; border-top-style: none; border-width: initial; color: #333333; font-family: 'Andale Mono', 'Lucida Console', Courier, monospace; font-size: 12px; margin-bottom: auto; margin-left: auto; margin-right: auto; margin-top: auto; padding: inherit; vertical-align: baseline;"><span class="sc2" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #009900; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><<span class="kw2" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: black; font-family: inherit; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">div</span> <span class="kw3" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #000066; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">id</span><span class="sy0" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #66cc66; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">=</span><span class="st0" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: red; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">"-chrome-auto-translate-plugin-dialog"</span> <span class="kw3" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #000066; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">style</span><span class="sy0" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #66cc66; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">=</span><span class="st0" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: red; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">"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;"</span>></span><br />
<span class="sc2" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #009900; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><<span class="kw2" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: black; font-family: inherit; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">div</span> <span class="kw3" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #000066; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">style</span><span class="sy0" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #66cc66; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">=</span><span class="st0" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: red; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">"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;"</span>><<span class="sy0" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #66cc66; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">/</span><span class="kw2" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: black; font-family: inherit; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">div</span>></span><br />
<span class="sc2" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #009900; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><<span class="kw2" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: black; font-family: inherit; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">img</span> <span class="kw3" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #000066; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">style</span><span class="sy0" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #66cc66; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">=</span><span class="st0" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: red; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">"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;"</span> <span class="kw3" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #000066; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">onclick</span><span class="sy0" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #66cc66; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">=</span><span class="st0" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: red; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">"document.location.href='http://translate.google.com/';"</span> <span class="kw3" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #000066; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">src</span><span class="sy0" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #66cc66; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">=</span><span class="st0" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: red; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">"http://www.google.com/uds/css/small-logo.png"</span> <span class="kw3" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #000066; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">alt</span><span class="sy0" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #66cc66; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">=</span><span class="st0" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: red; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">""</span> <span class="sy0" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #66cc66; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">/</span>><<span class="sy0" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #66cc66; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">/</span><span class="kw2" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: black; font-family: inherit; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">div</span>></span></div><br />
<br />
At first I tried to find suitable plugin that can fix the problem. Actually the plugin has to remove any specified html (<i>using regexp of course, because how else can you specify such a big piece of html?</i>) from the post. But I didn't find any. That was the initial kick to start developing a new one.<br />
<br />
And now I'm going to release the very-first version of <b>HTML Regex Replace</b> plugin that can be used not only to remove annoying <i><span class="Apple-style-span" style="color: #cc0000;">chrome-auto-translate-plugin-dialog</span></i> HTML, but for any automatic replacement you want. And with the power of <i>regular expressions</i>!<br />
<br />
I'm waiting for plugin review by <i>wordpress.org</i> team and ASAP will release it to the public.</div>Unknownnoreply@blogger.com0