Chrome Extension Note

https://developer.chrome.com/extensions
https://developer.chrome.com/extensions/api_index

注意

http://stackoverflow.com/questions/13591983/onclick-within-chrome-extension-not-working
Chrome Extension ではインライン JavaScript が書けない。なので onclick などの代わりに

document.getElementById("jump").addEventListener("click", hoge);

などで hoge() 関数を呼ぶようにする。

サンプル

ページの 内の HTML を出力する拡張機能

manifest.json

{
  "manifest_version": 2,
  "name": "Sample Extension",
  "version": "0.0.1",
  "browser_action": {
    "default_title": "",
    "default_icon": "icon_19.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "notifications", "tabs", "https://*/*", "http://*/*"]
}

popup.html

<link rel="stylesheet" type="text/css" href="popup.css">
<script type="text/javascript" src="popup.js"></script>
<p id="message">test</p>

popup.css

p {color: blue;}

popup.js

chrome.tabs.query({
  "currentWindow": true,
  "status": "complete",
  "active": true
}, function(ar) {
   chrome.tabs.executeScript(null, {file: "getPageSource.js"});
});

chrome.runtime.onMessage.addListener(function(html) {
  html = html.replace(/</g, "&lt;")
  document.getElementById('message').innerHTML = html;
});

getPageSource.js

var html = document.getElementsByTagName('body');
html = html[0].innerHTML;
chrome.runtime.sendMessage(html);