I am a beginner in developing custom Firefox addon. I made an extension which shows "Hello World" when user input "about:helloworld" into address bar. Everything works fine except CSS styling. The background images are gone
, but the bg colors are displaying well, say all styles, except bg images are working perfect.My folder & file structure is like;
Code: Select all
[]chrome
|_ <NO FILE IN THIS FOLDER>
[]content
|_# helloworld.xhtml
|_# img1.png
|_# img2.png
|_# background.png
|_# logo.png
# bootstrap.js
# chrome.manifest
# install.rdf
# licence.txt
# READMEhelloworld.xhtml is the file which displays the message.
Code: Select all
<?xml version="1.0" encoding="UTF-8"?>
<!--
# ***** BEGIN LICENSE BLOCK *****
# Test Plugin
# Version: MPL 1.1/GPL 2.0/LGPL 2.1
# ***** END LICENSE BLOCK *****
-->
<!DOCTYPE html [
<!ENTITY % htmlDTD PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
%htmlDTD;
]>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World</title>
<style type="text/css">
html{
background: #0246CD url(background.png);
}
body{
margin: 0;
padding: 0;
}
.div1, .div2{
width: 40px;
height: 40px;
}
.div1{
background: #FFCC00 url(img1.png);
}
.div2{
background: #000066 url(img2.png);
}
</style>
</head>
<body>
<div class="div1">Hello</div><div class="div2">World!</div>
</body>
</html>chrome.manifest
Code: Select all
content testplugin content/install.rdf
Code: Select all
<?xml version="1.0" encoding="UTF-8"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#">
<Description about="urn:mozilla:install-manifest">
<em:id>testplugin@testplugin.com</em:id>
<em:bootstrap>true</em:bootstrap>
<em:type>2</em:type>
<em:name>testplugin</em:name>
<em:version>1.0</em:version>
<em:description>A sample extension with advanced features</em:description>
<em:creator>blasteralfred</em:creator>
<em:iconURL>chrome://testplugin/content/logo.png</em:iconURL>
<!-- Firefox -->
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>8.0a1</em:minVersion>
<em:maxVersion>25.0a1</em:maxVersion>
</Description>
</em:targetApplication>
<!-- Fennec -->
<em:targetApplication>
<Description>
<em:id>{a23983c0-fd0e-11dc-95ff-0800200c9a66}</em:id>
<em:minVersion>8.0a1</em:minVersion>
<em:maxVersion>25.0a1</em:maxVersion>
</Description>
</em:targetApplication>
</Description>
</RDF>How can I make the CSS images appear in my page? Along with this, my icon also is not appearing in plugin list
, and even the default logo (blue puzzle piece) is also not there, instead, there is a blank space with no image..I run Firefox 13.0 in my Windows 7 PC.
Thanks in advance...
