web-dev-qa-db-ja.com

Chrome extension-ウェブページからグローバル変数を取得する

Chromeの拡張機能に取り組んでいます。 「元の」Gmailメッセージ（現在表示されているメッセージ）のコンテンツを解析します。

私は次のようにjQuery.load（）を利用しようとしました

_$(windows).load(function() { alert(GLOBALS); });
_

コンテンツスクリプトに配置しますが、機能しません。 alert(GLOBALS);の呼び出しで次のエラーを返すChromeの開発者ツールを使用しています

キャッチされないReferenceError：GLOBALSは定義されていません

ただし、開発者ツールのコンソールを使用する場合、コンソールに入力するとGLOBALS配列が返されます。

コンテンツスクリプトからGLOBALSにアクセスする方法の手がかりはありますか？

javascripthtmldomgoogle-chrome-extension
42
Mr.

chrome拡張content_scriptとページ上のjavascriptとの間で通信するためのより現代的なソリューションは、html5 postMessage APIを使用することです。 "window"に送信されるメッセージは、 Webページと拡張機能のcontent_script。

拡張機能のcontent_script.js：

window.addEventListener('message', function(event) {
    console.log('content_script.js got message:', event);
    // check event.type and event.data
});

setTimeout(function () {
    console.log('cs sending message');
    window.postMessage({ type: 'content_script_type',
                         text: 'Hello from content_script.js!'},
                       '*' /* targetOrigin: any */ );
}, 1000);

Webページで実行されているJavaScript：

window.addEventListener('message', function(event) {
    console.log('page javascript got message:', event);
});

setTimeout(function() {
    console.log('page javascript sending message');
    window.postMessage({ type: 'page_js_type',
                         text: "Hello from the page's javascript!"},
                       '*' /* targetOrigin: any */);
}, 2000);

http://developer.chrome.com/extensions/content_scripts.html#Host-page-communication も参照してください

21
Alex

コンテンツスクリプトへの副作用なしで安全に通信するためのWebページ用の新しいAPIがあります（window.postMessageは他のリスナーを持つことができます！）。

「Webページから、runtime.sendMessageまたはruntime.connect APIを使用して、特定のアプリまたは拡張機能にメッセージを送信します」

// The ID of the extension we want to talk to.
var editorExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";

// Make a simple request:
chrome.runtime.sendMessage(editorExtensionId, {openUrlInEditor: url},
  function(response) {
    if (!response.success)
    handleError(url);
});

「アプリまたは拡張機能から、runtime.onMessageExternalまたはruntime.onConnectExternal APIを介してWebページからのメッセージを聞くことができます。これは、拡張機能を超えたメッセージングと同様です。Webページのみが接続を開始できます。[...]」

（ http://developer.chrome.com/extensions/messaging.html から）これはまだchromeのdevチャンネルでのみ利用可能ですが、次のバージョンかそこらにあるようです。

これがどのように機能するかを私に聞かないでください、それは非常に混乱しているようです。 chrome.runtimeはWebページでどのように定義されますか？スクリプトが何らかの理由でその変数を既に定義している場合はどうなりますか？また、この機能の開発の歴史を見るためのクロムバグレポートも見つかりませんでした。

3
kzahel

拡張機能のアクセス可能なhtmlページに基づいて、少し異なるアプローチがありました。

ページをマニフェストに追加します。

_"web_accessible_resources": ["variables.html"]_

ページ（ここでは、variables.html）を作成し、コンテンツのデータ（つまり、window.contentVar）を抽出します。

_<script type="text/javascript">
  $("#my-var-name").text(window["contentVar"]);
</script>
<div id="my-var-name" style="display: none;"></div>_

拡張機能のJavaScriptからアクセス：

var myVarName = $("#my-var-name").text();
0
Scott D. Strader

コンテンツスクリプトに追加します。

function executeOnPageSpace(code){

  // create a script tag
  var script = document.createElement('script')
  script.id = 'tmpScript'
  // place the code inside the script. later replace it with execution result.
  script.textContent = 
  'document.getElementById("tmpScript").textContent = JSON.stringify(' + code + ')'
  // attach the script to page
  document.documentElement.appendChild(script)
  // collect execution results
  let result = document.getElementById("tmpScript").textContent
  // remove script from page
  script.remove()
  return JSON.parse(result)

}

できるようになりました：

let window = executeOnPageSpace('window')

またはこのように：

executeOnPageSpace('window.location.href = "http://stackoverflow.com"')

注：実行時間の長いコードについてはテストしていません。

0
Naveen