Question

I’m trying to pass a message from my content script to my background page. This error occurs when the content script is executed:

Uncaught TypeError: Cannot call method 'sendRequest' of undefined 

Content Script:

function injectFunction(func, exec) {
    var script = document.createElement("script");
    script.textContent = "-" + func + (exec ? "()" : "");
    document.body.appendChild(script);
}

function login() {

    chrome.extension.sendMessage({greeting: "hello"}, function(response) {
        console.log(response.farewell);
    });

    var d = window.mainFrame.document;
    d.getElementsByName("email")[0].value = "I need the response data here";
    d.getElementsByName("passwort")[0].value = "Here too.";
    d.forms["login"].submit();
}

injectFunction(login, true);

Background:

 chrome.extension.onMessage.addListener(
 function(request, sender, sendResponse) {
      if (request.greeting == "hello")
      sendResponse({farewell: "goodbye"});
 });

manifest.json:

{
    "name": "Sephir Auto-Login",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Contact [e-mail] for support or further information.",
    "options_page": "options.html",
    "icons":{
        "128":"icon.png"
    },
    "background": {
        "scripts": ["eventPage.js"]
    },
    "content_scripts": [
        {
          "matches": ["https://somewebsite/*"],
          "js": ["login.js"]
        }, 
        {
          "matches": ["somewebsite/*"],
          "js": ["changePicture.js"]
        }
    ],
     "permissions": [
        "storage",
        "http://*/*",
        "https://*/*",
        "tabs"
    ]
}

Those are the examples on the documentation from google, so they should work.

Any help? I’m completely lost.

Answer 1

The problem is caused by your misunderstanding of the script executing environment. Read Chrome extension code vs Content scripts vs Injected scripts for more information. To be precise, you’re using a form of this method to execute code in the context of a web page. Web pages do not have any access to the chrome.extension API.

I suggest to rewrite your code to not use injected scripts, because it’s not necessary in this case.

function login() {

    chrome.extension.sendRequest({greeting: "hello"}, function(response) {
        console.log(response.farewell);
    });

    var d = document.getElementById('mainFrame').contentDocument;
    d.getElementsByName("email")[0].value = "I need the response data here";
    d.getElementsByName("passwort")[0].value = "Here too.";
    d.forms["login"].submit();
}

login();

* Only works if the frame is located at the same origin. Otherwise, you need this method to execute code correctly.