Chrome拡張機能の開発：現在のページ情報をGETする

2016/12/11 2016/12/14

前回はChromeの拡張機能開発にあたって基本的な手順を紹介しました。

Webサイトのブックマークに「Google BookMarks」のChrome拡張アプリを利用しているのですが、なぜか対応するアプリ数が大幅減ってしまい使いにくいものばかりになっていることと、Googleアカウントを切り替えるたびに同じBookMarksが使えないという実用上の問題があり、Chrome拡張機能でオリジナルアプリを作ろうと思った次第です。今回は拡張機能開発にあたっての、基本的な手順を書きました。ローカルでプログラムを用意し、Chromeの拡張機能に組み込むまでの簡単な手順です。完成イメージ今回作るプログラムの完成イメージは以下の...

Googleブックマークのようなものを作ることが目的なのですが、現在開いているページのタイトルとURL情報を取得する必要があります。

[ad#top-1]

1 manifest.json
2 main.js
3 popup.html
4 試してみる

manifest.json

manifest.jsonは以下の通りです。前回と違うところは、7行目の “permissions”: [“tabs”], の部分。これを入れることでページ情報をGETできるようになります。

main.js

ページ情報をGETするにはChromeのライブラリを使う必要があります。コードは下記のとおりです。（ページのロードイベント時）このコードをmain.jsというファイル名で保存しておきます。


window.onload = function() {
chrome.tabs.getSelected(null, function(tab) {
document.getElementById('title').innerHTML = tab.title;
document.getElementById('url').innerHTML = tab.url;
});
};

注意すべき点として、HTML内にJavascriptを埋め込むとChrome側に拒否されます。解決先はそんなに難しくありません。jsファイルに外出しすればOK。

popup.html

本体のpopup.htmlは以下の通りとしました。main.jsからのデータをキャッチするために、title属性, url属性を持つdiv要素が必要になります。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="main.js"></script>
</head>
<body style="min-width:250px">
<div id="title"></div>
<div id="url"></div>
</body>
</html>