2007/06/28

Tutorial : How to make a plugin for IE7Pro

Introduction


To make a JavaScript plug-in for IE7Pro, you must:
  • Know a little JavaScript of another language programming (JavaScript is easy!)
  • Understand the Document Object Model of IE (and others browsers)
  • Can using an notepad (such Notepad++ or Notepad.exe)

This tutorial is very easy but demonstrates only the basis features of the plug-ins

Naturally, you can learn more information about the plug-in on the IE7Pro Web Site.

Regards,

FremyCompany

The common architecture

The root directory


To start a plug-in, I recommended you to create a directory in the /plugins.

The name of this directory should be the same that the name you'll give to your plug-in, but it's not very important.

The PLUGIN.JS file


In this directory, put a plugin.js file.

The content of all plug-ins should begin with this:
// ==UserScript==
// @name PluginName (by Author)
// @namespace http://iescripts.org/
// @description MoreInfo
// @statussize Size of the plugin (ie: 16)
// ==/UserScript==
(function() {
// Localize the URL's path
function fpath(url) { return "ie7pro://pluginpath/"+url; }
// Content all the PLUGIN API
var plugin = PRO_plugin(@name);
// Used to know which icon is currently used
var getIcon = function() {
return "ie7pro://pluginpath/bg.png";
}
// Used to set the icon of the plugin
function setIcon(url) {
plugin.setStatusIcon(url);
getIcon=function() { return url; };
}
plugin.onpagechange=function (sessID, url, state) {
if (state==1) {
// A new page is opened
}
if (state==2) {
// A new page is loaded
}
}
})()

The utility of all the functions

  • fpath (url)

Transform a relative URL to a long URL. IE7Pro do that for you.

IE7PRO://pluginpath/ is replaced by the local path of the plug-in's root directory.
  • plugin

See the reference of the PLUGIN API on http://www.iescripts.org/help/pro_plugin.html

In addition to the PLUGIN API, some other PRO_ functions are accessible in the code
  • get/setIcon([newUrl])

Get or set the icon of the Plug-in.

The recommended size is 16 by 16 pixels.
  • onpagechange(sessID, url, state)

This function is call each time a new page is opened and loaded.

You can't interact with the page when the status is set to "opened".

sessID: sessID is very important, that's the identifier of the current tab.

When you want to do something on a tab, you must have a reference to this session's ID.

url: The URL of the page currently opened (can be found without this parameter)

state: The status of the actual page (1: opened; 2: loaded)

In the cycles of live of a page, the onpagecreate event is called two times. Firstly with state = 1 and secondly with state = 2.
Sample of use: Print the URL of the file in the plug-in area
[...]
plugin.onpagechange=function (sessID, url, state) {
if (state==1) {
plugin.setStatusText(url, sessID)
}
}
[...]

How to create a Button Plug-in

Catch the onclick event


The most of the time, you'll make a clickable plug-in.

To catch when the user click on the plug-in, there's the onclick event
plugin.onclick = function(sessID, currentUrl) {
// The user click on the plug-in
}
Sample of use: Clear the plug-in's area
plugin.onclick = function(sessID, currentUrl) {
plugin.setStatusText("", sessID)
}

Displaying an image instead of the text


Display a text in the plug-in area is very useful but the most of the time, it's better to display an icon (such the "e"-icon of IE7Pro)

To do this, you must indicate an icon in the header of the file and store this icon in the root directory
// @defaulticon    ie7pro://pluginpath/bg.png

If you want a highlight of your icon when the mouse comes in the plug-in area, you can use this simple code:
 plugin.onmouseenter = function() {
setIcon(fpath("bg_over.png"))
}
plugin.onmouseleave = function() {
setIcon(fpath("bg.png"))
}

How to create a context-menu for the plug-in?


To add an entry to the context-menu of the plug-in, you can do this:
function func(sessID, url) {
// The use clicked on "DisplayText"
}
plugin.registerContextMenu("DisplayText", func)

If you want to add a separator, you can use this code:
plugin.registerContextMenu("separator")

How to save / load options


Theses two functions are used to store settings of your application, such language…
// Get the value of "optionName"
var option = PRO_getValue(optionName, valueIfOptionIsNotSetted)
// Set the value of "optionName"
PRO_setValue(optionName, option)

Interact with the page

Getting the URL of the page


The URL can be obtained with the url parameter.

But if you want, you can find the URL of the current document without it.
// Get the URL as text-format
function getUrl(sessID) {
return plugin.getCurrentDocument(sessID).location.href;
}

You can get the URL as URILocation (see MSDN: document.location), too :
// Get the URL as URILocation
function getUri(sessID) {
return plugin.getCurrentDocument(sessID).location;
}

Executing JavaScript into the web page


They are two ways to execute JavaScript on the current page.

With PRO_openInTab


If you have only a short JavaScript to execute (one line), you can simply use the PRO_openInTab, this is easy and you don't pass any parameter to the function
function injectJS(js) {
PRO_openInTab("javascript:" + js, 0)
}

How does this function work? This is simple, Internet Explorer executes JavaScript if the location of a page is set to "javascript: …". Here we are opening a javascript: URL in the current tab (parameter 0). Because it's an URL, it can only execute one line of JavaScript.

With window.execScript


Internet Explorer implements a simple function for evaluating scripts in a window.
function evalJS(js, sessID) {
var document = plugin.getCurrentDocument(sessID);
var window = document.parentWindow;
window.execScript(js);
}

You can also specify the language and execute any VBScript:
function evalVB(vb,  sessID) {
var document = plugin.getCurrentDocument(sessID);
var window = document.parentWindow;
window.execScript(vb,"vbscript");
}

You can now execute more than one line of code (\n = new line):
var doSomething=(
"if (document.getElementById('data')) {\n"+
" document.getElementById('data').value='Plugin Actived !'; \n"+
"}"
);
evalJS(doSomething, sessID);

Using DOM


Here, we'll do the same thing that the preview code, but directly in the plug-in:

The first thing you must do before is getting the document and the window objects

To do this, you need the id of the current session.
function setData(sessID) {
var document = plugin.getCurrentDocument(sessID);
var window = document.parentWindow;
// ...
}

Next to this, you can do as you were in a JavaScript file:
function setData(sessID) {
var document = plugin.getCurrentDocument(sessID);
var window = document.parentWindow;
if (document.getElementById('data')) {
document.getElementById('data').value='Plugin Actived !';
}
}

Using ActiveXObject


Currently, it's not possible to create an instance of an ActiveXObject.

The follow code causes an error:
plugin.onclick = function(sessID, currentUrl) {
try {
var document = plugin.getCurrentDocument(sessID);
var window = document.parentWindow;
var activeX = window.ActiveXObject("Msxml2.DOMDocument");
PRO_openInTab("javascript:alert('"+activeX+"')", 0)
} catch (ex) {
PRO_openInTab("javascript:alert('"+ex.message+"')", 0)
}
}

Using popup


Use the plugin.popupWindow function and plugin.onpopupclose event to use popup
Some tips:
  1. Encode your files as ANSI or UNICODE
  2. Start all your files with <!-- saved from url=(0014)about:internet -->
  3. Impose a font for your dialogs by CSS

* { font-family: Tahoma; font-size: 10pt; }
  1. Try to let some with space at bottom of your dialogs for large-font UI
  2. Return a value to onpopupcolose with window.returnValue

Some useful functions


These functions need evalJS and evalVB functions.

Alert (Message Box)

function alert(txt, sessID) {
var document = plugin.getCurrentDocument(sessID);
var window = document.parentWindow;
return window.alert(txt);
}

Confirm (True – False)

function confirm(txt, sessID) {
var document = plugin.getCurrentDocument(sessID);
var window = document.parentWindow;
return window.confirm(txt);
}

Prompt (String)

function propmt(txt, default, sessID) {
var document = plugin.getCurrentDocument(sessID);
var window = document.parentWindow;
return window.prompt(txt, default);
}

GetSelection (Text-/ControlRange)

function getSelection(sessID) {
try {
var document = plugin.getCurrentDocument(sessID);
return document.selection.createRange();
} catch (ex) { return null; }
}

Go (Navigate in the history)

// 0 : Refresh; 1 : Next; -1 : Preview
function go(index, sessID) {
var document = plugin.getCurrentDocument(sessID);
var window = document.parentWindow;
window.history.go(index);
}

$ (GetElementById)

function $(ID, sessID) {
var document = plugin.getCurrentDocument(sessID);
return document.getElementById(ID);
}

Learn more

Thanks to Author: FremyCompany

25 comments:

Lasantha said...

Thank you providing such a good details. Keep it up. wish you good luck..

Unknown said...

Thanks for all this information!

Once you have grayed out a context menu option, using

plugin.setContextMenuState("My Menu Option", "grayed");

is there any way to enable it back (un-gray it)?

Thanks is advance for your help,
EE.

Unknown said...

I am able to use onkeyup/down events in IEPro plugin but unable to get the keyCode. How do I do that ? Plz help me...

CV.AGUS BUANA PUTRA said...

What is IE7pro?
OCTOBER FALL Ι Tour and Travel

Anonymous said...

I wanted to make a JavaScript plug-in for some programs like IE7 and this induction is all I need to get the hang of it. I like inductions because you learn so much, last time I got an induction to Sildenafil Citrate applications and it was pretty informative!

Emma jacob said...

I adore your blog because I never know about Handwriting expert what I am getting into when I open a new post. You do a great Job, regarding Handwriting analyst Quality content always have a dash of personal life and my next task I collect some more info about Handwriting analysis .Any how Keep up the great blogging and! Good luck with your new project--I hope everything works out for you! Happy 2011 :).

Forged documents | Forgery

Bac Pham said...

The IE (Internet Explorer) browser is designed and developed so that its features can be appended by other programs. IE functions can be added through IE plug-ins. You can develop and customize your own IE browser plug-ins to meet your specific requirements. The extended plug-ins includes security plug-ins that help protect your computer while browsing and time-saving IE plug-ins that are new buttons and menus helping users to find applications sex camElite Escorts

RS Gold said...

Buy Tera Gold

WOW Gold

Cheap WOW Gold

RS Gold

Tera Account

Tera Items

Buy WOW Items

WOW Items Gold

Unknown said...

To start a plug-in, I recommend you create a folder in / plugins. The name of this file must be the same as the name you give your plug-in, but it is not very important.Eden GoldBuy Eden GoldCheap Eden GoldEden EternalEden Eternal GoldEden Eternal Review

Serg said...

Interesting Windows 7 autologon programm as IE7 plugin

cheaptera said...

Thanks for sharing and letting us aware about this information. This is a great thread, so much info.it ls a good article and love your words , so charming and make people learn a lot , thanks !My blogs here:

http://girlslovefashion.blogetery.com/2011/12/01/our-store-guarantee-with-competitive-price-to-offer-you-cheap-wow-gold/
http://www.bloggen.be/gobuygold/
http://joygame.blogujem.cz/note/78493/some-steps-in-making-cheap-wow.html
http://fashionee.blog.com/2011/12/01/wed-like-to-introduce-wow-gold-guide-to-player/

rsgoldb2c1007 said...

Of course! I ultimately observed this kind of website! I've been surfing just for this post pertaining to so very long!!

http://sports-online-news.com/
http://dblo3.com/

wowplay said...

I really wish I hadn't seen this as I really want one now!
http://www.5kaza.com/blog/two-decades-with-the-simpsons/

wowplay said...

I really wish I hadn't seen this as I really want one now!
http://www.5kaza.com/blog/two-decades-with-the-simpsons/

whatlivemom said...

We had lost it but now it's back. Our production machine called Q now serving all our database requests!
Las Vegas Escortsexy shop

Jack said...

I thought it was going to be some boring old post, but it really compensated for my time. I will post a link to this page on my blog. cambridge satchel|cambridge satchels|cambridge satchel bag|satchel cambridge|ugg boots sale|cambridge satchel|cambridge satchels|cambridge satchel bag|cambridge satchel company bag|cheap uggs

teracheapgold said...

This is precisely the important information I’d been searching for. Incredible blog. Very inspirational! Your posts are so good and also detailed. The links you come with are also very beneficial as well. Many thanks :)

http://citygogo.blog.fc2blog.net/blog-entry-23.html
http://cheapgold.gurusquat.com/2012/01/11/romney-wins-major-victory-in-new-hampshire-primary/
http://my.foto75.in.ua/freelovewow/2012/01/11/britain-to-grant-scotland-independence-vote/
http://cheapgold2.blogs.procalisx.cc/china-faces-greater-pressure-to-ensure-energy-supply-in-2012-energy-chief.html
http://www.anoswtor.ewebsite.com/articles/wall-street-edges-higher-ahead-of-new-earnings-season.html
http://muchgold.canalblog.com/archives/2012/01/11/23217306.html

Anonymous said...

A very nice informational blog.Keep on making such important blog post.Your work is really being appreciated by some one. Arnold

sanatesi520 said...

The Buddha within something Backlinks London Diamond earrings so pure. Rrt experienced been numerous which include my individual not known nevertheless overwhelmingly curious tomorrow. Inbound back links bracelets have turn into captivating that you simply can don in that interpersonal gathering, pursuing which it you will be the 1st to be. every one more evening is definitely an effective just one particular.replay made an visual element definitely back links of london sweetheart engagement ring. The spine of the bull run, pleasing vocal broad range along the weevils in feed dispersed, without getting shoes inside the stream to catch crabs, completely away from your marbles going.
tissot
tissot watch
tissot ladies watch
tissot women watches
tissot for women
tissot women watch

Unknown said...

The Buddha within someCheap RS Gold component inbound links London Diamond earrings so pure. Rrt seasoned been several which consist of my unique not known WOW Goldhowever overwhelmingly curious tomorrow.

Unknown said...

This tutorial is very easy but demonstrates only the basis features of the plug-ins
http://www.htc-one-m9.com/
http://www.meizu-mx5.com/

hou said...

I am able to use onkeyup/down events in IEPro plugin but unable to get the keyCode. How do I do that ?

xiaomi redmi note 2 review
meizu mx5 review
meizu review

hou said...

I am able to use onkeyup/down events in IEPro plugin but unable to get the keyCode. How do I do that ?

xiaomi redmi note 2 review
meizu mx5 review
meizu review

hou said...

I am able to use onkeyup/down events in IEPro plugin but unable to get the keyCode. How do I do that ?

xiaomi redmi note 2 review
meizu mx5 review
meizu review

paulsmith198914@gmail.com said...

You have created an amazingly detailed post! Good for you! I stopped by to remind you that our academic editing services can be always in use when you want to academically succeed!