Fill form via chrome extension popup

Question

I want to load values from fill.js and when the anchor link in extension popup.html is clicked it will autofill form fields on a remote page that has field IDs of #user + #pw. This is what i currently have in my extension but i'm not sure if it's missing something in the manifest file or if back.js is needed.

fill.js

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
if (msg.action === "fillFields") {
    $("#user").val("name@email.com")
    $("#pw").val("pass123")
}
});

popup.js

$("#fill").on("click", function(){
chrome.runtime.sendMessage({
    action: 'fillFields'
});

});

popup.html

<!DOCTYPE html>
<html>
<head>
<title>Autofill</title>
<script src="jquery.js"></script>
<script src="popup.js"></script>
</head>
<a href="#" id="fill">Fill</a>
</body>
</html>

manifest.json

    {
    "manifest_version": 2,
    "name": "Autofill",
    "description": "",
    "version": "1.0",

    "browser_action": {
      "default_icon": "icon.png",
       "default_title": "Autofill",
       "default_popup": "popup.html"
    },

    "permissions": [
      "tabs",
      "http://*/*",
      "https://*/*"    
    ]
  }

Remote form fields

<input name="user" type="text" id="user">
<input name="pw" type="text" id="pw">

score 2 · Answer 1 · answered Nov 16 '17 at 06:55

2

You can't access the #fill element from your fill.js, which is injected into the page (i.e. a content script). The popup runs in one scope, the content in another and background in another.

Injecting the jquery and fill scripts as you're doing on the browser action is better than loading it in the manifest because it'll only inject when needed and the handler will be ready by the time you click fill in the popup.

Add this to popup.html:

<script src="jquery.js"></script>
<script src="popup.js"></script>

popup.js:

$("#fill").on("click", function(){
    chrome.runtime.sendMessage({
        action: 'fillFields'
    });
});

fill.js:

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
    if (msg.action === "fillFields") {
        $("#user").val("name@email.com")
        $("#pw").val("pass123")
    }
});

Lookup run_at to have control over when scripts are injected. You should have no problem as there's a natural delay between browser action click and being able to click fill.

answered Nov 16 '17 at 06:55

Troy Wray

938
5
15

Thanks! but i am looking to be able to click a fill link from the popup menu (as i may have more than one set of values and multiple links) Is that possible? – 7O07Y7 Nov 16 '17 at 08:32
The fill link is on the popup in my answer – Troy Wray Nov 16 '17 at 09:26
to use multiple fill links, just send and respond to additional messages, e.g. fillFields2 – Troy Wray Nov 16 '17 at 09:28
It doesnt show html anchor link Fill when i click the extension icon – 7O07Y7 Nov 17 '17 at 20:40
The instruction was **Add** this to popup.html: – Troy Wray Nov 17 '17 at 20:51
That's what i have done but the popup doesn't show when i click the icon. Do i have to change 'content_scripts' to something else? – 7O07Y7 Nov 17 '17 at 21:10
you've got popup.html defined in the popup section of the manifest, right. All that should be the same as the original so the popup should show when you click on the extension browser button. It did when you first posted the question and what I told you to do shouldn't have changed that. – Troy Wray Nov 17 '17 at 21:30
i.e. you still have "browser_action": { "default_icon": "icon.png", "default_title": "fill", "default_popup": "popup.html" }, in the manifest – Troy Wray Nov 17 '17 at 21:31
Sorry yes. What i meant was that when i click the link in popout it doesn't do anything. Do you know why that is? – 7O07Y7 Nov 17 '17 at 21:35
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/159274/discussion-between-troy-wray-and-7o07y7). – Troy Wray Nov 18 '17 at 05:04

Fill form via chrome extension popup

1 Answers1