2016-03-21 15 views
11

私が開発したクロムエクステンションは、コンテンツスクリプトを使用する典型的な方法ではなく、HTMLインポートを介してホストページに注入します。 isolated world"孤立した世界"(クロム)でjavascriptを実行

この背後にある理由は2つのことに関係しています:

  1. Chromeの拡張機能は、Chrome拡張機能マニフェストはJavaScriptのみ
  2. 、隔離された環境で実行されているHTMLの輸入をサポートしていません content scripts
  3. からカスタム要素を登録することはできません

これらの制限のため、ホストページの<head>にコンポーネントをロードする必要がありました。described hereです。

私が直面している明らかな問題は、自分の依存関係を注入するための方法が「孤立した世界」で実行されないため、JavaScriptがホストページのjavascriptと衝突することです。

これまで私は、GPUのタスク名をPolymer &の名前に変更して競合を回避することで、これらの問題のほとんどを解決しましたが、残念ながら完全ではなく、より堅牢なアプローチが必要です。

最後に私の質問に:私のjavascriptのための "孤立した世界"を作成することは可能ですか?おそらく別のドキュメントオブジェクトですか?そうでない場合は、自分のコードを孤立して実行するための戦略はありますか?

更新:

あなたのいくつかは、私がこれまで使ってきたものです生命維持を使用して提案しました。私は孤立した世界のラインに沿った答えを探しています。これは、Google Chromeが拡張機能をどのように実行するかと同様です。これは主にPolymerがグローバルウィンドウオブジェクトにアタッチされる必要があるためです。

+0

これは矛盾しますか?変数名/関数の競合やより複雑なものか? – juvian

+0

変数/関数名の競合。ホストページが独自のバージョンのPolymerを使用する場合は特に当てはまります。 –

+0

あなたはページ上のポリマーを使用できませんか?それが既に存在するかどうかをチェックし、あなたに注射していない場合はチェックします。 – juvian

答えて

7

a closureでスコープ変数(関数はJavaScriptのファーストクラスのオブジェクトなので)をスコープできます。

ですから、生命維持と、次のコードを挿入する場合 - あなたはそれがsomeVarリターンへのアクセスに異なる値が表示されます

var someVar = 'this one "conflicts" with page js'; 
(function(){ 
    var someVar = 'this one does not "conflict" with page js'; //shadows someVar above 
    console.log(someVar); 
})(); 
console.log(someVar); 

- すぐに関数式を呼び出しました。

注入されたコードの一部として、Polymerのように "矛盾する"変数を影にすることができます。

CommonJS require()のようなものを使用してIIFE内の目的のバージョンをインポートし、親スコープから他のものへのアクセスを続けます。定義さのために

4

が広く生命維持のJavaScript「閉鎖」のためのデザインパターンであるとして知られている

孤立スコープ。そのことについては

孤立世界

または「単離さ世界」ダイポール、質問の著者、同じ環境で実行するが、お互いのことは知らないjavascriptのアプリケーションによって記載されているようです。

可能性のある回答

この質問はすでにhereに答えてきた私の。

私の提案

「単離された世界は、」JavaScriptで「」ではない、あるいは少なくともそれが最近までなかったし、可能な解決策を提供するの精神で見ている間Dynamic Script Loading

スクリプトを「隔離スコープ」に動的にロードしておらず、そのスコープ内で機能を使用している場合でも、競合が発生します。何が価値があるために

0

、アイフレームはかなり孤立している:)

代わりのホストページ<head>に直接ポリマーを添加すること、ホストページにを作成してみてください、内側文書にポリマーや他のWebコンポーネントを追加します。

コンテンツを動的に作成することも、拡張子のHTMLファイルを参照することもできます(確かにSOPが進行中である可能性があります)。

(iframeを透明にして、どこにでもオーバーレイすることができます)。

これはうまくいきます/助けてください。

+0

提案していただきありがとうございますが、残念ながらiframeは私にとって実行可能な選択肢ではありません。この拡張機能には、スタンドアロンにできる単一のコンポーネントではなく、ページ内の要素とやり取りする必要のあるさまざまなコンポーネントが多数含まれています。 –

0

ただの提案:サービスワーカーを試すことができます。別のスレッドでjavascriptを実行し、そこに独自のライブラリを使用します。

関連する問題