{"id":1627,"date":"2009-06-05T08:50:38","date_gmt":"2009-06-05T06:50:38","guid":{"rendered":"http:\/\/notizblog.org\/?p=1627"},"modified":"2023-01-31T09:01:54","modified_gmt":"2023-01-31T08:01:54","slug":"mozilla-jetpack-und-microformats","status":"publish","type":"post","link":"https:\/\/notiz.blog\/2009\/06\/05\/mozilla-jetpack-und-microformats\/","title":{"rendered":"Mozilla Jetpack (und Microformats)"},"content":{"rendered":"\n<p><a href=\"https:\/\/wiki.mozilla.org\/Jetpack\" data-type=\"URL\" data-id=\"https:\/\/wiki.mozilla.org\/Jetpack\">Jetpack<\/a> ist das j\u00fcngste Baby der <em>Mozilla Labs<\/em> und bietet eine Art API, die es Entwicklern erm\u00f6glicht, den Firefox mit klassischen Web-Techniken (HTML, JavaScript und CSS) zu erweitern. Statt mit <abbr title=\"XML User Interface Language\"><a href=\"http:\/\/www.mozilla.org\/projects\/xul\/\">XUL<\/a><\/abbr> kann man seine Firefox Addons demn\u00e4chst vielleicht wirklich mit HTML und CSS gestalten. Gro\u00dfartige Idee!<\/p>\n\n\n\n<figure class=\"wp-block-embed alignwide is-type-video is-provider-vimeo wp-block-embed-vimeo\"><div class=\"wp-block-embed__wrapper\">\n\t\t<div class=\"embed-privacy-container is-disabled embed-vimeo\" data-embed-id=\"oembed_14b9cefdb98f7e4bff578852b82ddb60\" data-embed-provider=\"vimeo\" style=\"background-image: url(https:\/\/notiz.blog\/wp-content\/uploads\/embed-privacy\/thumbnails\/vimeo-4752576.jpg?ver=1.12.3); aspect-ratio: 700\/512;\">\t\t\t\t\t\t<button type=\"button\" class=\"embed-privacy-enable screen-reader-text\">\u201eMozilla Labs Jetpack &#8211; Intro &amp; Tutorial\u201c von Vimeo anzeigen<\/button>\t\t\t\t\t\t<div class=\"embed-privacy-overlay\">\t\t\t\t<div class=\"embed-privacy-inner\">\t\t\t\t\t<div class=\"embed-privacy-logo\" style=\"background-image: url(https:\/\/notiz.blog\/wp-content\/plugins\/embed-privacy\/assets\/images\/embed-vimeo.png?ver=1.12.3);\"><\/div>\t\t<p>\t\tHier klicken, um den Inhalt von Vimeo anzuzeigen.\t\t\t\t\t<br>\t\t\t\t\tErfahre mehr in der <a href=\"https:\/\/vimeo.com\/privacy\" target=\"_blank\">Datenschutzerkl\u00e4rung von Vimeo<\/a>.\t\t<\/p>\t\t<p class=\"embed-privacy-input-wrapper\">\t\t\t<input id=\"embed-privacy-store-vimeo-14b9cefdb98f7e4bff578852b82ddb60\" type=\"checkbox\" value=\"1\" class=\"embed-privacy-input\" data-embed-provider=\"vimeo\">\t\t\t<label for=\"embed-privacy-store-vimeo-14b9cefdb98f7e4bff578852b82ddb60\" class=\"embed-privacy-label\" data-embed-provider=\"vimeo\">\t\t\t\tInhalt von Vimeo immer anzeigen\t\t\t<\/label>\t\t<\/p>\t\t\t\t\t\t<\/div>\t\t\t\t\t\t\t\t<div class=\"embed-privacy-footer\"><span class=\"embed-privacy-url\"><a href=\"https:\/\/vimeo.com\/4752576\">\u201eMozilla Labs Jetpack &#8211; Intro &#038; Tutorial\u201c direkt \u00f6ffnen<\/a><\/span><\/div>\t\t\t<\/div>\t\t\t\t\t\t<div class=\"embed-privacy-content\">\t\t\t\t<script>var _oembed_14b9cefdb98f7e4bff578852b82ddb60 = '{\\\"embed\\\":\\\"&lt;iframe title=&quot;Mozilla Labs Jetpack - Intro &amp;amp; Tutorial&quot; src=&quot;https:\\\\\/\\\\\/player.vimeo.com\\\\\/video\\\\\/4752576?dnt=1&amp;amp;app_id=122963&quot; width=&quot;700&quot; height=&quot;512&quot; frameborder=&quot;0&quot; allow=&quot;autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share&quot; referrerpolicy=&quot;strict-origin-when-cross-origin&quot;&gt;&lt;\\\\\/iframe&gt;\\\"}';<\/script>\t\t\t<\/div>\t\t<\/div>\t\t\n<\/div><\/figure>\n\n\n\n<p>\u00dcbrigens unterst\u00fctzt Jetpack, <a href=\"https:\/\/notiz.blog\/2008\/09\/16\/ubiquity-und-microformats\/\">wie auch Ubiquity<\/a>, die ab der Version 3 in Firefox nativ implementierte <a href=\"https:\/\/developer.mozilla.org\/En\/Using_microformats\">Microformats API<\/a>. Der folgende Code zeigt, wie man die Microformats API in Jetpack-Skripte integrieren kann. Das Beispiel z\u00e4hlt z.B. alle hCards der Seite, auf der man sich gerade befindet und zeigt das Ergebnis per Info-Message an:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">Components.utils.import(<span class=\"hljs-string\">\"resource:\/\/gre\/modules\/Microformats.js\"<\/span>);\n<span class=\"hljs-comment\">\/\/ count hCards<\/span>\njetpack.tabs.onFocus(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-comment\">\/\/ load HTML<\/span>\n  <span class=\"hljs-keyword\">var<\/span> doc = jetpack.tabs.focused.contentDocument;\n  <span class=\"hljs-comment\">\/\/ count microformats <\/span>\n  <span class=\"hljs-keyword\">var<\/span> uFcount = Microformats.count(<span class=\"hljs-string\">'hCard'<\/span>, doc);\n  <span class=\"hljs-comment\">\/\/ load notifier<\/span>\n  jetpack.notifications.show({\n    <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">'hCards'<\/span>,\n    <span class=\"hljs-attr\">body<\/span>: <span class=\"hljs-string\">'number of hCards on this website: '<\/span> + uFcount,\n    <span class=\"hljs-attr\">icon<\/span>: <span class=\"hljs-string\">'http:\/\/microformats.org\/favicon.ico'<\/span>\n  });\n});<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><ins><strong>Nachtrag<\/strong><\/ins>:<\/p>\n\n\n\n<p>Unter Windows und Linux scheinen die Messages nicht so ganz zu funktionieren, deshalb gibt&#8217;s hier nochmal nen Beispiel wo der Counter in der Statusbar ausgegeben wird:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">Components.utils.import(<span class=\"hljs-string\">\"resource:\/\/gre\/modules\/Microformats.js\"<\/span>);\njetpack.statusBar.append({\n  <span class=\"hljs-attr\">html<\/span>: <span class=\"hljs-string\">'&lt;img src=\"http:\/\/microformats.org\/favicon.ico\"&gt; hCards: &lt;span id=\"hcard-count\"&gt;0&lt;\/span&gt;'<\/span>,\n  <span class=\"hljs-attr\">onReady<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">jetpackWidget<\/span>) <\/span>{\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">counthCard<\/span>(<span class=\"hljs-params\"><\/span>)<\/span>{\n      <span class=\"hljs-comment\">\/\/load HTML<\/span>\n      <span class=\"hljs-keyword\">var<\/span> doc = jetpack.tabs.focused.contentDocument;\n      <span class=\"hljs-comment\">\/\/ count microformats<\/span>\n      <span class=\"hljs-keyword\">var<\/span> uFcount = Microformats.count(<span class=\"hljs-string\">'hCard'<\/span>, doc);\n      <span class=\"hljs-keyword\">if<\/span> (uFcount &gt; <span class=\"hljs-number\">0<\/span>) {\n        $(jetpackWidget).find(<span class=\"hljs-string\">'#hcard-count'<\/span>).html(uFcount);\n      }\n    }\n    jetpack.tabs.onFocus(counthCard);\n  }\n});<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Mal schaun ob mir demn\u00e4chst noch etwas sinnvolleres Einf\u00e4llt \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Jetpack ist das j\u00fcngste Baby der Mozilla Labs und bietet eine Art API, die es Entwicklern erm\u00f6glicht, den Firefox mit klassischen Web-Techniken (HTML, JavaScript und CSS) zu erweitern. Statt mit XUL kann man seine Firefox Addons demn\u00e4chst vielleicht wirklich mit HTML und CSS gestalten. Gro\u00dfartige Idee! \u00dcbrigens unterst\u00fctzt Jetpack, wie auch Ubiquity, die ab der [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"webmentions_disabled_pings":false,"webmentions_disabled":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[2],"tags":[5171,130,309,820,164,705],"class_list":{"0":"post-1627","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-web","7":"tag-fediblog","8":"tag-firefox","9":"tag-javascript","10":"tag-jetpack","11":"tag-microformats","12":"tag-mozilla","13":"h-entry","14":"hentry"},"_links":{"self":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts\/1627","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/comments?post=1627"}],"version-history":[{"count":2,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts\/1627\/revisions"}],"predecessor-version":[{"id":22480,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts\/1627\/revisions\/22480"}],"wp:attachment":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/media?parent=1627"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/categories?post=1627"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/tags?post=1627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}