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] + '"');
        });
    });
});