Chrome拡張機能から外部ウェブページにメッセージを送信

Question

クロム拡張機能を作成して、すべてのユーザーがスクロールしているデータ（ピクセル数のタイムスタンプ）を正常に記録しました。このデータは現在コンソールにログインしています。

私の次のステップは、私に少し問題を引き起こしています。

作成したすべてのログを外部のWebページに送信して表示する必要があります。つまり、ページは自動的に更新され、タイムスタンプされたエントリ/ピクセルカウンタのすべての拡張レコードがアーカイブされます。

私は、DOMイベントを通して単純なメッセージを渡すことで、拡張機能とウェブページの間で通信することができました。しかし、私はそれが収集しているスクロールデータを送信する拡張機能を取得するのに問題があります。

私は近くにいるように感じています。私はGoogleのメッセージングAPIを読んだことがありますが、少し迷っています。

はここで、これまでに私のコードです：

manifest.jsonを

{ 
"manifest_version": 2, 
"name": "Caressing the Silver Rectangle", 
"description": "Measures Jesse Bowling's distance scrolled in pixels on Google Chrome", 
"version": "1.1", 

"content_scripts": [ 
    { 
     "matches": [ 
      "<all_urls>" 
     ], 
     "js": [ 
      "scroller.js" 
     ], 
     "run_at": "document_start" 
    } 
], 

"background": { 
    "scripts": ["background.js"] 
}, 

"externally_connectable": { 
    "matches": ["http://*/*jessebowling.space/caressingthesilverrectangle/*"] 
}, 

"browser_action": { 
    "default_icon":"icon.png", 
    "default_title": "Caressing the Silver Rectangle", 
    "default_popup": "popup.html" 
}, 
"permissions": [ 
    "activeTab", 
    "<all_urls>", 
    "background", 
    "tabs", 
    "storage" 
] 
} 

Background.js

chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) { 
    console.log("background.js got a message") 
    console.log(request); 
    console.log(sender); 
    sendResponse("bar"); 
} 
); 

Scroller.js

/*jslint devel: true */ 

// The ID of the extension we want to talk to. 
var caressingthesilverrectangleId = 
"http://*/*jessebowling.space/caressingthesilverrectangle/*" 
var totalScroll; 
var lastKnownScrollPos = 0; 

window.addEventListener("scroll", function() { 
"use strict"; 
console.log(lastKnownScrollPos); 
totalScroll += Math.abs(window.scrollY - lastKnownScrollPos); 
lastKnownScrollPos = window.scrollY; 
chrome.storage.sync({ scroll: totalScroll }); 
function (response) { 
    console.log(response); 
} 
}); 


// send data through a DOM event 
document.dispatchEvent(new CustomEvent('csEvent', {detail: 
totalScroll})); 


// Make a simple request: 
chrome.runtime.sendMessage(caressingthesilverrectangleId, 
{getTargetData: true}, 
function(response) { 
if (targetInRange(response.targetData)) 
    chrome.runtime.sendMessage(caressingthesilverrectangleId, 
{activateLasers: true}); 
}); 

// Start a long-running conversation: 
var port = chrome.runtime.connect(caressingthesilverrectangleId); 
port.postMessage(chrome.storage.sync({ scroll: totalScroll })); 

Answer 1

私はあなたがメッセージを送信しようとしているところ

var port = chrome.runtime.connect(caressingthesilverrectangleId); 
port.postMessage(chrome.storage.sync({ 
    scroll: totalScroll 
})); 

が行う部分を推測しています。ただし、送信するメッセージはchrome.storage.syncの結果で、常にundefinedです。これらの2つの呼び出しを分割して、実際にデータを送信することができます。

var port = chrome.runtime.connect(caressingthesilverrectangleId);   
chrome.storage.sync({ 
    scroll: totalScroll 
}); 
port.postMessage({ 
    scroll: totalScroll 
});