Introduce JetCC

JetCC is implement (part of) the functionality of the origin MozCC extension with Mozilla's new Jetpack framework. In short, it shows the CC license of the page you're browsing.

One main purpose of MozCC is "provides a convenient way to examine metadata — including Creative Commons licenses — embedded in web pages," while JetCC is only care about CC license metadata. Actually, you can get everything on web page with DOM in Jetpack, but I think the best way to take benefit of this new, super-fast framework, is make everything simple.

Get license URL

Actually write Jetpack extension is pretty simple if you know JavaScript and DOM, let's see how we can read the metadata on the page. With HTML 5 Selector API, you can get the license's URL in only one line:

document.querySelector('a[rel~="license"]').href;

This will give you the link URL of the first A element which has value "license" for its REL attribute, then you know the license used. Selector API is implemented in all major browsers (even IE8!)

In Jetpack, you can also write this with the build-in jQuery, remember to get the document object of focused tab first:

var d = jetpack.tabs.focused.contentDocument;
$(d).find('a[rel~="license"]')[0].href;

Status bar object

jetpack.statusBar.append({
  html: '<div style="position:absolute; top:0; left:0; bottom:0; right:0; background: black center center no-repeat; font-size: 12px; color: white; text-align: center;">no ccREL</div>',
  width: 80,
  onReady: function(doc) {
    var jetcc = new JetCC(doc);
  }
});

[[/code]]

What's the next?

Creative Commons License
本站文字除特別聲明者外,係採創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣授權條款授權,利用前請見說明