Wednesday, December 17, 2014

make your own firefox extension

1- download firefox add-on sdk

user1@firefox:/$ wget https://ftp.mozilla.org/pub/mozilla.org/labs/jetpack/jetpack-sdk-latest.zip

2- using the sdk

user1@firefox:/ $ unzip addon-sdk-1.17.zip
user1@firefox:/ $ cd addon-sdk-1.17
user1@firefox:/ $  source bin/activate

now it is on the add-on sdk virtual environment

3- create the first add-on called firstaddon
(addon-sdk-1.17)user1@firefox:/ $ cfx init firstaddon

it will create a directory call firstaddon and with all subdirectory/file like below
firstaddon/
firstaddon/package.json
firstaddon/data
firstaddon/lib
firstaddon/lib/main.js
firstaddon/test
firstaddon/test/test-main.js


4- my simple extension to search or open url with google wireless transcoder

there are file added, see the structure below
./package.json
./data
./data/icon-32.png
./data/text-entry.html
./data/icon-64.png
./data/get-text.js
./data/icon-16.png
./lib
./lib/main.js
./test
./test/test-main.js

- data/icon* is the icons represent the extension
- content of lib/main.js

cvar buttons = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");

var data = require("sdk/self").data;

var text_entry = require("sdk/panel").Panel({
  contentURL: data.url("text-entry.html"),
  contentScriptFile: data.url("get-text.js")
});



var button = buttons.ActionButton({
  id: "mozilla-link",
  label: "Visit Mozilla",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onClick: handleClick
});

function test() {
  tabs.open("https://www.mozilla.org/");
}


function handleClickO(state) {
  tabs.open("https://www.mozilla.org/");
}


function handleClick(state) {
  text_entry.show();
}

text_entry.on("show", function() {
  text_entry.port.emit("show");
});

text_entry.port.on("text-entered", function (text) {
  tabs.open("http://google.com/gwt/x?wsc=tf&source=wax&u="+text);
  text_entry.hide();
});

text_entry.port.on("open-click", function (text) {
  tabs.open("http://google.com/gwt/x?wsc=tf&source=wax&u="+text);
  text_entry.hide();
});

text_entry.port.on("search-click", function (text) {
  tabs.open("http://google.com/gwt/x?wsc=tf&source=wax&u=http://www.google.com/search?q="+text);
  text_entry.hide();
});




var contextMenu = require("sdk/context-menu");
 var menuItem = contextMenu.Item({
  label: "Log Selection",
  context: contextMenu.SelectionContext(),
  contentScript: 'self.on("click", function () {' +
                 '  var text = window.getSelection().toString();' +
                 '  self.postMessage(text);' +
                 '});',
  onMessage: function (selectionText) {
    console.log(selectionText);
  }
});
 var menuItem = contextMenu.Item({
  label: "openurl",
  context: contextMenu.SelectionContext(),
  contentScript: 'self.on("click", function () {' +
                 '  var text = window.getSelection().toString();' +
                 '  self.postMessage(text);' +
                 '});',
  onMessage: function (selectionText) {
    tabs.open(selectionText);
  }
});
 var menuItem = contextMenu.Item({
  label: "search-g",
  context: contextMenu.SelectionContext(),
  contentScript: 'self.on("click", function () {' +
                 '  var text = window.getSelection().toString();' +
                 '  self.postMessage(text);' +
                 '});',
  onMessage: function (selectionText) {
    tabs.open("http://google.com/gwt/x?wsc=tf&source=wax&u=http://www.google.com/search?q=" + selectionText);
  }
});


- content of data/get-text.js

 var textArea = document.getElementById("edit-box");
var buttOpen = document.getElementById("openUrl");
var buttSearch = document.getElementById("searchG");

function test() {
  window.open(url, "_blank");
}
textArea.addEventListener('keyup', function onkeyup(event) {
  if (event.keyCode == 13) {
    text = textArea.value.replace(/(\r\n|\n|\r)/gm,"");
    self.port.emit("text-entered", text);
    textArea.value = '';
  }
}, false);

buttOpen.addEventListener('click', function onclick(event) {
    text = textArea.value.replace(/(\r\n|\n|\r)/gm,"");
    self.port.emit("open-click", text);

}, false);
buttSearch.addEventListener('click', function onclick(event) {
    text = textArea.value.replace(/(\r\n|\n|\r)/gm,"");
    self.port.emit("search-click", text);

}, false);

self.port.on("show", function onShow() {
  textArea.focus();
});

self.port.on("showt", function onShow() {
  textArea.focus();
});


- content of  data/text-entry.html
 <html>
<head>
    <style type="text/css" media="all">
      textarea {
        margin: 10px;
      }
      body {
        background-color: gray;
      }
    </style>
  </head>
<body>
    <textarea rows="8" cols="33" id="edit-box"></textarea>
    <input type="button" id="openUrl" value="open">
    <input type="button" id="searchG" value="search">
    <input type="button" id="test" value="test">
  </body>
</html>



5- generate xpi, the extensions, and installation
run the cfx xpi in the firstaddon directory
user1@firefox:/ $ cfx xpi

then it will create a file firstaddon.xpi in the directory,
to install the extension, just drag and drop it on the firefox web browser
or we just run cfx run to run the extension



1 comment:

  1. The author of the post did a great job! This blog has a lot of good information.
    Latest reviews

    ReplyDelete