はじめてのChrome extension

2011/10/29
BootCamp 2011
Toru Yoshikawa ( @yoshikawa_t )
#bc2011jp #chr1

{
"name": "Sample Extension",
"version": "0.1",
"browser_action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
}
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p { font-size: 32px; }
</style>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>

{
"name": "Sample Extension",
"version": "0.2",
"browser_action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
},
"background_page": "background.html",
"permissions": [
"notifications"
]
}

<script>
function setTimer(millisecond) {
setTimeout(notify, millisecond);
}

function notify(){
var popup = webkitNotifications.createNotification
('icon.png', ' ', 'Hello, World!');
popup.show();
}
</script>

:
<input type="number" value="3" min="1" step="1" id="second">
<input type="button" value=" " id="start">
<script>
var second = document.getElementById('second').value | 0,
button = document.getElementById('start');
button.addEventListener('click', function(){
// Background Page Window
var bg = chrome.extension.getBackgroundPage();
bg.setTimer(second * 1000);
}, false);
</script>

{
/* */
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["content_script.js"],
"run_at": "document_end"
}
]
}

var div = document.createElement('div');
div.textContent = 'Hello, World!';
div.style.cssText = 'position: absolute; top: 0; left:
0; font-size: 32px; color: red;';
document.body.appendChild(div);

はじめてのChrome extension

はじめてのChrome extension

Recommended

More Related Content

More from yoshikawa_t

More from yoshikawa_t(20)

はじめてのChrome extension