将控件从弹出窗口转移到内容脚本 - Google Chrome扩展程序

Question

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"
}
}

Answer 1

在接收来自请求的响应之前，您正在关闭弹出窗口，因为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();
    });         


}

将控件从弹出窗口转移到内容脚本 - Google Chrome扩展程序

问题描述

1 个解决方案

解决方案1
3 已采纳 2011-02-22 17:00:26

将控件从弹出窗口转移到内容脚本 - Google Chrome扩展程序

问题描述

1 个解决方案

解决方案1 3 已采纳 2011-02-22 17:00:26

解决方案1
3 已采纳 2011-02-22 17:00:26