1. Chrome
Extension
Team 25
賴君濠
郭育呈
陳品豪
陳冠廷

2. Why
Because what we need is not enough.
Build it and share

3. Architecture UI
Bridge
Access DOM

4. Manifest.json https://developer.chrome.com/extensions/manifest
JSON-formatted {
// Required
"manifest_version": 2,
"name": "My Extension",
"version": "versionString",
... }

5. Manifest.json - icon
JSON-formatted {
...
"icons": { "16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png" }, }

6. Manifest.json - page/browser action
JSON-formatted {
...
// Pick one (or none)
"browser_action": {...},
"page_action": {...}, … }

7. Manifest.json - browser action
JSON-formatted
"browser_action": {
"default_icon": {
"19": "icons/19x19.png",
"38": "icons/38x38.png" },
"default_title": "That's the tool tip",
"default_popup": "browseraction/popup.html"

8. Manifest.json - page action
JSON-formatted
"page_action": {
"default_icon": {
"19": "icons/19x19.png",
"38": "icons/38x38.png" },
"default_title": "That's the tool tip",
"default_popup": "browseraction/popup.html"

9. Manifest.json - page action
In Background.js
chrome.pageAction.show(tabId);

10. Manifest.json - developer tools
JSON-formatted
"devtools_page": {
"devtools/devtools.html" },
devtools.inspectedWindow
devtools.network
devtools.panels

11. Manifest.json - developer tools
devtools.panels
chrome.devtools.panels.create(
"Team25",
"icons/16x16.png",
"devtools/devtoolscontent.html",
function() { } );

12. Content Script & Background Script

13. Manifest.json - content scripts
"content_scripts": [ {
"matches": [" " "file:///*"],
"css": ["mystyles.css", ...]
"js": ["content.js", ...] } ],

14. Manifest.json - background scripts
"scripts": ["background.js"],
"persistent": false },
background pages or
event pages

15. Code Structure <background.js> addListener(function(...){
if “catch”: CatchPage();
if “return”: HandleReturnPage();
});
var CatchPage = function(...){
sendMessage(tab.id,...); }
var HandleReturnPage = function(...){...}
<popup.js>
sendMessage(“catch”)
<content.js>
addListener(function(message,...){
create NewScript;
add “xxx.js”,“ooo.js” to NewScript
sendMessage({
“return”, NewScript })
});

16. Demo
Demo

17. designMode

18. designMode Default: off
It’s a property of document, but it can not be used in <div>
We should use <iframe>

19. execCommand
•OBJ.execCommand(command, value);

20. execCommand

21. execCommand execCommand(command, bool, value);
Command: backcolor, bold, fontsize, italic, underline…etc
Boolean flag for showing UI: “true” will cause error, always “false”
Value: what size? what color?(default:null)

22. contentEditable Firefox 3.5+, chrome 6+, IE 6+
<TAG contentEditable = "true"></TAG>
document.execCommand(args)
el.contetnEditable = 'true'

23. Q&A