Writing to a webpage's textfield from chrome extension

Question

I want to create a chrome extension that takes in some text, then opens a website, and tries to write that text to the textfield. This is what I have:

chrome.omnibox.onInputEntered.addListener(
  function(text) {
    chrome.tabs.create({url:"http://www.editpad.org/"});
    document.getElementById("text").value = txt; //.innerHTML = txt
    alert('You just typed "' + text + '"');
  });

I got the ID from just inspecting the element. What do I need to do so it writes?

Answer 1

Your code runs in the context of the (invisible) background or event page. In order to "switch" to the execution context of the page you've just opened, you need to use a content script (programatically, "on the fly", using chrome.tabs.executeScript).

The annotated code below shows how to achieve the result you want.

chrome.omnibox.onInputEntered.addListener(function(text) {
    chrome.tabs.create({
        url: 'http://www.editpad.org/'
    }, function(tab) {
        // chrome.tabs.executeScript takes a string that will be parsed and run
        // as JavaScript code. To pass a string, you need to make sure that it
        // does not contain any invalid characters. This can easily be achieved
        // by serializing the input string to JSON.
        var serializedValue = JSON.stringify(text);

        chrome.tabs.executeScript(tab.id, {
            code: 'document.getElementById("text").value = ' + serializedValue,
        }, function(result) {
            if (!result) {
                // This usually happens when you do not have the permission to
                // run code in the page. Add the site to the "permissions" 
                // section manifest.json.
                alert('Failed to run content script.\n' +
                    chrome.runtime.lastError.message);
                return;
            }
            // The value of the last expression is passed to the callback of
            // chrome.tabs.executeScript, for each frame. The code runs only in
            // the top-level frame (because `allFrames: true` is not specified),
            // so the result is an array with only one element.
            alert('You just typed: "' + result[0] + '"');
        });
    });
});