How to create a simple firefox addon

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    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",
            
    contentURLself.data.url("icon.png"),
            
            
    allow:{script:false},
            
    onClick: function(event) {
                
    widgetButtonClick();
            }
        });
    };

    function 
    widgetButtonClick(){
        var 
    panel = require("panel").Panel({
            
    width:350,
            
    height:350,
            
    contentURLself.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
    <
    h3My 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)

    #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"urlfalse);
              
      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

      Working...
      X