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



No comments:

Post a Comment