How to Write a Browser Plugin

How to write a browser plugin?

As others point out, plugins for those browser are written using the NPAPI.

Note: Both Firefox and Chrome will default most plugins to click-to-play soon, with Chrome planning to phase out NPAPI entirely. NPAPI for new projects is discouraged at this point.

Resources for getting started with NPAPI:

• MDC plugin section
• three part NPAPI tutorial
• memory management in NPAPI
• npsimple - the "Hello World" of NPAPI plugins
• npapi-sdk - the source for the canonical NPAPI headers
• Mozillas test plugin - good for looking up specific NPAPI use cases

The NPAPI itself is however relatively low-level, but there are tools and frameworks that can help you with it:

• FireBreath - cross-browser, cross-platform frame-work for plugins
• Nixysa - generate glue-code for NPAPI plugins
• JUCE - application framework also providing support for plugins
• QtBrowserPlugin - Qt based browser plugin framework

How to write a web browser plugin for IE, Firefox and Chrome

Well, there are two problems you have to solve. Understanding of plugins is really the easier one at this point, since have FireBreath to help you. Gosh, whoever wrote that must have been brilliant! (okay, it was me, so I had to say it)

The first thing to understand is that you don't "place" a "DirectX object" anywhere. You don't "place" an image inside the plugin. Rather, you draw the image to a window just like in any other windows application.

You may want to pull up my answer to another similar question: Directx control in browser plugin

In a normal plugin instance on windows (a "windowed" plugin) you will be given an HWND that you can draw to. You need to set up a DirectX context in that window and draw to it -- either at framerate that your application needs or just when a RefreshEvent comes. If you follow the link about you'll see a link to a post on colonelpanic.net on drawing in windows; that should help you understand better how you get the HWND.

Images are basically the same deal; if you have image data, you can draw it to the HWND using normal windows drawing APIs.

Finally, if you need additional help I highly recommend you pop into the FireBreath IRC chat room. I'm usually around during daylight hours (GMT-0600) on weekdays and there are others who can sometimes help as well.

Writing a 3D rendering browser plugin

FireBreath is a great cross-platform, cross-browser library for developing C++ browser plugins.

develop a user defined plugin for web browser

1. For Firefox < 4 write an Addon, for 4 and above Jetpack will be the way to go. For Chrome write a Extension. Opera, well wait till 11.5 ships. Safari 5. IE.
2. Read the documentation for each browser.
3. Hm...
4. I hope you tell the user about that.

Right now it reads like you want to deploy something to a PC and monitor all browsers, well if you want to do that you'll have to put some effort into it.

Can I make a simple browser plugin for both desktop and mobile?

You can use the Firefox SDK, available here: https://developer.mozilla.org/en-US/Add-ons/SDK

It allows you to develop for both platforms. And if you have troubles with sdk in firefox for android, you can read this: https://developer.mozilla.org/en-US/Firefox_for_Android

If no UI is required, it will be easy to set up :)

Regarding comments in this post, I made a script for setting up the under development extension:

# Run this script from your project base dir.
#1 - Complete the following vars:
#ANDROID_APP_ID=org.mozilla.fennec;
ANDROID_APP_ID=org.mozilla.firefox_beta; 
#ANDROID_APP_ID=org.mozilla.firefox;
APP_NAME="YourExtensionName";
OUTPUT_DIR=$HOME/Bureau;
FILES="./";
EXCLUDE="-xr!./.git";
CLEAN_APP_DATA=false;

#2 - This will clear all your app cache
if [ "$CLEAN_APP_DATA" == "true" ]; then
    adb shell pm clear $ANDROID_APP_ID
fi

#3 - This will create the XPI file
7z a -r $OUTPUT_DIR/$APP_NAME.xpi $FILES $EXCLUDE;

#4 - This will copy the XPI to the phone SD card. Don't worry if you don't have SD card, it will be copied to a directory called /sdcard
adb push $OUTPUT_DIR/$APP_NAME.xpi /sdcard/$APP_NAME.xpi;

#5 - This will start the Firefox App with the XPI to install
adb shell am start -a android.intent.action.VIEW -c android.intent.category.DEFAULT -d file:///mnt/sdcard/$APP_NAME.xpi -n $ANDROID_APP_ID/.App;

#6 - Redirect tcp to watch via console
#adb forward tcp:6000 tcp:6000; #For Firefox for Android 34 and earlier
adb forward tcp:6000 localfilesystem:/data/data/$ANDROID_APP_ID/firefox-debugger-socket #For Firefox for Android 35 and later

#7 - This will wait to you to test your addon and press any key to close Firefox. 
echo ""; read -p "Press 'r' to restart or any other key to close the browser..." pressedKey;

if [ "$pressedKey" == "r" ]; then 
    adb shell am force-stop $ANDROID_APP_ID;

    #8 - This will remove the XPI from the filesystem (but it's still copied on your Firefox)
    adb shell rm /sdcard/$APP_NAME.xpi
    rm $OUTPUT_DIR/$APP_NAME.xpi;
    echo "Firefox has been forced to stop. Restarting...";
    adb shell am start -a android.intent.action.VIEW -c android.intent.category.DEFAULT -n $ANDROID_APP_ID/.App;

    echo ""; read -p "Test your addon on mobile. Press any key to close app..."; 
fi

adb shell am force-stop $ANDROID_APP_ID;
adb shell rm /sdcard/$APP_NAME.xpi
rm $OUTPUT_DIR/$APP_NAME.xpi;
exit 0;

Writing chrome extension in C#?

Chrome Extension runs in the browser so you can not use C# in Chrome Extension Development.

Again the Chrome extension runs in the browser so you can not use ASP.NET MVC in Chrome Extension Development, but you can use ASP.NET MVC or any other language at server to generate the views and render them in the chrome extension using ajax.

Have a look at this: https://github.com/Ehesp/Chrome-Extension-Twitter-Bootstrap-3-Template

Writing browser plugin in QT

Qt has no native support for browser plugins. There is a set called Qt Solutions, here is git repo for it , you need qtbrowserplugin solution. it has some docs provided with it, which says it supports

FireFox, Safari, Opera, Google Chrome, QtWebKit and any other web browser that supports the "Netscape Plugin API"

Chrome Extension: How to create?

Since you're experienced in JavaScript and HTML, tell you what the best source is?

---

http://developer.chrome.com/extensions/getstarted.html

---

Documentation

The above link (Chrome Extension Documentation) is so simple to read once you get a hang of it. For example, I didn't know JavaScript when I created my first Chrome Extension (Reload all tabs). I recommend you to read the docs (will only take you an hour), and follow the steps that you need.

1. Make sure you understand the different UI's you can tap to
   
   
   1. Browser Actions: You use browser actions to put icons in the main Chrome toolbar.
   2. Context Menus: You use context menus to add items to Chromes context menu.
   3. Desktop Notifications: Use desktop notifications to notify users that something is important.
   4. Option Pages: If you want an options page, this is your guy!
   5. Page Actions: If you want to override certain pages (New Tab, History, Bookmark Manager)
2. Make sure you realize there are many browser interactions that you can tap into:
   
   
   1. Bookmarks: Access to your bookmarks
   2. Cookies: Access to Cookies
   3. History: Access to History
   4. Management: Access to Extension Management
   5. Tabs: Access to your Tabs
   6. Windows: Access to your Windows (which has Tabs).
3. Make sure you understand the difference between Background Pages and Content Scripts, and their limitations.
4. Make sure you realize there are some neat functions in the Chrome.* API.
5. Make sure you understand permissions.
6. Many more

145 Chrome Questions I answered on Stackoverflow

If you want more examples, I have answered many questions regarding Chrome Extensions that might help you get started (145+ Questions Answered), for example, here are some of the more recent ones:

1. Content Script Skeleton
2. Send data from Background Page to Content Script
3. Communication with the embedding page, Simple fetching of the pages JS variable
4. Taking Screenshots in Chrome
5. Walkthrough building an extension
6. Executing JavaScript when a user clicks on a browser action.
7. How to capture selected text and send it to a web service
8. Walkthrough how to create an extension to access Disqus Comment Box
9. Walkthrough how to highlight the DIV that the mouse if hovering over
10. Walkthrough how to move to the top of the page extension
11. Walkthrough how to create a bubble overlay when you select text.
12. etc and 120 more answers for Chrome Extensions, the above is what I copied from the results on the first page. So a search in Google will get you many results.

Real open source extension I created

If you want to see real source code of the extensions I have written (some are super small, some are super big):

• Reload all tabs extension
• Open link in a foreground tab extension
• HTML5 Haptics Chrome extension
• Set Wallpaper extension
• Prayer times extension
• Facebook friend exporter extension
• Proxy Anywhere extension

Resources

If you still want more resources, you can:

1. Read the documentation.
2. Read the Official Chromium Extension Mailing list
3. The unofficial Internet Relay Chatroom #chromium-extensions on irc.freenode.net
4. Google (Will bring you to Stackoverflow, or Quora)

I hope this helped!

---

Related Topics