打印屏幕以了解我的问题:link
我正在构建一个扩展程序，它将一个按钮插入到特定网页的 DOM 中。此插入是通过 insert.js 中的 injectScript() 函数实现的，该函数已正确执行并正确输入到 list 文件的 "content_scripts": 字段中。
injectScript() 注入(inject)(在当前加载的网页的 DOM 中，当然，如果它是我正在寻找的页面)包含相同 inject.js 的脚本标签(包含按钮的 onclick 事件)，一个包含按钮 CSS 的样式标签，最重要的是，一个包含通过调用 chrome.extension.sendRequest 从 background.html 获得的文本的 div ({greeting: "dami"}, function(response) {...}); 插入此 div 中的文本用于通过单击我插入的按钮填充网页中的其他 div。
这很好用，但我还需要解决另一个问题:
我注入(inject)网页 DOM 的特定文本仅在 chrome.tabs.onSelectionChanged 、chrome.tabs.onUpdated 时被注入(inject)，和 chrome.history.onVisited 事件发生。我还想在我的 popup.html 通过更改 localStorage["builtin"] 修改它时重新注入(inject)此文本。所以我想要的是:当我从 popup.html 页面单击确定按钮时，我想使用 chrome.extension.sendRequest({greeting: "reintrodu"}, function(response) {...}) ; 从 popup.html 向管理我的第一个文本注入(inject)的同一内容脚本发送请求，但它似乎不起作用。
当我点击按钮时没有任何反应! 测试 警报框不显示任何内容。当我按下 OK 按钮时，popup.html 就关闭了，似乎没有数据交换发生。
这是由我的 popup.html 中的确定按钮触发的功能:
function closer()
{
if ($('input[name=check]').is(':checked'))
{
localStorage["builtin"] = document.getElementById("tkey_1").value;
localStorage["build"] = "true";
}
else
{
localStorage["builtin"] = document.getElementById("tkey_1").value;
localStorage["build"] = "false";
}
chrome.extension.sendRequest({greeting: "reintrodu"}, function(response)
{
alert(response.farewell);
});
window.close();
}
chrome.extension.sendRequest({greeting: "reintrodu"}, function(response) {...}) 应该将请求发送到 inject.js 的内容脚本:
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
// console.log(sender.tab ? "from a content script:" + sender.tab.url : "from the extension");
if (request.greeting === "history")
{
console.log("registered in history");
sendResponse({farewell: "goodbye from history"});
PageShowHandler();
}
else if (request.greeting === "historyrem")
{
console.log("registered in historyrem");
sendResponse({farewell: "goodbye from historyrem"});
PageShowHandler();
}
else if (request.greeting === "exploit")
{
console.log("registered in exploit");
sendResponse({farewell: "goodbye from exploit"});
PageShowHandler();
}
else if (request.greeting === "reintrodu")
{
console.log("registered in reintrodu");
sendResponse({farewell: "goodbye from reintrodu"});
//PageShowHandler();
alert('prins reintrodu');
}
else if (request.greeting === "selected")
{
console.log("registered in selected");
sendResponse({farewell: "goodbye from selected"});
PageShowHandler();
}
else
sendResponse({}); // snub them.
});
这是 background.html，它似乎完成了初始注入(inject)的工作，与 popup.html 不同:
<html>
<head>
<script type="text/javascript">
//Fired when a URL is visited, providing the HistoryItem data for that URL.
chrome.tabs.onSelectionChanged.addListener(function(tabId, selectInfo)
{
chrome.tabs.sendRequest(tabId, {greeting: "selected"}, function(response) {
console.log(response.farewell);
});
});
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab)
{
chrome.tabs.sendRequest(tab.id, {greeting: "exploit"}, function(response) {
console.log(response.farewell);
});
});
chrome.history.onVisited.addListener(function(result)
{
//alert(result.url);
//chrome.tabs.sendRequest(null, {greeting: "history"}, function(response) {
// console.log(response.farewell);
//});
chrome.windows.getCurrent(function(w)
{
chrome.tabs.getSelected(w.id, function (tabul)
{
//alert(tabul.id);
chrome.tabs.sendRequest(tabul.id, {greeting: "history"}, function(response) {
console.log(response.farewell);
});
});
});
});
chrome.history.onVisitRemoved.addListener(function(removed)
{
//alert(result.url);
//chrome.tabs.sendRequest(null, {greeting: "historyrem function(response) {
// console.log(response.farewell);
//});
chrome.windows.getCurrent(function(w)
{
chrome.tabs.getSelected(w.id, function (tabul)
{
//alert(tabul.id);
chrome.tabs.sendRequest(tabul.id, {greeting: "historyrem"}, function(response) {
console.log(response.farewell);
});
});
});
});
chrome.extension.onRequest.addListener(function(request, sender, sendResponse)
{
if(request.greeting == "dami")
{
if(localStorage["build"] == "true")
{
sendResponse({farewell: localStorage["builtin"]});
}
else
{
sendResponse({farewell: "textul default"});
}
}
else
{
sendResponse({farewell: "n-am ba; du-te dracu!"});
}
});
</script>
</head>
<body></body>
</html>
这是 list :
{
"name" : "gMail Adder ",
"version" : "1.0",
"description" : "Google Chrome Gmail Adder",
"options_page": "options.html",
"background_page": "background.html",
"run_at": "document_start",
"permissions": [
"tabs",
"history",
"http://*/*",
"https://*/*"
],
"content_scripts": [
{
"matches": ["*://*.google.mail.com/*", "https://*.google.mail.com/*" ,"http://mail.google.com/*" ,"https://mail.google.com/*", "https://www.google.com/*", "http://www.google.com/*", "file:///*"],
"css": ["toggle.css"],
"js": ["jquery-1.4.4.min.js", "inject.js"]
}
],
"browser_action" : {
"default_icon" : "Quest Icon 11.png",
"default_popup": "popup.html"
}
}
最佳答案
由于 API 调用是异步的，因此您在收到请求响应之前关闭了一个弹出窗口。
此外，如果您想向内容脚本发送请求，则需要改用 chrome.tabs.sendRequest。
所以你的弹窗应该是这样的:
function closer()
{
...
//todo: get tabid of a tab where the content script you are interested in is
chrome.tabs.sendRequest(tabId, {greeting: "reintrodu"}, function(response)
{
alert(response.farewell);
//closing only after receiving response
window.close();
});
}
关于javascript - 将控制权从弹出窗口转移到内容脚本 - Google Chrome 扩展程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5081090/