web-dev-qa-db-ja.com

Chromeコンテンツスクリプトを使用して複雑なHTMLを追加する

Chrome拡張機能のコンテンツスクリプトを使用して、Webページに追加される複雑な表示を作成しています。

私は最初にそれをウェブサイトに直接統合してテストしましたが、今度はそれを拡張機能に入れる必要があります。

ChromeのコンテンツスクリプトAPIではJavaScriptの挿入のみが許可されています。つまり、複雑なHTMLレイアウトを挿入するには、完全にJSオブジェクトで記述する必要があります。これは書き込みに時間がかかります。 、メンテナンスが難しく、デザイナーフレンドリーではありません。

誰かがこれについてより良いワークフローを得るための賢い方法を知っているか、考えることができるかどうか疑問に思っています。

javascripthtmlgoogle-chromegoogle-chrome-extensioncontent-script
17
Malharhak

コンテンツスクリプトにiframeに挿入させることで、Webページ全体を追加するのは比較的簡単です。次のガイドラインに従ってください。

  1. *.htmまたは*.htmlファイルを拡張機能のソースフォルダーに配置します。

  2. HTMLが使用する*.cssファイルと*.jsファイルも拡張フォルダーに配置します。

  3. HTMLファイルをリソースとして宣言します。例えば：

    "web_accessible_resources": ["Embedded_Hello_world.htm"]


  4. HTMLファイルでinlineまたは外部サーバーのjavascriptを使用しないでください。これにより、 コンテンツセキュリティポリシー（CSP） の問題が回避されます。

  5. この質問は、ページ/ iframeとの通信については説明していませんが、それを実行したい場合は、もう少し複雑になります。 SOでここを検索してください。それは何度も取り上げられてきました。


例：

これは、次の方法で実際に動作していることがわかります。

  1. 新しい拡張フォルダを作成します。
  2. jQuery をダウンロードします。
  3. 以下のように5つのファイルを作成します。
  4. 解凍された拡張機能をロードします（同様の手順は この回答 で確認できます）。
  5. このページをChromeにリロードします。上部に埋め込まれた「HelloWorld」ページが表示されます。

拡張フォルダに次のファイルを作成します。

manifest.json：

{
    "manifest_version":         2,
    "content_scripts":          [ {
        "js":       [ "iframeInjector.js" ],
        "matches":  [   "https://stackoverflow.com/questions/*"
        ]
    } ],
    "description":              "Inject a complete, premade web page",
    "name":                     "Inject whole web page",
    "version":                  "1",
    "web_accessible_resources": ["Embedded_Hello_world.htm"]
}


iframeInjector.js：

var iFrame  = document.createElement ("iframe");
iFrame.src  = chrome.extension.getURL ("Embedded_Hello_world.htm");

document.body.insertBefore (iFrame, document.body.firstChild);


Embedded_Hello_world.htm：

<!DOCTYPE html>
<html><head>
    <title>Embedded Hello World</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <link href="HelloWorld.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="HelloWorld.js"></script>
</head><body>
<p>Hello World!</p>
</body></html>


HelloWorld.css：

body {
    color:              red;
    background-color:   lightgreen;
}


HelloWorld.js：

$(document).ready (jQueryMain);

function jQueryMain () {
    $("body").append ('<p>Added by jQuery</p>');
}
33
Brock Adams

これは、外部ライブラリやiframeがない方がよい場合があります。 iautomationソリューションとほぼ同じです。

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var div = document.createElement('div');
        div.innerHTML = this.responseText;
        document.body.insertBefore(div, document.body.firstChild);
    } else {
        console.log('files not found');
    }
};
xhttp.open("GET", chrome.extension.getURL("/content.htm"), true);
xhttp.send();
2
Photonic

私の拡張機能が スクリプトテンプレート に大きく依存しているという同じ問題がありました

これが私がしたことです：

  • 作成templates.htmlスクリプトテンプレートを保存する
  • 追加 templates.htmlからweb_accessible_resources上記の答えのように^^
  • アクセスtemplates.html from content.js xhrを使用し、jQueryを使用して解析します

マニフェスト.json

"web_accessible_resources": ["templates.html"]

templates.html

<script id="template1" type="text/template">
    <div class="template1">template1</div>
</script>
<script id="template2" type="text/template">
    <div class="template2">template2</div>
</script>

content.js

function getTemplates(){
    return new Promise(function(resolve){
        $.ajax({
            url: chrome.extension.getURL('/templates.html'),
            success: function(data) {
                var $templates = $('<div></div>').append($.parseHTML(data)).find('script'),
                    templates = {};
                $templates.each(function(){
                    templates[this.id] = this.innerHTML;
                });
                return resolve(templates);
            }
        });
    });
}
getTemplates().then(function(templates){
    console.log(templates.template1); //<div class="template1">template1</div>
});
1
iautomation