Paris js extensions

Browser Extensions

Erwan Loisant <elo@zenexity.com>

@erwan

Why?

• Integrate deeply with a service
• Add new features to the browser
• Implement a recent spec in a lagging
browser
• Anything you can think of!

History

• 20th Century: plugins, native addons
• 2002: Mozilla 1.0 written in XUL and Javascript
• 2004: Firefox 1.0 with a focus on extensions
• 2007: FUEL (Firefox User Extension Library)
• 2009: Jetpack, Chrome Extensions

local storage
Javascript
JSON

CSS HTML

{
"name": "Telify",
"version": "0.1",
"description": "Click to call",
"background_page": "background.html",
"page_action": {
"default_icon": "icons/tel.gif",
"default_popup": "popup.html"
},
"content_scripts" : [{
"matches" : ["http://*/*"],
"js" : ["contentScript.js"]
}],
"permissions": [
"http://cdnjs.cloudflare.com"
]
}

manifest.json

<!DOCTYPE html>

<html>
<style> body { width: 200px; } </style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/
zepto/0.7/zepto.min.js"></script>
<script>
$(document).ready(function(){
var telList =
chrome.extension.getBackgroundPage().telList;
if (telList && telList.length > 0) {
for (i in telList)
$("ul").append("<li><a href='callto:" +
telList[i] + "'>" + telList[i] + "</a></li>");
}
});
</script>

<body><ul></ul></body>
</html>

popup.html

XPCOM

XUL
Javascript
XBL

CSS HTML

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css"
href="chrome://custombutton/content/button.css"?>

<!DOCTYPE overlay >
<overlay id="custombutton-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/
there.is.only.xul">

<script type="application/javascript"
src="chrome://custombutton/content/button.js"/>


<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="custom-button-1"/>
</toolbarpalette>


<toolbarbutton id="custom-button-1"
label="Custom"
tooltiptext="My custom toolbar button"
oncommand="CustomButton()"
class="toolbarbutton-1 chromeclass-toolbar-additional custombutton"
/>

</overlay>

overlay.xul

AKA:
“The Chrome way applied to Firefox”

{
"name": "weather-example",
"license": "MPL 1.1/GPL 2.0/LGPL 2.1",
"author": "Alexandre Poirot",
"version": "1.0",
"fullName": "Weather example",
"id": "weather-example",
"description": "a basic add-on that display a
weather widget"
}

package.json

const data = require("self").data;
const ss = require("simple-storage");
const Request = require("request").Request;
const timer = require("timer");

const panel = require("panel").Panel({
width: 240,
height: 180,
contentURL: data.url("panel.html"),
contentScriptFile: [data.url("panel.js")],
onShow: function () {
this.port.emit("show");
}
});

[...]

lib/main.js

COM
C#

C++ ActiveX

Windows API

STDMETHODIMP CExplorerBar::SetSite(IUnknown *punkSite) {
//If a site is being held, release it.
if(m_pSite) {
m_pSite->Release();
m_pSite = NULL;
}

//If punkSite is not NULL, a new site is being set.
if (punkSite) {
//Get the parent window.
IOleWindow *pOleWindow;

m_hwndParent = NULL;

if(SUCCEEDED(punkSite->QueryInterface(IID_IOleWindow,
(LPVOID*)&pOleWindow))) {
pOleWindow->GetWindow(&m_hwndParent);
pOleWindow->Release();
}

if(!m_hwndParent) return E_FAIL;

if(!RegisterAndCreateWindow()) return E_FAIL;

//Get and keep the IInputObjectSite pointer.
if(SUCCEEDED(punkSite->QueryInterface(IID_IInputObjectSite,
(LPVOID*)&m_pSite))) {
return S_OK;
}

return E_FAIL;
}

return S_OK;
}

Fortunately, there’s more...

Pinning API (IE9+)
window.external.msSiteModeClearIconOverlay()
window.external.msSiteModeSetIconOverlay()
window.external.msSiteModeActivate()
window.external.msIsSiteMode()

Do we really need
extensions?

last word: don’t abuse
extensions!

Questions?

@erwan
elo@zenexity.com

Paris js extensions

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Paris js extensions

Similar to Paris js extensions (20)

Recently uploaded

Recently uploaded (20)

Paris js extensions

Editor's Notes