Google chrome

Google Chrome拡張したくない？
したいですよね？しましょう？
＼創英角ポップ体／

まさか
Internet Explorer
を使っているなんて

manifest.json {
"manifest_version":2,
"name":"APP1",
"version":"1.0.0",
"description":"テストアプリ",
"browser_action": {
"default_title":"",
"default_popup":"popup.html"
},
"permissions":["tabs"]
}
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<tite>テスト１</tite>
<script src="script.js"></script>
</head>
<body>
<p>HELLO WORLD</p>
</body>
</html>
popup.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<tite>テスト１</tite>
<script src="script.js"></script>
</head>
<body>
- <p>HELLO WORLD</p>
+ <div id="app">
+ </div>
</body>
</html>
popup.html

Script.js
document.addEventListener("DOMContentLoaded", function () {
chrome.tabs.getSelected(null, function (tab) {
document.getElementById("app").innerHTML = tab.title;
})
});

<body>
<div id="app">
+ <button id="lunch">Twitterを開く</button>
</div>
</body>
popup.html

Script.js
document.addEventListener("DOMContentLoaded", function () {
- chrome.tabs.getSelected(null, function (tab) {
- document.getElementById("app").innerHTML = tab.title;
- })
+ document.getElementById("lunch").addEventListener("click", function () {
+ chrome.windows.create({
+ "url": "https://twitter.com/",
+ "type": "popup",
+ "width": 1280,
+ "height": 720
+ });
+ });
});

・まとめ
1.Chrome拡張は最初にmanifest.jsonをつくろう！
2.あとは頑張ってJavascript書こう！Vue.jsもつかえるよ！
3.最後に便利な機能をくれるchrome.*apiも使ってあげると楽しいよ！

Google chrome

Recommandé

Recommandé

Contenu connexe

Similaire à Google chrome

Similaire à Google chrome (20)

Google chrome