![](/img/trans.png)
[英]Click event is not working from content script to popup on Google Chrome Extension
[英]Transfer control from popup to content script - Google Chrome Extension
PRINT SCREEN了解我的問題: 鏈接
我正在構建一個擴展,它將一個按鈕插入到特定網頁的DOM中。 此插入是通過insert.js中的injectScript()函數實現的,該函數已正確執行並正確輸入到清單文件的“content_scripts” :字段中。
injectScript()注入(在當前加載的網頁的DOM中,如果是,當然是我正在尋找的頁面)一個包含相同inject.js(包含按鈕的onclick事件)的腳本標記,一種樣式包含按鈕CSS的標簽,最重要的是,包含從background.html通過調用chrome.extension.sendRequest({greeting:“dami”},function(response){...})獲得的文本的div ; 插入此div中的文本用於通過單擊我插入的按鈕從網頁填充其他div。
這很好用,但我還需要解決另一個問題:
我注入到網頁的DOM中的特定文本僅在chrome.tabs.onSelectionChanged , chrome.tabs.onUpdated和chrome.history.onVisited事件發生時注入 。 每當我的popup.html通過更改localStorage [“builtin”]修改它時,我也想重新注入此文本。 所以我想要的是:當我點擊popup.html頁面中的確定按鈕時,我想使用chrome.extension.sendRequest({greeting:“reintrodu”},function(response){...}); 從popup.html發送請求到管理我的第一個文本注入的相同內容腳本,但似乎它不起作用。
單擊按鈕時沒有任何反應! 測試警告框不顯示任何內容。 當我按下OK按鈕時,popup.html就會關閉,似乎沒有數據交換。
這是我的popup.html中的OK按鈕觸發的功能:
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 ,與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>
這是顯而易見的:
{
"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();
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.