Chrome extension options not always displayed - javascript

I'm building a chrome extension and I've an options page.
This page is an overlay in the chrome://settings as described in the documentation.
The problem is that my page isn't always displayed, sometmies it just stays white without any content. When I try and inspect the overlay, my code is loaded.
What could be the problem?
I've added some screenshots to show the problem:
Working options page:
Working source code:
Not working options page:
Not working source code:

This is a known Chrome bug: crbug.com/550217
Try forcing the page to redraw on load:
window.onload = function() {
document.body.style.webkitTransform = "scale(1)";
};

I've found a solution in the provided url: Issue 550217
I've enabled my HWA and it's shows up a lot more now. Don't know if it really solved the problem but it works for now.

Related

jQuery LayerSlider: LayerSlider not working with single image in IE 10

I am using LayerSlider (http://kreaturamedia.com/layerslider-jquery-full-width-slider/) which is working fine on all browsers except IE 10. Even the demo link is working fine on the browser but when I integrate the slider in the website I am working on, it fails to load the image and the following error is shown in the console:
"It seems like the URL of the image or background image "image name" is pointing to a wrong location and it cannot be loaded. Please check the URLs of all your images used in the slider."
The link of the image is correct and the issue appears if only one image is added. If more than one image is added, then the above error does not show.
I have checked for compatibility issues with other plugins by disabling other jQuery plugins but still no effect. I even tried to use the same version of jQuery the demo is using but still no luck.
If anyone has an idea what the problem is, kindly help me out
Thanks

Setting content of iframe using javascript fails in firefox

I'm trying to set the content of a iframe using javascript.
I've the html string. And I'm writing:-
var iframe = $('iframe')[0],
content = '<div>test</div>';
$(iframe).contents().find('html').html(content);
It works fine in google chrome, but in firefox is shows the content for a moment and the disappears.
Please help me to fix it.
I faced the same problem. I saw the load function of iframe fires in firefox but not in chrome. So firefox reload the iframe again on load event.
So with your existing code try this:-
$(iframe).load(function(e){
$(iframe).contents().find('html').html(content);
})

Fancybox does not work on live site but works locally

I'm using a fancybox demo (http://fancyapps.com/fancybox/) on my personal site. Everything works perfectly when I'm testing locally, but once I uploaded the site to be live, the fancybox feature is not working and instead brings you to a new page view the image.
This is the site I am referring to: http://colettemolleur.com/. Click on the image to see the issue I'm having. Also, I'm not forgetting to upload any of the js files, so I don't know why this is happening.
Any thoughts?
Thanks!
Colette
Check your path for Bootstrap, main.js and query.mousewheel-3.0.6.pack.js which return 404 not found on your page. I suspect the path are incorrectly setted.
In chrome, use the developer tools (using F12 or right click+ inspect element) to check for error on the page. I get 4 when opening your page.

Running jquery gallery makes links unclickable

I'm trying to build responsive webpage based on Zurb Foundation framework. Everything worked fine until I tried to add nanoGallery which uses jQuery too. When I add gallery scripts, top menu generated by Foundation script becomes unclickable, :hover works fine but if you click on it, nothing happens. Fell free to visit the exact page at http://emfoto.filipsvoboda.net/presentation.html.
This is how I'm trying to call each script:
<script src="js/jquery.js"></script>
<script src="/js/foundation.min.js"></script>
<script>
jQuery(document).foundation();
</script>
<script src="third.party/transit/jquery.transit.min.js"></script>
<script src="third.party/hammer.js/hammer.min.js"></script>
<script src="third.party/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="jquery.nanogallery.js"></script>
<script>
jQuery("#nanoGallery").nanoGallery({
kind:'flickr',
(..)
thumbnailHoverEffect:[{'name':'borderLighter'}],
thumbnailLabel:{display:false},
});
</script>
I've already tried changing order of those scripts, but that does not seem to help.
EDIT: It does seem to work properly in IE10, however in Chrome-based browsers it still does not work.
EDIT2: After continual fiddling with the code it seems obvious that the presence of the gallery itself on that page causes the bug. Order of scripts doesn't seem to make any difference, as long as the gallery is not displayed, Foundation works correctly and links does work.
EDIT3: Updated the code, stripped it down and changed the order of scripts. I've added simple "a" link to the sample page and it doesn't work either.
EDIT4: I've searched for event.preventDefault() and it is present in one of the *.js files for the gallery. I've contacted the author and if we get to any solution I will post it here.
Thank you for your help.
This issue has been fixed in nanoGALLERY v4.2.1:
https://github.com/Kris-B/nanoGALLERY/releases/tag/4.2.1
I compared chrome and firefox requests and responses using Developer Extensions (chrome) and Firebug (firefox) for the info shown in Net panel. I'm not sure if the file that chrome doesn't find can be the cause of the problem but wanted to point out that difference.
chrome
http://emfoto.filipsvoboda.net/third.party/hammer.js/hammer.min.map (Not found)
http://emfoto.filipsvoboda.net/third.party/hammer.js/hammer.min.js
firefox http://emfoto.filipsvoboda.net/third.party/hammer.js/hammer.min.js
Atleast for time being, you can have a workaround for this by having a click handler which will read the url and take the page to that url.
$(function () {
$("a").click(function () {
var url = $(this).attr("href");
window.location.href = url;
});
});

chrome.tabs.query not returning correct tab

I'm building a chrome extension that submits links to an aggregation website. In order to do this, I need to get the URL from the currently open window, which I'm trying to do with this code:
chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, function (tabs) {
var url = tabs[0].url;
...
});
This works fine with only one window open, but it seems to select the active tab from the first opened window when I have more than one open, rather than from the last focused window. I have tried using currentWindow also, but that seems to have the same problem.
Any help would be greatly appreciated!
Your question seems very similar to the one below, please have a look.
Useful code sample from question:
chrome.tabs.getSelected(null, function(tab) { document.getElementById('currentLink').innerHTML = tab.url; });
Also note the section about
Inline scripts and event handlers disallowed
(in Chrome extensions)
Hopefully that puts you on the right track!
Edited for my poor formatting and unfamiliarity with SO formating.
It turns out the problem was that I had 2 versions of my extension: one with the unpacked files and one packed as a .crx file. I was updating the unpacked code, but the version I was loading in my browser was the already packed one. So of course my changes weren't being reflected. Solved by making sure I was testing using the unpacked version.

Categories

Resources