---
title: WWDC2004 Session 413
framework: wwdc
role: article
path: wwdc/wwdc2004-413
---

# WWDC2004 Session 413

## Transcript

Kind: captions Language: en for 13 plugging development for Safari and WebKit Chris lunenburg to re-engineer so first of all what you're going to learn here well first of all you're going to learn what our plugins in case you don't already know then I'm going to go into why you develop plugins the typical reason for wanting to develop plug-in is to extend the functionality of a web browser but you'll suit you'll soon see that there are other reasons as well I'll go into how to develop plugins I'll go into the types of plugins that you can develop and then the issues involved with developing those plugins and then I'll discuss using plugins in your web page that will involve the right kind of HTML for embedding your plug-in on a web page as well as scripting your plugins from JavaScript so what our plugins well plugins are libraries typically they're written by third parties you may be familiar with photoshop plugins they add filter effects images in Photoshop well in web browsers plugins support content types that the browser doesn't handle by default for example without the apple quicktime plugin you would be able to see QuickTime movies in Safari and other web browsers other popular examples are macromedia flash and windows media player so why would you want to develop a plug-in well first of all you'd want to extend web browsers as I mentioned before you'd want to handle content types that the web browser doesn't handle by default and the other reason for 12 to write a plugin for a web browser it's a basically run native code from a web page you can display HTML you can run JavaScript but in some cases you may want to run some native code to get some sort of rich browsing experience and the other major major reason for providing a plugin is to extend your WebKit application if you have a web chat application the only way that you can get a widget inside of a webview is to you know write write a plug-in for example mail users plugins for their file attachment widget or they will be using plugins for their file attachment which it in mail messages and dashboard widgets can dashboard widget can use plugins too so I think you have about 24 hours to get a dashboard widget working and you probably get a pretty cool and if you use a plug-in so this is the biggest part of my talk here it's how to develop plugins first of all I'll be covering the two types of plugins or the two types API is that you can use to develop a plugin first of all I'll be discussing the Netscape plug-in API it's been around for a number of years I'm sure that most of you are familiar with it and then I'll discuss the WebKit plug-in API which is something completely new and I'll go into depth about that shortly then I'll discuss a bunch of things which relate to both kind of both kinds of plugins that is using blood are using bundles which is how you represent and how you package up your plug-in on disk and then registration which is how you actually register your plug-in with the host application then i'll go into installation which is basically where you install your plugin so here in this wizzy graphic here you can see that there are two types of plugins that work in Safari and WebKit there's an FJ plug-in and there's a WebKit plugin first I'm going to focus on the Netscape plugin so before I go any further about this I'm going to discuss history so the Netscape plugin api has been around since 1996 he was introduced in netscape 2 point 0 microsoft inter explorer shortly after started adopted it in their version 3 pointer it's used by many web browsers out there if not all web browsers it's always been supported inside of Safari actually so here's what the Netscape plugin api provides it provides a drawing API so that you're plugging those when and where to draw it provides an events API so that your plugin can receive user events it provides a networking API so that your plug-in can send and receive network streams so before I go in depth about any sort of API so I want to discuss an issue about the actual file format of your plugin well on macro Senate plug-in or library can be compiled in two different ways it can be compiled in ma co or pests AKA CFM file formats well we really like it for you to use macco it's the native object file format on Mac OS 10 CFM is really something of the past back in the classic days Marco plugins load much faster than CFM plugins in fact when the quicktime plugin was ported over to Matco we found that it loaded 100 times faster new api is on the system are only going to be provided or only to be available to Marco applications and libraries it they won't be available for CFM applications and libraries and you can develop and debug a mock go plug-in inside of Xcode that can't be done with CFM so here's the big news we're extending the netscape api we're adding more stuff to it first of all we're adding a scripting API which is the ability for your plugin to be accessed from javascript and from your plugin you can get the JavaScript and the rest of the document we're also adding an API to access HTTP headers this is a kind of a developer request here this allows your plugin to get up the HTTP headers which is the all basically all the server information besides of the content also we're adding a state information API this is an API that allows you to get the state of the plugin inside of the web page that is whether the plugin is in the frontmost tab or not whether the window is from most window or not whether the windows minimized or not and we're having much more expected much more to expect here a lot more from us and what's important about this is that this is not just an apple thing we're we're working with companies such as Mozilla macromedia and opera to basically get this new API working in many web browsers and many plugins out there so here's my with the netscape scripting graphic so i'm going to discuss Netsky of scripting this is basically the only new netscape api that i'm going to discuss today so what is what is scripting well it allows JavaScript to access your plugins and it allows plugins to access jobs script and the rest of the document so the Netscape API used to actually provide this functionality in a technology called live connect live connects is a Java API it's pretty slow because it involves starting up a Java VM and involving Java and it's rather simple communication between the plugin and the browser in WebKit lab Connect is only used for Java applets we don't support there for communication with plugins well in the new API it's a capi that is it's just like the rest of the netscape api it's all based on C and it's much faster than live connected so i'm going to talk about i'm going to get more in depth about the scripting api here but first i'm going to discuss the communication from javascript to the netscape plugin so when javascript encounters your plugin in a script it will call npp get value to get the NP class and the NP object which represents your plugin now the NP class you can think of at the interface between your plugin and javascript and empty object is the is you can think of that as an instance of your NP class I'll get more into that shortly so here's an example I hope you can see that here's an example of MP get value in this case if the variable that that the browser is asking the plugin for is NP p v plugin scriptable and p object i then return an empty object which represents my plug into javascript and here's MP class so empty class is basically a struct consists of a struct version and a set of function pointers which define the interface between your plugin and javascript first of all there's allocate the allocate function is called to allocate an NP object the allocate is called to deallocate that empty object invalidate is called when javascript no longer is using your NP object has method is called when javascript is calling your is calling a method on your FB object to make sure it actually has it invoke is called to invoke a specific method on your NP object and has properties called to check if your NP Asik has the property get property is called to get at a value for specific property set property is called to set a value for a specific property and here's an example of empty object in this in this case my empty object is a movie object it basically contains an MP class and a reference count though so that the required fields of the of the struck there and then everything that follows is basically anything else that I want to have in that empty object so what you can see here what here what you see here is my movie object this is basically what well how I represent my plug-in in JavaScript so here's an example of movie allocate my allocate function basically allocates the movie object and returns it to JavaScript and here's an example of MP invoke my excuse me moving evoke which is my movie which is my invoke function so if javascript is calling play I just call play movie which is an internal function within my plugin it's javascript is calling pause I just called pause movie which is an internal function within my plugin and you know before I exit this function I said a return value in this case well in either case i have no return value so I said I'm defined so I've discussed the communication from JavaScript to the plug-in now I'm going to go in the opposite direction and that's from the plug in the JavaScript so the way this works is that if your plugin wants to get a javascript the interpreter and the rest of the document it's basically called NP NP n get value to get the window object using the variable name here NP n v window NP object so once it gets back once it gets back this window object it's basically an empty object so I can start making NP object calls on it for example i can call create object which creates an object i'll actually need to implement this in order to return an object back to javascript if i ever need to do that retain object in case they want to keep a specific object around for a while and of course for every retaining it video really so there's release object and here are my invocation methods there's npn call which allows me to invoke a specific method on an empty object and then there's npn evaluate which allows me to take a string a javascript string and evaluate it and get back a result and here are props at property access methods which allow me to get to actual properties of NP objects so there's npn get property which returns a property for of an env object set property which allows me to change your property of n empty object npn remove property which allows me to remove a property of an NP object so let's do a little demo so I need to drink ok so what I'm going to show here is my little netscape plugin it's called netscape movie plugin it's basically it's basically just like the quicktime plugin just a little simpler and what i'm going to show you here is i'm not going to go too in depth with the code here as you can see it's pretty complex it takes a good amount of code to basically get a simple plugin up and running an sk plugging up and running in WebKit so what i want to show you actually here and this in this file is the number of lines of eggs it takes about six hundred twenty six lines to get a simple plug-in up and running so remember the number because it's going to matter a little later in this presentation so let's give this guy a try cross figures so as you can see here I basically have my little plug in working in here on this web page this is not the quicktime plugin i don't even have an assault so on this page i have the plug-in and to form elements playing pause now these form elements actually cause calling JavaScript functions on my movie [Applause] [Music] BMW introduces the first seamless integration of my ipod and automobiles so that's it so you can actually download that plugin from connectable calm and use it as a template if you want to to the presentation machine please okay okay okay so I've discussed the development of an Etsy a plugin so now let's focus on the development of a WebKit plugin well the website plugin api is an objective c api the cocoa api it's very simple both cocoa and the api the plugin api itself are very simple to work with any WebKit apne web keep plugging that you work that you develop will work inside of a WebKit application so here's what the WebKit api web chat plugin api provides well first of all your plug-in and every instance of your plug-in is an NS view so there's no explicit API for dealing with events or drawing that's all done the NS view it there's no explicit API for for URL loading because you can do that very easily yourself using nsurlconnection which is a foundation api another thing that this api provides is access to web key classes such as web frame so that you can have a closer interaction with with WebKit if you choose to have that and also it has a scripting api which is which is basically web gets new script api which was discussed in depth this morning but i'll go into that shortly so here's the first message that your plugins should implement it's called plugin view with arguments this is actually the only method that your plugin needs to to to implement so as you can see it's it's very simple to get one of these up and running so plugin view with arguments basically returns your plugin view the plugin view which should which is supposed to be inside of your inside of your web view and there are some other plugin methods now these are all optional you can implement them if you want the first one is web plug-in initialize this method is called soon after your plug-in is created in this method you basically start allocating resources and doing that sort of thing then there's web plugins start in this method you start doing work you start animating the members will plug and stop in this method you stop doing the work you stop you cease all sort of animation then there's web plugging destroyed in this method you destroy or D Alex any and release any sort of resources that you might have or you can just wait until you get the d alec method and here are some other methods that your plugin can implant first of all there's web plugin is selected so this is called when your plugins selection state has changed so if you are selected you probably want to draw some sort of selection state and here's object for web script this is the method that returns the the object which represents your plugin in javascript and i'll go into that shortly so here are the container methods these are the methods that from your plugin you can call on to the container so first of all there's web plug-in container loader question frame this basically tells the containers will to load a specific web page and a specific frame oops okay then there's what plugin container show status if the container such as Safari it has a status bar it should show some sort of status message that bottom of the page at this point then there's web plug web plug-in container selection color so if your plugin is selected it should use this selection colors to draw some sort of selection state and lastly there's web print so from your plugin you can get the web frame which contains the plug-in from the web frame you can get to the web data source in the web view and all the other web heat classes okay so now i'm going to go to WebKit scripting this was cover this morning but i'm just going to brush over this right now first of all I'll go I'll go into scripting from javascript to your WebKit plugin so when javascript encounters your plug-in object it will call object for web script to get the reference to plug in the objective-c representation of your JavaScript object now that object that is returned I can choose to implement these methods first of all there's web script name for selector which allows you to choose a name given a selector that your object implements and then there is selector is excluded from web script and this method you basically decide which methods you want your plugin to implement now this method is pretty important as far as secure as far as security is concerned because you only want to export methods that you think are secure will crash the page and what have you so here's an example of an implementation of his selection excluded from web script in this case I'm allowing the play method on my plug-in to be exported and at the bottom there is just the simple limitation of the play methods then here are some methods about property access first of all there's web script name for key which allows me to choose a name given a property on my what on my on my plug-in object and then there is key excluded from web scripts and just like the previous method or like the message that dealt with with with JavaScript methods and here I choose which properties I want to export to JavaScript so there is an example is ski excluded from web scripts in this example I'm allowing muted the muted property of my object to be exported and at the bottom there are some methods which allow the key value coding to access my music property okay so i've just i've discussed scripting from javascript to your website plugin now let's go in the other direction so from your plug-in you can get at the document or the window object in two different ways you can call windows script objects on web view which which will return the opposite ectasy version of the JavaScript window object or you can call domdocument on web frame which will which will basically be the dom document which contains your plugin so here's the interface for windows script objects on web view as you can see here it returns a web Script object so I'm basically I'm going to just show you now a few methods that web web script object implements or provides first of all there's set value for key which allows you to set a specific value for a specific key on a web Script object then there's value through T which allows you to get a value given a key there's called web script method which allows you with arguments which allows you to invoke a specific method on a web Script object there's evaluate web script which allows you to evaluate a javascript string and then here's the interface for getting the domdocument off the web print as you can see here it returns a dumb document object and here's just kind of a hodgepodge of methods that domdocument implements and provides actually these methods are also Dom node methods because Dom document is a subclass of Dom node so here's attributes this allows me to get the attributes of the document or dom node here's paranoids because you me the paranoid of a document or dom node child notes gives me the children of dom node first child during the first child of dom node is a rather self-explanatory last child gives me the last child of a dom node previous sibling so on and so forth so for more information about the domdocument Dom nodes I suggest you go to this talk on the Friday at ten-thirty I'm not sure of the numbered maybe want to give us me for 26 and that'll discuss the Dom document and all that as well as editing if you're interested in that so let's do a little demo of a WebKit plugin so I'm not very original my web keep pluggin does the same thing as my previous plug-in does it's called WebKit movie plugin but remember that the previous plug-in did everything in about 600 plus lines of code this does it in 137 so as you can see is extremely easy to write one of these puppies so I'm not going to go into the code here but I'm just going to go into a little demo of it [Music] ah I [Music] okay so you may be thinking now okay he just did the same demo two times in a row that's pretty damn boring okay so let me try to spice it up a little bit wouldn't it be cool if I could somehow control the play rate of that movie you know control how fast it plays from the web page so I'll go down to my plug in here and enable my set play rate function and the very important step i exported it to the Java strict JavaScript here in this method give it a little compiling it works and then I'll go into my HTML file and enable a slider which is a kind of new form control that is sort of WebKit specific and as you can see here my slider basically just called set movie player right which is a JavaScript function which calls my plugin and let's give this a try oops hey it's beta let's give him that [Music] okay so okay so that's my whip keep plugging demo so I've discussed those types of plugins that you can develop for Safari and WebKit let's give them a little comparison so first of all the Netscape plugin api is the capi it's cross-platform the same API will work on Windows Linux in the Mac it works in the most brought most web browsers out there in fact it probably works in all web browsers out there and the WebKit plugin api is at coco Objective C API it only works in WebKit applications it's possible that it may work in other applications in the future and as you've seen here it's very easy to develop one of these things so now I'm going to get into some issues that relate to both texts of eight both types of plugins well first of all plugins on disk are bundles well what is a bundle a bundles a folder which contains the library that is the compiled code of your plugin it contains resources which are the resources that your plugin may want to use such as images and those types of things it contains localizations so you're plugging can be localized in many different language a single plug-in bundle can be localized in there are many different languages and lastly contains registration information so that your your plugin is probably registered with a host application so let's get into registration information well you're plugging is responsible for registering the contents that content types that it can handle that registration information can be sort in two different ways the first way and the way these days or the way that it's always been done is with carbon resource files the new way is with info booths with the info.plist file basically the info.plist file is you're probably all familiar with it but it's just a very easy way to edit and maintain metadata for your application or a bundle on Mac OS 10 this is a modern way of actually doing it working with carbon resource files tends to be a big pain so if you care currently fop those files only work in WebKit applications but if you care about working with other browsers as well on the Mac you can use both and that will work just fine so let me go into registration via the info pedophile first of all you want to provide the description of your plug-in which is the user-visible description of your plugin then you want to provide a key and value for the name of your plugin which is the user-visible name of your plug-in and lastly you want to go into the mine types at your plug-in can handle so within that mine type you want to specify the extensions that map that mime type as well as a user visible description for that mime type so with all this information you'll be able to register your plug in nice and easily inside of a whooping application now that may looks a little complex it certainly does to me but inside of property list editor it's very easy to write one of these things so you've got your clear plugin compile it's got all the registration information all set up where do you install this thing well you can install in three different places you can install them / library / internet plugins so that it works with all applications for all users you can install it until the library / intended plugins so that it works for all applications just for that specific user or you can install it in the plugins directory of your application so only work inside of that application so this is the last part of my talk here this is actually how to use your plugin i'm going to first discuss the good kind of HTML for embedding your plugin on on the on a web page and then i'll discuss how you script your plugin from javascript well most web browsers out there support the embed tag it's a sufficient way of embedding a plug-in on a web page but if you have a windows version of your plug-in you'll need to that need to use the object tag well it's but it's possible to use HTML that does both and and thus works with all browsers here's the embed tag I'm sure you've seen it all before and here's the object tag subscribed by windows and / am tags which are children of the object tag and then the embed tag which is also a child of the object tag and that's basically it so with it's a little somewhat lengthy HTML snippet here you can get your plug-in working on all browsers so let's get into scripting now from javascript basically each instance of your plug-in on the page has a JavaScript object which represents it you can get at that JavaScript object by name or by number once you actually have it you can call the exposed methods on it as well as the exposed properties so here's a little sample this is actually taken right from my demo here Here I am getting a plug-in by name since I know that excuse me by number since I know that it's the first plug-in on the page I can just use index zero on the embeds array and then here's an example of me using or calling a plug-in method which is play and then here's an example of me getting a plug-in by name you don't see it here but my embed up my bed tag actually has a name attribute which is movie plug it and Here I am getting it by moving movie plug-in and at the bottom layer I am actually getting and setting a plug-in property so everything that it discussed today is going to be available on safari is available on safari web get 1 point 3 beta on Panther you can download it now at connectable calm it's also available on your tiger seed that you got today except for the new netscape scripting api so those are only available on the panther beta now once both the Panther beta or once both the Panther and tiger version of Safari GM everything that I mentioned today will be will work in both so for more information you can go to connect at apple com to get sample code links and demos you can actually get the demos which I showed you today and you can use them as templates if you want you can also go there for new documentation for WebKit and lastly at the bottom there you can go to that web desk ape URL to get information about the Netscape plug-in API that doesn't actually include the Nets the new API to get at those and for information about those you need to actually use my my demos I gave today