85

ページのタイトルに特定のテキストが含まれている場合、読み込まれたページに HTML コードを追加するにはどうすればよいですか?

Chrome 拡張機能は私にとって新しい基盤であり、あなたの助けをいただければ幸いです。

4

2 に答える 2

147

参考文献:

次のコードを参照して、HTML コードを追加できます。

manifest.json

このファイルは、拡張子にコンテンツ スクリプトを登録します。

{
"name":"Inject DOM",
"description":"http://stackoverflow.com/questions/14068879",
"version":"1",
"manifest_version":2,
"content_scripts": [
    {
      "matches": ["http://www.google.co.in/*","https://www.google.co.in/*"],
      "js": ["myscript.js"]
    }
  ]
}

myscript.js

Googleページにボタンを追加する簡単なスクリプト

// Checking page title
if (document.title.indexOf("Google") != -1) {
    //Creating Elements
    var btn = document.createElement("BUTTON")
    var t = document.createTextNode("CLICK ME");
    btn.appendChild(t);
    //Appending to DOM 
    document.body.appendChild(btn);
}

Output

目的のページに追加されたボタンが表示されます

ここに画像の説明を入力

于 2012-12-28T11:51:39.823 に答える
5

@Sudarshan の回答は、ページの特異性を説明しています。素晴らしいですが、追加されたコメントはどうですか? 既存のコンテンツを変更したり、ページにコンテンツを作成したりするためのより簡単で実用的な方法で、彼が逃したことを行う方法は次のとおりです。最も簡単な方法は次のとおりです。

変更

単品改造：

document.getElementById("Id").innerHtml = this.innerHtml + "<some code here>";

または属性を変更するには:

document.getElementById("Id").class = "classname";

//or ->

document.getElementById("Id").style.color = "#a1b2c3";

複数行のコードを追加するには、次のようにします。

document.getElementById("Id").innerHtml = this.innerHtml + `
 <some code here>                                                            <!-- Line 1 -->
 and we're on multiple lines!` + "variables can be inserted too!" + `        <!-- Line 2 -->
 <this code will be inserted directly **AS IS** into the DOM                 <!-- Line 3 -->
`
;
  • しかし、簡単な要素の挿入はどうでしょうか?

作成

大規模なコード インジェクション (しばらく前に行われたコーディング プロジェクトの例) insertAdjacentHtml APIを参照してください。

var bod = document.getElementsByTagName('body')[0];

bod.insertAdjacentHTML('afterbegin', `
    <div class="Boingy" id="Boingy">
        <div class="Boihead" id="BoiHead">
            <div class="deXBox" id="deXBox">
                <div class="Tr-Bl_Button" style="height: 25px;width: 2px;margin-left: 11.65px;background-color: gray;transform: rotate(45deg);-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);Z-index: 1;">
                    <div class="Tl-Br_Button" style="height: 25px;width: 2px;background-color: gray;transform: rotate(90deg);-ms-transform: rotate(90deg);-webkit-transform: rotate(90deg);Z-index: 2;">
                        </div>
                    </div>
                </div>
            </div>
            <embed id="IframeThingyA" src="` + "url" + `" type="text/html">
            </embed>
        </div>
    `);

参照:

于 2018-10-16T02:37:51.050 に答える