24

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

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

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

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

4

3 に答える 3

3

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

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

  • templates.htmlスクリプト テンプレートを格納するための作成
  • 上記の回答のように追加templates.htmlしてください^^web_accessible_resources
  • xhrでアクセスtemplates.htmlしてjQueryでパースするcontent.js

マニフェスト.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>
});
于 2016-05-10T00:01:27.340 に答える