chrome拡張機能 見ているページ任意の場所に画像を表示したい

Question

chromeの拡張機能を作ってみようと思っており
現在見ているページの上部でも下部でもどこでもいいので画像やテキストを挿入したいと思っています。

現状開いているtabのURLは取得できるのですがhtmlの取得の方法がわからないです。

普通に$("").html()で取得もできません。

1. まず自分の考えていることが実現できるのかどうか

2. 簡単なhtmlの取得と見ているページへの挿入について教えていただきたいです。

jquery2.1.4を使用しています。
よろしくお願いします。

Answer 1

Content Script(manifest.jsonでcontent_scripts指定したスクリプト)内にコードを記述することで実現できます

htmlソースの取得はDOM構築後にdocument.documentElement.outerHTMLで取得できます。
(どうしてもjQuery使うのであれば$("html")[0].outerHTMLですかね)

挿入例はYuyaKoshimizuさんが提示されているので省略させていただきます。

Answer 2

jQueryを使っているのであれば、htmlを取得するのは簡単です。

$("body").html();

これでhtmlが取得できます。
単純に画面下部に画像を表示させたいのであれば、

$(function(){
  $("body").append("<img src='hoge.jpg' class='hoge' alt=''");
  $("img.hoge").css({
    "position":"fixed",
    "bottom":"0",
    "left":"0",
    "right":"0",
    "margin":"auto",
  });
});

こうすればhoge.jpgが画面下に固定されます。
あとはこれをjsファイルに書き出してmanifest.jsonに記述すればいいと思います。
（実際に試してはいないので不具合があればまたお願いいたします。）