Chrome扩展程序,如何将消息从面板发送到内容脚本
Chrome extension, how to send message from panel to content script
My contentScript 向 backgroundScript 发送一条消息,打开一个弹出窗口/面板/窗口。此面板加载外部网页。我在面板中注入了一些 javascript 来与之交互。
我现在要做的是将数据从面板发送到"主页"(contentScript)。我已经成功地将消息从面板发送到后台脚本。
我不明白/不知道的是如何将数据从backgoundScript传递到contentScript。
根据@Haibara Ai的评论更新脚本
清单.js
{
"name": "My extension",
"version": "0.1",
"manifest_version": 2,
"description": "description",
"permissions": ["activeTab", "tabs","http://*/*","https://*/*"],
"content_scripts": [
{
// Change 'matches' attribute to load content
// script only in pages you want to.
"matches": ["SomeUrl"],
"js": ["jquery.min.js", "contentscript.js", "notifier.js"]
}
],
"background": {
"scripts": ["eventPage.js"],
"persistent": false
}
}
内容脚本.js
$(document).ready(function() {
var link = document.getElementById('inputLink');
// onClick's logic below:
link.addEventListener('click', function() {
chrome.runtime.sendMessage({
action: 'createWindow',
url: $('input[name=link]').val()
}, function(message) {
console.log(message);
})
});
});
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
alert('a');
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});
事件页面.js
chrome.runtime.onMessage.addListener(function(request) {
if (request && request.action === 'createWindow' && request.url) {
chrome.windows.create(
{
url: request.url,
focused: true,
incognito: true,
type: "panel"
}, function (newWindow) {
chrome.tabs.executeScript(newWindow.tabs[0].id, {
file: "jquery.min.js"
}, function() {
chrome.tabs.executeScript(newWindow.tabs[0].id, {
file: "htmlselection.js"
});
});
chrome.tabs.insertCSS(newWindow.tabs[0].id, {file: "htmlselection.css"});
});
} else {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
console.log(chrome.tabs);
chrome.tabs.sendMessage(tabs[0].id, {action: "SendIt"}, function(response) {});
});
}
});
html选择.js(注入弹出窗口/面板/窗口中)
[...]
//After a click within the popup/panel/window
chrome.runtime.sendMessage({ text: 'test' });
[...]
谢谢你的帮助。
已更新
如果要在 chrome.runtime.onMessage
内发送消息,只需使用回调sendResponse
或使用sender.tab.id
作为 tabId 来发回消息。
您的代码还有其他问题:
-
由于您使用编程注入来注入脚本,因此您应该在
"web_accessible_resources"
中声明它们manifest.json
"web_accessible_resources": [ "htmlselection.js", "jquery.min.js", "htmlselection.css" ]
-
在您的内容脚本.js中,只需删除消息部分,因为您在此脚本中没有收到任何内容。
-
对于事件页.js,请使用
sendResponse
而不是tab.query
。else { console.log("2"); sendResponse({ action: "SendIt" }); }
以前
查看消息传递,您可以使用以下代码片段从后台页面发送消息:
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
console.log(response.farewell);
});
});
修复了代码片段的版本:
chrome.tabs.query({active: true, currentWindow: false}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
console.log(response.farewell);
});
});
设置currentWindow:false
,它起作用了。
相关文章:
- 使用谷歌应用程序脚本将服务器端数据表返回到客户端
- 使用谷歌应用程序脚本从工作表中获取值并将其显示在文本框中
- ng应用程序使脚本无限运行
- 需要使用谷歌应用程序脚本列出谷歌域下的所有网站
- 从应用程序脚本检查谷歌网站访问权限
- 在谷歌应用程序脚本中转换为空格的制表符
- 如何通过谷歌应用程序脚本从谷歌文档中的位置确定命名范围
- 仅为一个窗体运行应用程序脚本
- 如何让Meteor应用程序使用python脚本写入数据库
- Google Chrome扩展程序可以检测所有脚本何时加载完成吗
- ASP.NET IIS应用程序中的客户端脚本缓存
- 谷歌应用程序脚本示例-如何更改单选按钮的列表框相关值
- 引导程序动画选项卡内容脚本
- Project和作为web应用程序发布的多个doGet()脚本文件——需要澄清
- 如何获取使用我们的脚本或web应用程序的网站名称
- 如何在java脚本中显示引导程序底部的pophover图像点击
- 使用谷歌应用程序脚本制作基于谷歌电子表格的带有列表框的网络应用程序
- 应用程序脚本中导入HTML的数据擦除;谷歌表格
- 一个Web应用程序上有两个Java脚本
- NetSuite:脚本程序集构建为仅在批准时提取库存