网页是能够调用后台页面的功能之前,需要以下亟待解决的问题:
- 能够使用
hello();
从网页。这是通过使用内容脚本定义hello
的脚本injecting完成的。注入函数使用自定义事件或postMessage
与内容脚本进行通信。
- 内容脚本需要与背景进行通信。这是通过
chrome.runtime.sendMessage
实现的。
如果网页需要得到回复,以及:
- 发送从背景页的答复(
sendMessage
/onMessage
,见下文)。
- 在内容脚本中,创建自定义事件或使用
postMessage
向网页发送消息。
- 在网页中处理此消息。
所有这些方法都是异步的,必须通过回调函数来实现。
这些步骤需要仔细设计。这是一个实现上述所有步骤的通用实现。您需要了解的实现:
- 在要注入代码中,每当需要联系内容脚本时,请使用
sendMessage
方法。
用法:sendMessage(<mixed message> [, <function callback>])
contentscript.js
// Random unique name, to be used to minimize conflicts:
var EVENT_FROM_PAGE = '__rw_chrome_ext_' + new Date().getTime();
var EVENT_REPLY = '__rw_chrome_ext_reply_' + new Date().getTime();
var s = document.createElement('script');
s.textContent = '(' + function(send_event_name, reply_event_name) {
// NOTE: This function is serialized and runs in the page's context
// Begin of the page's functionality
window.hello = function(string) {
sendMessage({
type: 'sayhello',
data: string
}, function(response) {
alert('Background said: ' + response);
});
};
// End of your logic, begin of messaging implementation:
function sendMessage(message, callback) {
var transporter = document.createElement('dummy');
// Handles reply:
transporter.addEventListener(reply_event_name, function(event) {
var result = this.getAttribute('result');
if (this.parentNode) this.parentNode.removeChild(this);
// After having cleaned up, send callback if needed:
if (typeof callback == 'function') {
result = JSON.parse(result);
callback(result);
}
});
// Functionality to notify content script
var event = document.createEvent('Events');
event.initEvent(send_event_name, true, false);
transporter.setAttribute('data', JSON.stringify(message));
(document.body||document.documentElement).appendChild(transporter);
transporter.dispatchEvent(event);
}
} + ')(' + JSON.stringify(/*string*/EVENT_FROM_PAGE) + ', ' +
JSON.stringify(/*string*/EVENT_REPLY) + ');';
document.documentElement.appendChild(s);
s.parentNode.removeChild(s);
// Handle messages from/to page:
document.addEventListener(EVENT_FROM_PAGE, function(e) {
var transporter = e.target;
if (transporter) {
var request = JSON.parse(transporter.getAttribute('data'));
// Example of handling: Send message to background and await reply
chrome.runtime.sendMessage({
type: 'page',
request: request
}, function(data) {
// Received message from background, pass to page
var event = document.createEvent('Events');
event.initEvent(EVENT_REPLY, false, false);
transporter.setAttribute('result', JSON.stringify(data));
transporter.dispatchEvent(event);
});
}
});
background.js
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
if (message && message.type == 'page') {
var page_message = message.message;
// Simple example: Get data from extension's local storage
var result = localStorage.getItem('whatever');
// Reply result to content script
sendResponse(result);
}
});
Chrome扩展程序,是不是不完整的清单文件,所以这里的manifest.json
文件,我用测试答案:
{
"name": "Page to background and back again",
"version": "1",
"manifest_version": 2,
"background": {
"scripts": ["background.js"]
},
"content_scripts": [{
"matches": ["http://jsfiddle.net/jRaPj/show/*"],
"js": ["contentscript.js"],
"all_frames": true,
"run_at": "document_start"
}]
}
此扩展已在http://jsfiddle.net/jRaPj/show/(包含hello();
,如问题中所示)进行测试,并显示一个对话框,指出“Background说:null”。
打开后台页面,使用localStorage.setItem('whatever', 'Hello!');
查看消息是否正确更改。
不,你CA不是出于明显的安全原因。该扩展需要公开其API的目的 – Bergi