2011-02-08 117 views
0

我已经能够将数据从背景页面发送到内容脚本。但是这是使用sendrequest()完成的。我将需要来回发送数据,所以我试图找出从背景页面到内容脚本使用port.postmessage的正确语法。我已经多次阅读Messaging上的谷歌网页,我似乎不明白。我甚至直接从页面复制代码并进行测试,结果没有。我现在想要做的就是使用connect而不是sendrequest将数据从背景页面发送到内容脚本。来自内容脚本的回应将在稍后处理,因为代码与此响应一直是主要的问题。我只想一步一步理解这个过程,而不需要额外知道发送回应。如何使用port.postmessage将信息从背景页面发送到Google Chrome扩展的内容脚本

我不确定这是否违反了这个委员会的规则,但有人请给我一些代码来做到这一点(背景页面和内容脚本摘录,背景页面是发件人)的例子。

我已经多次在本网站上寻求帮助,只会被告知阅读文档或查看我已访问过的网站。

任何人都可以帮忙吗?

+0

请发布您迄今为止的代码以及清单。 – serg 2011-02-08 18:45:57

回答

2

如果您只是想从扩展到内容脚本的任何端口打开的例子,这是我能想到的最简单的。背景只是打开一个端口并发送“Hello标签!”通过端口,内容脚本每次点击网页时都会向后台发送消息。

我觉得这很简单,所以我不知道你为什么如此强调。只要确保内容选项卡在后台尝试连接时已经在监听(我等待直到“完成”事件)。

的manifest.json:

{ 
    "name": "TestExt", 
    "version": "0.1", 
    "background_page": "background.html", 
    "content_scripts": [{ 
    "matches": ["http://localhost/*"], // same as background.html regexp 
    "js": ["injected.js"] 
    }], 
    "permissions": [ 
    "tabs" // ability to inject js and listen to onUpdated 
    ] 
} 

background.html:

<script> 
var interestingTabs = {}; 
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) { 
    // same as manifest.json wildcard 
    if (changeInfo.url && /http:\/\/localhost(:\d+)?\/(.|$)/.test(changeInfo.url)) { 
    interestingTabs[tabId] = true; 
    } 
    if (changeInfo.status === 'complete' && interestingTabs[tabId]) { 
    delete interestingTabs[tabId]; 
    console.log('Trying to connect to tab ' + tabId); 
    var port = chrome.tabs.connect(tabId); 
    port.onMessage.addListener(function(m) { 
     console.log('received message from tab ' + tabId + ':'); 
     console.log(m); 
    }); 
    port.postMessage('Hello tab!'); 
    } 
}); 
</script> 

injection.js:

chrome.extension.onConnect.addListener(function(port) { 
    console.log('Connected to content script!'); 
    port.onMessage.addListener(function(m) { 
    console.log('Received message:'); 
    console.log(m); 
    }); 
    document.documentElement.addEventListener('click', function(e) { 
    port.postMessage('User clicked on a ' + e.target.tagName); 
    }, true); 
}); 
-1

详细的文档和容易在所示的(最基本)的例子documentation page

另外,在stackoverflow快速搜索将允许你看到很多类似的问题与详细的答案。

相关问题