2017-12-23 8 views
2

私は内線番号を書いていますが、問題が発生しました。内線番号をcontent.jsに送信できません。私はいくつかの直感を持っている拡張メニューで、ボタンを記入してクリックした後、その値を書き留めて、でこのデータが使用されるcontent.jsに送信したいと思います。何らかの理由で、送信されません。私はすべてを見ることができるように背景内線番号jsと背景jsファイルの "通信"

chrome.extension.onMessage.addListener(function(request){ 
    if(request=='hello'){ 
     console.log('1. Принято: ', request); 
    } 
}); 

からデータを取得し、:ここ

document.getElementById('btn').onclick = function() { 
 
    var first = document.getElementById('first').value; 
 
    var second = document.getElementById('second').value; 
 
    //send in content 
 
    chrome.extension.sendMessage('hello'); 
 
}
<head> 
 
    <script type="text/javascript" src="content.js"></script> 
 
    <script type="text/javascript" src="background.js"></script> 
 
</head> 
 
<input type="text" id="first"> 
 
<input type="text" id="second"> 
 
<input type="button" id="btn" value="send">

manifest.json(多分間違った何かがあります)

{ 

"manifest_version": 2, 
"version": "1.3", 
"description": "name", 
"browser_action":{ 
    "default_popup": "content/popup.html" 
}, 
    "background": { 
    "persistent": false, 
     "scripts": ["content/background.js"] 
     }, 
     "content_scripts": [ 
      { 
      "matches": [ "https://google.com/*" ], 
      "js": ["content/content.js"], 
      "css": ["content/qq.css"], 
      "run_at": "document_end" 
     } 
    ] 
} 

content.jsですは、拡張メニューのjsを担当するファイルです。 content.jsは、サイトのDOMを変更する責任を負うファイルです。

答えて

1

クロム/ブラウザオブジェクトのruntimeプロパティを探していると思います。

これにより、extensionプロパティを使用せずにメッセージを送信するコマンドchrome.runtime.sendMessageが作成されます。

同様に、onメッセージイベントはchrome.runtime.onMessageになります。

私は、次のドキュメントからこの情報を引っ張っています:https://developer.chrome.com/apps/messaging

+0

できますか? –

+0

Mozillaのサイトには良い例がいくつかあります:https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/runtime/sendMessage –

1

あなたのファイル構造は不明である:popup.htmlの内容は何ですか? content.jsbackground.jsの両方を同じページに読み込むのはなぜですか?ここで

は私があなたが達成しようと考えるものない例です。

それはこのように動作します:

ポップアップ画面を埋めるために、ユーザーのためのinput秒を表示します。 ボタンを押すと、入力の値がバックグラウンドスクリプトに送信され、バックグラウンドスクリプトがコンテンツスクリプトに送信します。コンテンツスクリプトは、ホストWebページの入力を埋めるなど、必要な方法でこれらの値を使用します。

manifest.jsonを

{ 

"manifest_version": 2, 
"version": "1.3", 
"description": "name", 
"browser_action":{ 
    "default_popup": "content/popup.html" 
}, 
"background": { 
    "persistent": true, 
    "scripts": ["content/background.js"] 
}, 
"content_scripts": [ 
    { 
     "matches": [ "https://google.com/*" ], 
     "js": ["content/content.js"], 
     "css": ["content/qq.css"], 
     "run_at": "document_end" 
    } 
] 
} 

background.js

var contentTabId; 

chrome.runtime.onMessage.addListener(function(msg,sender) { 
    if (msg.from == "content") { //get content scripts tab id 
    contentTabId = sender.tab.id; 
    } 
    if (msg.from == "popup" && contentTabId) { //got message from popup 
    chrome.tabs.sendMessage(contentTabId, { //send it to content script 
     from: "background", 
     first: msg.first, 
     second: msg.second 
    }); 
    } 
}); 

content.js

chrome.runtime.sendMessage({from:"content"}); //first, tell the background page that this is the tab that wants to receive the messages. 

chrome.runtime.onMessage.addListener(function(msg) { 
    if (msg.from == "background") { 
    var first = msg.first; 
    var second = msg.second; 
    //here you use the values as you wish, for example: 
    //document.getElementById("anInput").value = first; 
    } 
}); 

ポップアップ。HTML

<html> 
    <body> 
    <input type="text" id="first"> 
    <input type="text" id="second"> 
    <button id="send">Send</button> 
    <script src="popup.js"></script> 
    </body> 
</html> 

popup.js(このファイルはpopup.htmlと同じディレクトリに配置する必要があります)

document.getElementById("send").onclick = function() { 
    chrome.runtime.sendMessage({ //send a message to the background script 
    from: "popup", 
    first: document.getElementById("first").value, 
    second: document.getElementById("second").value 
    }); 
} 

私はそれが役に立てば幸い。

0

content.jsは、popup.htmlに含めないでください。 content.jsは、サイトがmanifest.jsonのパターンと一致するたびに実行されます。現在、お客様の内線番号を使用してgoogle.comを訪問するたびに、content.jsスクリプトはgoogle.comのバックグラウンドで実行されます。

background.jsもポップアップに読み込まないでください。それは常にブラウザのバックグラウンドで実行されるスクリプトです。何かによって読み込まれるべきものではありません。これは、オムニバスの動作を変更するコードのようなものを追加する場所です。

popup.htmlに含まれる新しいpopup.jsスクリプトを作成し、実際のポップアップウィンドウのonloadやonclickイベントのみを処理する必要があります。

content.js,background.jsと作成するファイルpopup.jsは、それぞれ異なるジョブを持ち、お互いに通信してはいけません。それには必要性も可能性もありません。たとえば、あなたのパターンに合った各サイトで実行されているcontent.jsに他のサイトの内容を入れて、その中のすべての処理を行います。

background.js =ブラウザ内に拡張機能を設定するコードです。これは、オムニバスの動作を変更するようなものです。

content.js =特定のパターンに一致する各ウェブサイトで実行されるコード。

popup.js =ユーザーがあなたの内線のポップアップウィンドウを開いたときに実行されるコード。

コミュニケーションを持たないので、そうではありません。まったく異なる機能を満たします。

これらの間で通信する必要がある理由はありません。必要なシナリオを説明し、必要がない理由を説明してください。 :)

+0

大丈夫、見てください:私の 'popup.html'で私はいくつかの入力がありますボタンを押します。入力にsmthを入力し、ボタンの値をクリックするとgoogle.comのDOM要素の値になるはずです –

+1

[Chrome拡張アーキテクチャのドキュメント](https://developer.chrome.com/extensions/overview#arch)には拡張機能のさまざまな要素間で通信する方法としてのメッセージング。その目的のために 'chrome.runtime.sendMessage'や' chrome.runtime.onMessage'のようなAPIメソッドがあります。ポップアップページからコンテンツスクリプトに通信する最も良い方法は、メッセージングによるものです。 –

関連する問題