javascript - Chrome 扩展程序 : communication between background and content scripts

标签 javascript google-chrome google-chrome-extension

我需要从后台脚本执行内容脚本,并将几个参数从后台脚本发送到内容脚本。我浏览了几个像这样的帮助页面......

https://developer.chrome.com/extensions/content_scripts#pi

...但仍然不知道如何组织它。在 Firefox 扩展中,我执行了以下操作:

后台脚本摘录:

browser.tabs.executeScript({
              file: "content/login.js"
            }).then(messageContent).catch(onError)
}

function messageContent() {

    var gettingActiveTab = browser.tabs.query({active: true, currentWindow: true});

    gettingActiveTab.then((tabs) => {
          browser.tabs.sendMessage(tabs[0].id, {loginUserName: loginUserName, loginPassword: loginPassword});
                    });
}

内容脚本摘录:

function justDoTheJob(request, sender, sendResponse) {

    var doc = window.content.document;

    doc.getElementById("loginUserName").value = request.loginUserName;
    doc.getElementById("loginPassword").value = request.loginPassword;

}

browser.runtime.onMessage.addListener(justDoTheJob);

但是当我在 Chrome 中执行类似操作时,我得到以下信息:

响应 tabs.query 时出错:TypeError:无法读取 Object.callback 中未定义的属性“then”

所以看来我使用了错误的语法,甚至根本就错误的结构。您能给我一些关于如何正确执行此操作的线索吗?

谢谢, 浣熊

最佳答案

正如 @qwOxxOm 在评论中指出的那样,您需要在 Chrome 中使用回调,例如,不要附加 then(),而是将 then 中的函数移动到调用本身的参数链。否则它的使用方式几乎相同:

chrome.tabs.executeScript({file: "content/login.js"}, myCallback);

function callback(result) {
  // handle result here
}

或类似:

function messageContent() {
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
     // sendMessage here
  })
}

等等

错误处理有点不同,您会检查 lastError而不是使用回调。

您还可以使用 Firefox 的 chrome 命名空间(这两个浏览器/命名空间在某些方面存在一些差异,您需要考虑)。

关于javascript - Chrome 扩展程序 : communication between background and content scripts,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46120792/

相关文章:

javascript - NextGEN Gallery插件的js如何只在特定页面显示

html - 如何在IE上有跑马灯效果?

javascript - console.log 卡住 javascript 控制台

JavaScript:4 个异步函数在继续之前按顺序等待彼此完成?

javascript - 自定义特定 jquery-ui 对话框的样式不是所有对话框?

javascript - D3 力导向图中的 "Pinning"个节点

google-chrome-extension - 自定义 DevTools Elements 侧边栏 Pane 如何与面板通信?

javascript - 来自background.js 的popup.html 中的onclicked 事件

javascript - AWS Lambda 如何读取查询参数

javascript - HTMLElement.offsetTop 不适用于亚像素精度