PDA

View Full Version : inline style injected for some chrome extensions



bdmayes
13 Dec 2013, 1:17 PM
I am really stuck with a strange issue and I cannot figure out what is going on. I have no idea if it's related to ExtJS or not, but I thought I would ask here and maybe someone would have a good suggestion.

In our application we create many buttons with Ext.Recently we started getting reports from some customers that every button was missing a label in our application. After some digging, I have found that at LEAST two chrome extensions cause this behavior in our application (WiseStamp and Screen Captute by Google).  I contacted the author of WiseStamp and they weren't able to help me.

I have also looked at the JS and CSS files for both extensions in my .config/google-chrome/Default/Extensions directory (I'm on Ubuntu but it seems Mac and Windows are affected the same way). I cannot figure out where this is coming from.

With one of the extensions active, the following inline style is injected into every span element on every button we have:


style="margin:-996px -3px 996px 3px"

This style is the cause of the problem (and by disabling it in Chrome developer tools I can see the button text again). For now we are simply advising our customers to disable the extensions while using our application, but I would still like to track down the issue if possible. I have searched high and low but cannot figure out how the style is injected. We do *NOT* have this style set anywhere in our project (I have tried both a file search in IntelliJ as well as just plain ol' grep -rni 996 in our entire git repo).

Here is the full HTML when one of the extensions is active:

CODE]<button id="sca-affiliate-tab-btnEl" type="button" class="x-btn-center" hidefocus="true" role="button" autocomplete="off" style="height: 55px;">
<span id="sca-affiliate-tab-btnInnerEl" class="x-btn-inner" style="margin:-996px -3px 996px 3px">S5+M5</span>
<span id="sca-affiliate-tab-btnIconEl" class="x-btn-icon sca-affiliate-img"&amp;gt;&amp;lt;/span&amp;gt;&lt;br&gt;&amp;lt;/button&amp;gt;[/CODE]<br>
<br>
<br>
And here it is when I disable the extension and reload the page:<br>
<br>

&amp;lt;button id="sca-affiliate-tab-btnEl" type="button" class="x-btn-center" hidefocus="true" role="button" autocomplete="off" style="height: 55px;"&amp;gt;&lt;br&gt;&amp;nbsp; &amp;lt;span id="sca-affiliate-tab-btnInnerEl" class="x-btn-inner" style=""&amp;gt;S5+M5&amp;lt;/span&amp;gt;&lt;br&gt;&amp;nbsp; &amp;lt;span id="sca-affiliate-tab-btnIconEl" class="x-btn-icon sca-affiliate-img"&amp;gt;&amp;lt;/span&amp;gt;&lt;br&gt;&amp;lt;/button&amp;gt;


I have tried using JSFiddle with the extensions active and it doesn't seem to fail in the same way. Someone had a really good example of creating buttons in Ext. I modified it a bit and tried it with the extensions installed/enabled but cannot reproduce the injecting inline style. You can try it here if you wish:
http://jsfiddle.net/CL9Lm/


Additionally, I have tried to listen for several different events on my element. I just set a breakpoint using debugger, open dev tools and reload. Once it hits my breakpoint I just switch to the elements tab and search. By the time these events are firing the style is there.



this.on('afterrender', function() {
debugger;
});


this.on('beforerender', function() {
debugger;
});


this.on('added', function() {
debugger;
});



Could I try something else? Should I listen on DOM events rather than Ext events? I have no idea where to go from here. If anyone can help I'd surely appreciate it.

Kevin Jackson
16 Dec 2013, 2:47 PM
Officially, this is not something we'd be likely to address. While we design for the browser, trying to deal with all the possible extensions would be quite problematic. Hopefully, one of our users may have encountered and dealt with it and can give you some insight.

bdmayes
16 Dec 2013, 6:05 PM
Thanks. I knew that this was a huge shot in the dark but I thought I would try it anyway.

;)

TimurK
8 Jan 2014, 6:40 AM
I have exactly the same issue and am able to work around this by adding the following to the CSS:

span[id$="-btnInnerEl"] { margin: 0 !important;}

So far have not observed anything else breaking as a result.

Tk

bdmayes
8 Jan 2014, 9:51 AM
Wow, I really did not expect a response but thanks! I generally try to never use !important...it's usually best to figure out what the root cause is rather than hacking around the issue but we might wind up doing this, but for now we are simply advising clients to disable the offending extensions while they use our app.In any case, this certainly helps to narrow it down, and now I'm searching through all sorts of stuff looking for that btnInnerEl string to see what might be doing this. So far I'm not having any luck. I'm looking through our code, ExtJS, and the Screen Capture extension (on Linux anyway, the extensions seem to be unpacked to ~/.config/google-chrome/Default/Extensions).I'm going to mark this as the answer for now. So far I still haven't figure out exactly where this is coming from. Thanks again!