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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Paris js extensions

Similaire à Paris js extensions (20)

Dernier

Dernier (20)

Paris js extensions

Notes de l'éditeur