How to create a simple firefox addon

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    How to create a simple firefox addon

    first start of with signing up on https://builder.addons.mozilla.org/

    when signed up and logged in goto create> addon

    next click on the main.js and paste this in there and click save
    PHP Code:
    var notifications = require("notifications");
    var     widget=require("widget");
    var     clipboard = require("clipboard");
    var     self=require("self");
    var     gDebug;

    exports.main = function() {
            widget.Widget({
                id: "drop-down-menu-generator",
                label: "Unicode Text",
                contentURL: self.data.url("icon.png"),
            
                allow:{script:false},
                onClick: function(event) {
                    widgetButtonClick();
            }
        });
    };

    function     widgetButtonClick(){
        var     panel = require("panel").Panel({
                width:350,
                height:350,
                contentURL: self.data.url("popup.html")
        });
         
            panel.port.on("showing", function(text) {
              console.log(text);
        });
            panel.port.on("request",function(text){
                console.log("request: ",text);
        })
         
            panel.show();    
    } 
    next click on the + symbol next to "data" on the left hand side and upload an icon.png (size 16x16 pixels)
    next click on the + symbol again and this time create a file called popup.html

    click on the popup.html (now on the left hand side) and post this in it:
    PHP Code:
    <html> 
    <    head> 
    </    head> 
    <    body> 
    <    center> 
    <    h3> My First Addon </h3> 
    Some More Text Here<br/><br/> 
    </    center> 
    </    body> 
    </    html> 
    and save it

    you can now click the "test" button that looks like an eye to make sure it works (it will add it to the toolbar at the bottom of screen)

    if your happy with it click the download button :D

    and your done

    any questions feel free to ask in this topic (but may not know the answer because firefox addons are more confusing then opera/chrome lol)
    Tags: addon, create, firefox
    #2
    I want to use this live post update. like If anyone of my blog created a blogpost it will show 1 new post notification and when clicked on the notification it will pop the post up. how can i do that?

    Comment

      #3
      to do that you have to get permission for javascript to work cross domain (im not sure how you get permissions on firefox)
      then after that i would use xmlhttprequest... heres an example of what i use:
      PHP Code:
      <script type="text/javascript">
      function       post2site(url,params)
      {
              var       xmlhttp = new XMLHttpRequest();
                    xmlhttp.open("POST", url, false);
                    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                    xmlhttp.send(params);
              return       xmlhttp.responseText;
       }

      document.write(post2site('http://your-site.con','variable1=foo&varible2=bar')); //this returns and writes the text from the page requested
      </script> 
      im not sure on how to change the icon firefox as im very new to it myself :/

      Comment

      Previous template Next
      Working...
      X