Set of links in popup to populate a specifically named field with set text

Question

I'm a noob to creating extensions and I've spent all day on this, and i'm absolutely nowhere with what I'm trying to do.

Is it possible to have a set of links in a chrome extension popup that have onclick code to populate a specifically named form field and place a specific bit of text where your cursor is?

For example I want it to target the "email" field and fill it with "joe@joebloggs.com" but I don't want this to be customisable. Also the input field name is email, and it has no id, so would I've tried using

getelementsbyname

with no joy there.

So, what _is_ your question here? How to get the field? Or what? — Xan, Sep 07 '14 at 19:44
I want to have some links in my popup that place a piece of text in to the textfield/text area. So in my example, you click the email link and it fills the field with the name "email" with "joe@joebloggs.com". — BN83, Sep 07 '14 at 19:50
Which field? In a webpage (which?)? In a popup? What exact problems do you have? — Xan, Sep 07 '14 at 19:54
A field on a webpage that has the name (not ID) of "email". My problem is I can't get clicking the link in the chrome extension popup, to fill in the text input. — BN83, Sep 07 '14 at 19:56
Show us your code. But first, take a look at this question: http://stackoverflow.com/questions/13591983/onclick-within-chrome-extension-not-working — Xan, Sep 07 '14 at 19:57
Thanks for that. I've set up similar here: http://jsfiddle.net/e96koL3g/ Doesn't seem to be working on there though. When trying it with a field on the popup page, it works and adds the text to the field. But when trying to click the link in the popup to fill the text in on the webpage, it doesn't work. — BN83, Sep 07 '14 at 20:40
Then I understand your question, but I'm afraid a good answer would be outside SO format. I suggest that you read this [Architecture Overview](https://developer.chrome.com/extensions/overview#arch) to set you on the right track. — Xan, Sep 07 '14 at 20:53

Daniel · Accepted Answer · 2014-09-07T23:33:29.150

For this task you need to use onMessage, sendMessage, and query. The onMessage is a method of chrome.runtime, sendMessage, and query are both methods of tabs.

Manifest

The first thing you want to do is add the tabs permission to your manifest file.

"permissions": [
    "tabs"
],

Popup HTML

For the popup page you need to separate your Javascript from your html page. You can no longer add inline Javascript to the popup page. So create an HTML and Javascript file. For this example I will use an anchor tag by giving it an ID. When clicked this will trigger the sending of data.

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Popup</title>
</head>

<body>
    <div id="mainPopup">
        <h1>Popup</h1>
        <p>
            <a href="#" id="email-filler">Email</a>
        </p>
    </div>
    <script src="popup.js"></script>
</body>
</html>

Popup Javascript

Now when the anchor tag is clicked an onClick event is triggered, and this sends your data to the content script.

// tab options
var tabOptions = {
    active: true,
    currentWindow: true
};

// when button is clicked
document.getElementById("email-filler").onclick = function () {
    // we use tabs query to find the id of the tab you wish to send data to
    chrome.tabs.query(tabOptions, function (tab) {
        // parameter 1: id of the tab you are sending data to
        // parameter 2: the data you are sending to the tab
        chrome.tabs.sendMessage(tab[0].id, "joe@joebloggs.com");
    });
};

Content Script

Lastly add the following to your content script. The request variable contains the data you are sending from the popup page.

chrome.runtime.onMessage.addListener(onRequest);

function onRequest(request, sender, sendResponse) {
    console.log(request);
    document.getElementsByName("SOME-NAME")[0].value = request;
}

To add to this useful answer, could you include: 1) required parts of the manifest for the content script, 2) links to documentation when appropriate? Thank you. — Xan, Sep 07 '14 at 23:21
Hi, many thanks for this, can I just ask where it targets the name of the field I want to populate? Is it the "SOME-NAME" part in the content script? — BN83, Sep 08 '14 at 09:22

Set of links in popup to populate a specifically named field with set text

1 Answers1