MozillaZine

How to style Firefox Extension's xhtml page using CSS

Talk about add-ons and extension development.
blasteralfred
 
Posts: 2
Joined: May 16th, 2013, 11:23 am

Post Posted May 16th, 2013, 11:35 am

Hi,
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
# README

helloworld.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 :-k , 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... :)

DanRaisch
Moderator

User avatar
 
Posts: 123338
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Post Posted May 16th, 2013, 12:36 pm

Moving to Extension Development.

lithopsian
 
Posts: 3664
Joined: September 15th, 2010, 9:03 am

Post Posted May 16th, 2013, 2:09 pm

Quotes round the image filenames.

blasteralfred
 
Posts: 2
Joined: May 16th, 2013, 11:23 am

Post Posted May 16th, 2013, 9:11 pm

@lithopsian, I don't get you.
Which files and codes are to be changed? Inside which directory should I store the images?

lithopsian
 
Posts: 3664
Joined: September 15th, 2010, 9:03 am

Post Posted May 17th, 2013, 8:37 am

Apparently nothing to do with quotes.

So, you can install DOM Inspector addon and see what styles are being applied to your elements. You find find that everything is working but a different style has been applied. Or you may find that the selector is not doing what you expect. I can't see the error just from reading your code.

The fact that the icon is displayed as a blank square suggests that perhaps your images themselves are not in a valid format. You can also simply place a file called icon.png in the same directory as install.rdf (remove the iconURL line) and that should be used.

Return to Extension Development


Who is online

Users browsing this forum: No registered users and 1 guest