This document discusses remixing Confluence using Speakeasy, a cross-product plugin that allows running client-side JavaScript, CSS, and HTML for plugin development. It introduces Speakeasy and its benefits for plugin developers, Confluence admins, and user-driven development. It then demonstrates techniques for remixing Confluence like including images, restricting context, finding and replacing text, making Twitter requests, and using inline dialogs. It provides a sample plugin.xml and code snippets. It concludes with cautionary advice around breaking things, cross-site scripting, and resources for learning more.

2. Remixing Confluence with
Speakeasy
Nabeelah Ali
Atlassian
2

3. Show of hands
Written a Confluence plugin?
3

4. Show of hands
Comfortable with Javascript?
4

5. Show of hands
Enjoy memes?
5

6. About me
Nabeelah Ali
Confluence developer
on 4.0 frontend features
6

7. Confluence 4
• new features
• diverse users
7

8. “ Be the change you seek.
”
Atlassian value
8

9. 9

10. In case you were wondering
• ragefaces is really an extension
BEFORE AFTER
10

11. I can haz plugin?
an atlassian-plugin.xml
<atlassian-plugin name="Ragefaces resource" key="example.plugin.ragefaces" plugins-
version="2">
<plugin-info>
<description>A plugin to turn your [/awyeah]s into images</description>
<vendor name="Meme Corporation" url="http://www.memecorp.us"/>
<version>1.0</version>
</plugin-info>
<web-resource name="Resources" key="resources">
<resource name="foo.js" type="download" location="resources/foo.js"/>
<context>atl.general</context>
</web-resource>
</atlassian-plugin>
11

12. Creating a Confluence plugin
12

13. Creating a Confluence plugin
13

14. Creating a Confluence plugin
run -> debug -> run
14

15. Creating a Confluence plugin
run -> debug -> run
15

16. Creating a Confluence plugin
run -> debug -> run
16

17. Creating a Confluence plugin
run -> debug -> run
17

18. What you will hear today
• Speakeasy 101
• Techniques for remixing Confluence (show & tell)
• Letʼs build an extension
• Cautionary Advice
18

19. Speakeasy

20. Speakeasy: the what
• cross-product plugin
• run client-side Javascript, CSS & HTML
20

23. for plugin developers
super fast
prototyping
23

24. for confluence admins
try out crazy stuff
on production data
24

25. for confluence admins
user-driven
development
25

26. for confluence admins
democratise
development
26

27. Speakeasy: got Confluence?
Atlassian Plugin SDK
--atlas-run-standalone --product confluence --version 4.0
27

29. 29

30. 30

31. 31

32. 32

33. Technique
s

36. Let’s build this thing
1. Include the image
2. Restrict the context
3. Find/replace
4. Twitter request
5. Put it in a dialog
36

37. Include the image
var img =
require('speakeasy/resources').getImageUrl(module, 'bird.png');
37

38. Let’s do this all onready
$(document).ready(function() {
// we’ll put our code here
}
38

39. You have access to
• almost everything is namespaced under AJS
• AJS.$ [jQuery]
39

40. You have access to
• almost everything is namespaced under AJS
• AJS.$ [jQuery]
• AJS.Meta
AJS.Meta.getAllAsMap()
AJS.Meta.get(“space-key”)
40

41. Restrict the context
if (!!AJS.Meta.get("page-id") &&
!AJS.Meta.get("editor-mode")) {
// do our stuff
}
41

42. atlassian atlassian
Confluencep ages
viewing a page/blog editing a page/blog dashboard
breadcrumbs breadcrumbs breadcrumbs
title title Welcome to Confluence Updates
content
content
Spaces
SAVE
atlassian atlassian
42

43. Find & replace
var content = AJS.$("#main-content");
var twitterfiedContent = content.html().replace(/(^|s)#(w+)/g, "
$1#<a href="http://search.twitter.com/search?q=%23$2">$2</a>
<img src='"+ img + "' class='twittericon' hashtag='$2'/>");
content.html(twitterfiedContent);
43

44. Twitter request
$.getJSON("http://search.twitter.com/search.json?callback=?", {
q: "#" + id,
rpp: "5",
lang: "en"
}, function(data) {
$.each(data.results, function() {
// Put each result’s twitter handle, tweet text and user
//profile photo in nice divs and style.
});
});
44

45. Twitter request
$.getJSON("http://search.twitter.com/search.json?callback=?", {
q: "#" + id,
rpp: "5",
lang: "en"
}, function(data) {
$.each(data.results, function() {
// Put each result’s twitter handle, tweet text and user
//profile photo in nice divs and style.
});
});
45

46. Atlassian User Interface (AUI)
• a reusable set of UI components
46

47. Put it in a dialog
AJS.InlineDialog($(this), 1, function(content, trigger, showPopup) {
}, {onHover:true});
47

48. Put it in a dialog
AJS.InlineDialog($(this), 1, function(content, trigger, showPopup) {
var tweets = AJS.$("<div></div>").attr("id", "tweets");
$.getJSON("http://search.twitter.com/search.json?callback=?", {q: "#" + id, rpp: "5",
lang: "en"}, function(data) {
$.each(data.results, function() {
// Assemble results into a tweets div.
});
$(content).html(tweets);
showPopup();
});
}, {onHover:true});
48

49. THE TWEETINATOR
49

50. Cautionary advice

51. Breaking things
• Unsubscribe & restore URLs
yourinstance/plugins/servlet/speakeasy/unsubscribe
yourinstance/plugins/servlet/speakeasy/restore
51

52. Breaking things
Feedback
52

53. Breaking things
53

54. Should you use it?
• Do you trust your users?
• Does your instance allow public signup?
54

55. Cross-site scripting
• inserting unescaped HTML into the page
• from user input
• from data you fetched
55

56. XSS Example
var result = "<script>alert();</script>";
var el = document.getElementById('myDiv');
56

57. XSS Example
var result = "<script>alert();</script>";
var el = document.getElementById('myDiv');
el.innerHTML = result;
57

58. XSS Example
var result = "<script>alert();</script>";
var el = document.getElementById('myDiv');
el.innerHTML = result; // BAD - Don’t do this!
58

59. XSS Example
var result = "<script>alert();</script>";
var el = document.getElementById('myDiv');
el.innerHTML = result; // BAD - Don’t do this!
el.innerHTML = AJS.escapeHtml(result); // Do this instead.
59

60. XSS Example
var result = "<script>alert();</script>";
var el = document.getElementById('myDiv');
el.innerHTML = result; // BAD - Don’t do this!
el.innerHTML = AJS.escapeHtml(result); // Do this instead.
AJS.$(el).text(result); // Or this.
60

61. Interested in learning more?
Securing your Plugin - Penny Wyatt @ AtlasCamp 2010
Protip If you weren’t here last year or
just enjoy nostalgia, check out the
Atlascamp 2010 website for videos
of every session.
61

62. Where can you go from here?

63. Product Compatibility
• Speakeasy documentation
• Extension repository
• Remember: not just Confluence!
63

64. Resources
Speakeasy Documentation
https://developer.atlassian.com/display/SPEAK/Speakeasy
Speakeasy Source on github
https://github.com/mrdon/speakeasy-plugin
Speakeasy JARs
https://maven.atlassian.com/content/repositories/atlassian-public/com/atlassian/labs/speakeasy-plugin/
64

65. TAKE-AWAYS
“ Got an hour to spare? That’s enough time to
”
prototype a new Confluence feature with Speakeasy.
#atlascamp
65

66. Thank you!