Chrome拡張のサンプル(ページ内容のテキストを取得)

2016/10/11 2017/3/1 Chrome

最後に読み込んだページの内容をテキスト(bodyのouterText)で取得し、ポップアップで表示するだけのサンプル。全然エレガントじゃないけど、こんなのでいいのか。

manifest.json{
  "manifest_version": 2,
  "name": "View Text",
  "version": "0.0.1",
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }],
  "browser_action": {
    "default_popup": "popup.html"
  }
}

background.jsvar textContents = '';

chrome.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
        textContents = request.value;
    }
);

content.jschrome.runtime.sendMessage({
    value: document.getElementsByTagName('body')[0].outerText
});

popup.html<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
  <body style="min-width:300px">
  <div id="textView"></div>
  <script src="popup.js"></script>
</body>
</html>

popup.jsvar textContents = chrome.extension.getBackgroundPage().textContents;
var div = document.getElementById('textView');
div.textContent = textContents;