Chrome扩展程序:后台和内容脚本之间的通信

时间:2017-09-08 16:20:42

标签: 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'

所以看起来我使用了错误的语法甚至错误的结构。能不能给我一些关于如何正确做到的线索?

谢谢, 浣熊

1 个答案:

答案 0 :(得分:1)

正如@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命名空间(在某些需要考虑的区域中,两个浏览器/命名空间之间存在一些差异)。