9

我从文档中了解到，在失去焦点时关闭 chrome 扩展弹出窗口是一种设计选择。

我正在开发用户选择保存网页元素的扩展程序。当他与主网页交互时，我希望弹出窗口得到更新，但这显然是不可能的。

处理这种情况的正确方法是什么？（这是我的第一个 chrome 扩展）

4

2 回答 2

6

您可以让内容脚本检测“保存”操作。让我们假设它是一个特定的 DOM 元素，您确定它会在特定的 main 中，或者您自己创建。

内容.js

//content script
document.onreadystatechange = function () {
if (document.readyState == "complete") {
    // Grab the UI frmo the mainpage you want to append the save functionality
    var someElementsYouWantToAppendASaveButtonTo = document.getElementsByTagName("...");

    var len = someElementsYouWantToAppendASaveButtonTo.length;
    for (var i = 0; i < len; i++) { 
        // Create a UI save button to provide a functionality
        var theSaveButton = document.createElement("button");
        theSaveButton.value = "Save to Chrome Extension";

        // Send data to extension when clicked
        theSaveButton.addEventListener("click", function() {
            var dataToSentToExtension = {...} // Retrieve from the clicked element, or whatever you want to save
            chrome.extension.sendMessage(dataToSentToExtension, function(response) {
                if(response.success) console.log("Saved successfully");
                else console.log("There was an error while saving")
            });
        }, false); 

        someElementsYouWantToAppendASaveButtonTo[i].appendChild(theSaveButton)
    }
}
}

然后，在后台，您检测响应并根据需要设置弹出窗口。

背景.js

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
    if(request.dataToSave) {
        chrome.storage.local.set(dataToSave, function() {...});

        // You can then set upn the proper popup for the next click or even switch to it
        switch(request.popupToDisplay) {
            case "awesomeDisplay":
            chrome.browserAction.setPopup({...})
            break;
        }


        var responseFromExtension = {success: true}
    } else {
        var responseFromExtension = {error: true}
    }
});
于 2013-01-04T17:07:30.437 回答
1

您似乎正在寻找根据popup.html网页中的更改来修改\更新您的页面。如果是这样，请使用内容脚本并与（因为每次都失去焦点）建立单个消息通信的连接并间接更新。background pagepopup.html

参考：

除了这些之外，popup还有background page很多关于这些主题的问题，它们会让你开始。

于 2013-01-04T17:04:23.840 回答