非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

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

      2016/12/14

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

 

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

広告

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>
 

 

 

試してみる

main.jsが加わって、以下の通り全部で4つのファイルになりました。

 

これを、前回と同じ方法でChromeに組み込んでください。

 

実行させると以下の通り、タイトルとURLが表示されました。

 

 

ガジェット系ブログもよろしく

すまたすログ

ガジェット系ブログです。主にChromebookの情報やMyマシンのASUS Flip C434TAのレビューなどを書いています。その他IT機器のアプリのレビュー、たまに100円ショップなど。


スポンサーリンク

 - Chrome拡張機能開発, HTML/JavaScript