バックグラウンドページにメッセージを送信し、htmlを更新してからタブに表示します

ユーザーが情報を入力してレポートを生成するChrome拡張機能があります。もちろん、このレポートはユーザーが入力した内容に基づいて毎回異なります。バックグラウンドページにメッセージを送信し、htmlを更新してからタブに表示します

をねえ、氏の背景ページを：私が達成したい何

は、言って私の拡張用です。ここに必要な情報があります。ここでは、私があなたに与えたものに基づいていくつかのHTMLを構築し、それをユーザーに示します。ここで

私が使用しているmanifest.json次のとおりです。ここで

{ 
    "manifest_version": 2, 

    "name": "XXXX", 
    "description": "XXXX", 
    "version": "1.0.0", 
    "permissions": ["storage", "tabs"], 
    "options_page": "settings.html", 

    "background": 
    { 
    "page": "background.html" 
    }, 

    "content_scripts": 
    [ 
    { 
     "matches": ["<all_urls>"], 
     "js": ["js/jquery-3.1.1.min.js", "js/bootstrap.min.js", "js/main.js", "js/background.js"], 
     "css": ["css/bootstrap.min.css", "css/font-awesome.min.css"] 
    } 
    ], 

    "browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    }, 
    "icons": { "128": "logo.png" } 
}

とき私background.html

<html> 
<body> 
    <script src="js/jquery-3.1.1.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="js/background.js"></script> 
</body> 
</html>

そして、ここでは、今私のbackground.js

$(document).ready(function() { 
    chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) { 
     $("body").html(msg.message); 
     console.log("Message from: " + msg.message); 
    }); 
});

ですユーザークリニック私の延長線上KSボタン、私がメッセージを送信するには、次のコードを使用します。今、私が起こることを期待したもの

$("#generate").click(function() { 
    chrome.tabs.create({url: 'background.html'}); 
    chrome.runtime.sendMessage({ 
     message: "Sample message." 
    }); 
});

を開き、どのようなメッセージに基づいてページ変更の体を持っている私のbackground.htmlページのためでした送信されましたが、これは動作しません。

アイデア？

出典

2016-10-21 ThePerplexedOne

は、同じページを背景に使用して何かを表示しようとすると、大きな概念的な間違いを作成しています。これは予測できない動作につながります。

あなたは本質的にbackground.htmlというタブを開き、何とか「同じ」バックグラウンドページであると考えています。そのようには動作しません - 同じ文書の新しいインスタンスを開いています。同じWebフォームを2つのタブで開くことを考えてみましょう。フィールドに入力されたテキストを鏡映するとは思わないでしょう。

これに加えて、ポップアップページのオープニングタブとのやりとりに関して、多くの間違いが積み重なっています。だから、

、行動計画：あなたは本当に（恒久的に目に見えない）背景ページで実行するコードの一部のために必要がある場合は

、慣用的にbackground.jsを、それを呼び出すとscriptsスタイルの背景ページに切り替え定義：
```
"background": { 
    "scripts": ["background.js"] 
} 
```
また、Event pagesを使用することを検討してください。レポート-示すために使用どのような
あなたの正気のためにbackground呼び出されませ必要があります。名前をreport.html/report.jsに変更します。
あなたのポップアップコードでは、間違い＃1はタイミングです。あなたはあなたのメッセージを聞いてはいけないページを開きますが、それが聞く準備ができるまで待つことはありません。ページが実際に開いて準備ができていることを確認したい場合は、tabs.createのコールバックを使用する必要があります。
```
chrome.tabs.create({url: "report.html"}, function(tab) { 
    // Okay, now it's ready, right? Right?.. 
    chrome.runtime.sendMessage(/*...*/); 
}); 
```
しかし、は、デフォルトで新しいタブを開いているので、問題が解決しないなることを行うと、すぐにポップアップが閉じるように強制し、（あなたが望む何か、おそらくです）、それを焦点を当てています。タブがフォーカスされるとすぐにそれを防ぐためにできることは何もありません。しかし、それはあなたのメッセージが送信されないことを意味します。ポップアップは起こる前に破壊されます。

メッセージングには依存しないでください。おそらく、あなたのレポートがストレージに基づいているデータであれば、storeとすることができます。したがって、を最初にに設定してから、レポートページを開き、データを読み込んでレポートを作成します。
```
// Popup 
chrome.storage.local.set({foo: bar}, function() { 
    // Storage is updated, it's showtime! 
    chrome.tabs.create({url: "report.html"}); 
    // And now, we die, inevitably. Goodbye, cruel world. 
}); 

// Report 
chrome.storage.local.get("foo", function(data) { 
    // Oh, what joy is to have data.foo in here! 
}); 
```

出典

2016-10-21 10:23:50 Xan

実は、 'background.js'はもともとtest.js''と呼ばれていた、私はこのスレッドのためにその名前を変更するのを忘れました。いずれにせよ、この情報をありがとう！ – ThePerplexedOne

また、 'chrome.storage.local'は、このデータが' chrome.storage.sync'とは違って後で破壊されることを意味しますか？ – ThePerplexedOne

いいえ、ログインしているGoogleアカウントを使用して複製するのではなく、あなたのマシンに残っていることを意味します。 – Xan

バックグラウンドページにメッセージを送信し、htmlを更新してからタブに表示します

答えて

関連する問題