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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Paris js extensions

Ähnlich wie Paris js extensions (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Paris js extensions

Hinweis der Redaktion