javascript - 如何从注入(inject)的内容脚本中传递异步操作的结果？

Question

我的 Chrome 扩展程序通过注入(inject)此内容脚本在事件页面(非跨域)上成功执行 AJAX 请求:

// post.js
$.post("/login", {
    name: "blabla"
}, function (data) {
    alert("Success!");
});

此脚本从弹出/背景页面注入(inject) chrome.tabs.executeScript:

chrome.tabs.executeScript(null, {
    file: '/src/assets/jquery-2.1.4.min.js'
}, function () {
    chrome.tabs.executeScript({
        file: 'post.js'
    });
});

如何将此 AJAX 请求的结果传递回我的弹出窗口或后台页面？

Answer 1

Send a message来自内容脚本中的回调函数:

$.post("/login", {
    name: "blabla"
}, function (data) {
    chrome.runtime.sendMessage({results: data});
});

或者发送消息并从弹出/后台页面接收响应:

    chrome.runtime.sendMessage({results: data}, function(response) {
        console.log(response);
    });

然后在弹出/背景页面中声明将处理消息的监听器:

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    if (message.results) {
        console.log('Got data, tab #%d', sender.tab ? sender.tab.id : -1, message.results);
        sendResponse({reply: "thanks"}); // optional, not required
    }
});

注意事项:

• 只能传递 JSON 可序列化对象，因此您不能使用 $.post 或 $.ajax 的 dataType: 'xml' 参数code> 因为这种情况下的响应是非 JSON 可序列化的 Document。请改用 dataType: 'html' 并将其转换为 Document 在监听器中接收。
• 当从扩展工具栏弹出窗口注入(inject)内容脚本时，请注意弹出窗口可能会被用户关闭，因此其事件监听器将被销毁并且消息将丢失。使用后台页面接收消息时，这不是问题。