gpt4 book ai didi

javascript - Chrome 扩展程序,如何将消息从面板发送到内容脚本

转载 作者:行者123 更新时间:2023-11-29 15:28:40 25 4
gpt4 key购买 nike

我的 contentScript 向 backgroundScript 发送一条消息,它打开一个弹出窗口/面板/窗口。此面板加载外部网页。我在面板中注入(inject)了一些 javascript 以与之交互。

我现在正在努力实现的是将数据从面板发送到“主页”(contentScript)。我已经成功地将消息从面板发送到 backgroundScript。

我不明白/不知道的是如何将数据从 backgoundScript 传递到 contentScript。

根据@Haibara Ai 的评论更新脚本<​​/strong>

list .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
}
}

contentscript.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"});
});

eventPage.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) {});
});
}
});

htmlselection.js(在弹出/面板/窗口中注入(inject))

[...]
//After a click within the popup/panel/window
chrome.runtime.sendMessage({ text: 'test' });
[...]

感谢您的帮助。

最佳答案

已更新

如果您想在 chrome.runtime.onMessage 中发送消息,只需使用回调 sendResponse 或使用 sender.tab.id 作为tabId 发送回消息。

您的代码还有其他问题:

  1. 因为您正在使用 Programming injection要注入(inject)脚本,您应该在 manifest.json

    "web_accessible_resources" 中声明它们
    "web_accessible_resources": [
    "htmlselection.js",
    "jquery.min.js",
    "htmlselection.css"
    ]
  2. 在您的 contentscript.js 中,只需删除消息部分,因为在此脚本中您没有收到任何内容。

  3. 对于 eventpage.js,使用 sendResponse 而不是 tab.query

    else {
    console.log("2");
    sendResponse({ action: "SendIt" });
    }

上一个

看看Message Passing ,您可以使用以下代码片段从后台页面发送消息:

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
console.log(response.farewell);
});
});

关于javascript - Chrome 扩展程序,如何将消息从面板发送到内容脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36818968/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com