javascript - JavaScriptでページのHTMLソースを取得して上書きする

Question

Javascript を使用してブラウザの拡張機能を作成しています。HTML ソースコード全体を取得して書き直すにはどうすればよいですか?

そのソース内のいくつかの単語を変更して、そのページを再度開く必要があります。

Answer 1

JavaScriptでは、次のようなものを試すことができます：

var source = document.documentElement.outerHTML;

...そしてDoctypeの使用を取得するには:

var doctype = document.doctype;

source: JavaScript/JQuery でドキュメント全体の html を取得する

これが役立つ場合、Chrome拡張機能で同じことを行うことに関する次の投稿も見つけました。

Chrome 拡張機能から現在のページのソース HTML を取得する

Answer 2

ページ全体のソースは次の方法で取得できます。

oldSource = document.getElementsByTagName("html")[0].innerHTML;

次に、ページ全体を次のように置き換えます。

document.write(newSource);

または、ページ上のいくつかの要素を置き換える場合は、次のいずれかを使用します。

1. 要素の がわかっている場合id:

   oldText = document.getElementById("idOfElement").innerHTML;
   document.getElementById("idOfElement").innerHTML = newText;
   

2. 要素の がわかっている場合class:

   oldText = document.getElementsByTagName("classOfElement")[0].innerHTML;
   document.getElementsByTagName("classOfElement")[0].innerHTML = newText;
   

   (ここ0で、ページ上で特定のクラス名を持つ最初の要素を探していることを意味します)

3. 要素のタグ名がわかっている場合:

   oldText = document.getElementsByClassName("tagName")[0].innerHTML;
   document.getElementsByClassName("tagName")[0].innerHTML = newText;
   

   (ここ0で、ページ上の特定のタグ名を持つ最初の要素を探していることを意味します)

4. または、 jQuery セレクターを使用できます。次に例を示します。

   oldText = $("#idOfElement").html();
   oldText = $(".classOfElement").html();
   oldText = $("tagName:nth-child(1)").html();
   
   $("#idOfElement").html(newText);
   $(".classOfElement").html(newText);
   $("tagName:nth-child(1)").html(newText);
   

   where:nth-child(1)は、ページ上で特定のタグ名を持つ最初の要素を探していることを意味します。同じクラス名の要素が複数ある場合、クラスを検索するときにも使用できます。