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

Question

I need to execute a content script from a background script with sending a couple of parameters from the background script to the content one. I explored a couple of help pages like this one ...

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

... but still have no idea how to organize it. In a Firefox extension, I did the following:

background script excerpt:

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});
                    });
}

content script excerpt:

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);

But when I do something like that in Chrome, I get the following:

Error in response to tabs.query: TypeError: Cannot read property 'then' of undefined at Object.callback

So it looks like I am using a wrong syntax or even wrong structure at all. Could you please give me some clue on how to do it properly?

Thanks, Racoon

Answer 1

As @qwOxxOm points out in comments, you need to use callbacks in Chrome, for example, instead of appending with then() , move the function inside then to the argument chain of the call itself. Otherwise it's used pretty much the same way:

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

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

or like:

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

etc.

Error handling is a bit different as you would check lastError instead of using a callback for it.

You can also use the chrome namespace for Firefox (there are some differences between the two browsers/namespaces in some areas you need to take into consideration).