chrome extension css on localhost - google-chrome-extension

I'm working on a chrome extension. The content has a stylesheet content.css. When I run the extension on an external site, it applies the style sheet. When I open a page on my "hello world" page on localhost, it applies the content.css styles initially but the styles go away if I refresh the page and I cannot get them back unless I refresh the extenstion.
Can't figure out why this is but I need to get this resolved.
Thanks,
Ken

Related

chromium browser integrated newtab page

I'm working on rebranding chromium browser, and I'm having some trouble to setup default new tab page to the one remotely hosted, something that new Edge browser is already doing. but without using page redirect so when you open new tab, you'll get page loaded from URL like
https://ntp.msn.com/edge/ntp?locale=en&title=New%20tab&dsp=1&sp=Bing&startpage=1&PC=U531
but address bar won't be updated with that URL, it stays empty and ready for search. Does anyone know what are the steps to do this in chromium, what needs to be changed, I would really appreciate it.
Thanks!

How do I access the any file in my Chrome extension code as a url

I want to show the contents of the frame.html file in my extension folder in an iframe on the standalone page where I'm running the extension. But it is looking for this frame.html file in the source of the site and cannot find it so I'm getting a 404 not found error. Regardless of the relevant page, how can I access the frame.html file embedded in the extension file?
Let me show you in the picture what i want;
What I want
On the left is an ordinary web page on which the extension will be activated. Red area is my iframe that activated on the web site due to my extension. This area contents is in the frame.html at extension folder.
when I use <iframe src="extension_src/html/frame.html"></iframe>
I get a "www.......com/extension_src/html/frame.html" not found error
You can point the src to your local file using the template shown below.
<iframe src="chrome-extension://{{id-of-your-extension}}/path-to-file/frame.html"></iframe>
You extension id will be constant when published to the chrome store. When developing locally you can find the extension id by going to the chrome://extensions

chrome extension options change default popup.html

I have a chrome extension where the popup.html simply has an iframe that loads a page.
I want to allow users to select their language, and as I'm helping a charity do this each language page is very different as they need very different content based on the country!
Therefore, I can't just replace some of the fields like the google developer page example does; I need to change the page that is loaded in the iframe.
e.g. In my directory where the pages are stored I have english.html, german.html, spanish.html all of which are completely different pages.
By default the english.html page loads in the iframe, but the user should be able to go into the options file and select german so when they click on the extension the german.html loads by default every time.
Here is the jsfiddle showing what I currently have in the popup.html, and the popup.js:
http://jsfiddle.net/hemang2/EDV82/
You'll see the flickr API being called, but that's only there because I wasn't sure how to get rid of it!
So essentially my question is how to link the options file to change the default url loaded in the iframe.
Use the setPopup method: http://developer.chrome.com/extensions/browserAction.html#method-setPopup
It allows you to set any html file as your popup.

How do you properly serve an SVG file for use as a background image in IE9?

I'm trying to use an SVG background to take the place of a CSS3 gradient in IE9 (which doesn't support CSS3 gradient). I've tested it locally and it works like a dream. However, when I upload these changes to the live site, it doesn't work. I've verified that the SVG file IS up on the server in its intact form.
Here's the file:
http://www.shmax.com/css/record-box-gradient.svg
And here's a simple test page, where it's used as the background of a div:
http://www.shmax.com/gradient.html?DBGSESSID=-1
View the page in both Chrome and IE9, and you'll notice that it appears in Chrome, but not in IE9. Oddly, it DOES work in IE9 when I view it on my local test machine.
One thing I've noticed is that when I view the headers for this asset in Fiddler, it says "Transport - Connection: close". Does that mean anything? Is this something I need to fix in my .htaccess?
Thanks for the help, guys.
Your simple test page works for me in IE9; I see a gradient in the background of the div.
Try this:
Press F12 to open the Developer Tools
What is the "Document Mode" in the 'menu bar' of the tools? If you set it to "IE9 Standards", do you see the gradient?
Click on the Network tab for the developer tools, click on "Start Capturing", reload your test page, and then click on "Stop Capturing". Do you see a request for /css/record-box-gradient.svg in the the URLs? Is it either status 200 or 304?

Why is Chrome reporting a secure / non secure warning when no other browsers aren't?

When I go to our web site through HTTPS mode, Chome is reporting an error saying that the page contains secure and not secure items. However, I used Firebug, Fiddler, and HttpDebuggerPro, all which are telling me that everything is going through HTTPS. Is this a bug in Chrome?
Sorry but I'm unable to give out the actual URL.
A bit late to the party here but I've been having issues recently and once I had found a http resource and changed it was still getting the red padlock symbol. When I closed the tab and opened a new one it changed to a green padlock so I guess Chrome caches this information for the lifetime of the tab
Current versions of Chrome will show the mixed content's URL in the error console. Hit CTRL+Shift+J and you'll see text like:
"The page at https://www.fiddler2.com/test/securepageinsecureimage.htm contains insecure content from http://www.fiddler2.com/Eric/images/me.jpg."
I was having the same issue: Chromium showing the non-secure static files, but when everything was http://.
Just closing the current tab and re-opening the page in another new tab worked, so I think this is a Chromium/Chrome bug.
Cheers,
Diogo
Using Chrome, if you open up the Developer Tools (View > Developer > Developer Tools) and bring up the Console and choose to filter to warnings, you'll see a list of offending URLs.
You'll see something like the following if you do have insecure content
The page at https://mysite/ displayed insecure content from http://insecureurl.
For the best experience in finding the culprit, you'll want to start your investigation in a new tab.
It is possible that a non-secure URL is referenced but not accessed (e.g. the codebase for a Flash <object>).
I ran into this problem when Jquery was being executing a a few seconds after page load which added a class containing a non-secure image background. Chrome must continually to check for any non-secure resources to be loaded.
See the code example below. If you had code like this, the green padlock is shown in Chrome for about 5 seconds until the deferred class is applied to the div.
setTimeout(function() {
$("#some-div").addClass("deferred")
}, 5000);
.deferred
{
background: url(http://not-secure.com/not-secure.jpg"
}
Check the source of the page for any external objects (scripts, stylesheets, images, objects) linked using http://... rather than https://... or a relative path. Change the links to use relative paths, or absolute paths without protocol, i.e. href="/path/to/file".
If all that if fine, it could be something included from Javascript. For example, the Google Analytics code uses document.write to add a new script to the page, but it has code to check for HTTPS in case the calling page is secure:
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
On the release of Chrome version 53 on Windows, Google has changed the trust indications to initiate the circle-i. Afterward, Google has announced a new warning message will be issued when a website is not using HTTPS.
From 2017 January Start, Popular web browser Chrome will begin
labeling HTTP sites as “Not Secure” [Which transmit passwords / ask
for credit card details]
If all your resources are indeed secure, then it is a bug. http://code.google.com/p/chromium/issues/detail?id=72015 . Luckily it was fixed.

Resources