Very new to chrome extensions, I am making an autofill extension in which you can press a button on the popup.html and it fills in your information. How would I code the button in my popup.html so that when it is clicked, the autofill .js file is executed that fills the information? Thanks in advance

Very new to chrome extensions, I am making an autofill extension in which you can press a button on the popup.html and it fills in your information. How would I code the button in my popup.html so that when it is clicked, the autofill .js file is executed that fills the information? Thanks in advance

• javascript
• google-chrome
• google-chrome-extension

• I gave you a pretty long answer will all the code to get started. This is for a so called 'page action' in the 'omnibar'. I chose this for you instead of a browser action because of a few reasons. 1. your script might only be applicable for a few domains of your choosing. and 2. you might only want to show the icon when a field is active: this is possible when you use this code, and improve on it. If you like the code, please mark it as the good, or best answer, so everybody wins ;) – Nicky Smits Commented Mar 9, 2014 at 23:08

2 Answers 2

My advise is to do the following. Loose the popup! Just when you click on the extension icon, perform the autofill action. You can do this using a background page. To help you find your way I'll add the basis of three files, because the google pages on chrome extensions are not very clear for beginners.

First the MANIFEST.JSON:

{
    "manifest_version": 2,
    "name": "your extension name",
    "version": "1.0.0",
    "description": "Your extension's discription",
    "icons": {
        "16" : "icon.png",
        "48" : "48.png",
        "128" : "128.png"
    },
    "background": {
        "scripts": ["background.js"]    
    },
    "page_action": {
        "default_title": "Your tooltip",
        "default_icon": "icon.png"
    },
    "permissions": [
        "tabs",
        "http://*/*",
        "https://*/*"
    ]
}

Every file that is specified in your manifest should be in the same folder as the manifest. If you place it on a filder, you hav to specify the full path.

Then the BACKGROUND.JS (this is the JavaScript file that is always open, no matter what website):

chrome.pageAction.onClicked.addListener(click);
        //When the icon is clicked -> click() will be executed
chrome.tabs.onUpdated.addListener(check);
        //When a tab is changed -> check() will be executed


function check(tab_id, data, tab){
    if(tab.url.match(/example./)){
           //if the url of the tab matches a certain website 
        chrome.pageAction.show(tab_id);
        //show the icon (by default it is not shown).
        chrome.tabs.executeScript(tab_id, {code:"var tab_id = '" + tab_id + "'"});
        //executes JS code on the WEBPAGE ON THE SCREEN ITSELF.
        //YOUR EXTENSIONS JAVASCRIPT AND CONTENT SCRIPTS ARE SEPERATE ENVIRONMENTS
    }
}


function click(){
    chrome.tabs.query({currentWindow: true, active : true},function(tab){
    //checks the tab ID of the currently open wndow
        chrome.tabs.executeScript(tab.id, {file: codeToInsert.js});
        //executes a script from the file codeToInsert.js.
    })
}

What you have now, is a background script, that inserts a piece of code in your WEBPAGE. This piece of code can change things on the webpage. what you want to do now, is build the script that gets inserted. This is just JS as you know it.

What you want to do is the following. Create a script that gets the name, value and any relevant data you need to acces your database for autoplete answers. Next, you're gonna make the content script that runs on the webpage send a message to the extension. You can do that by adding the following mand in your script:

CODETOINSERT.JS:

chrome.extension.sendMessage({type: "text", name: "emailadres", value: "makinganExtension@examp", tab_id: tab_id});

This line basically shouts out to your extension. It shouts data in JSON format. You can change all the variables as needed. I added the tab_id (which is a var we stored in the contents of your webpage earlier), so that the background page knows where the request is ing from. This is easier later on because you will probably will have some callback functions, with the tab_id you can easily tell the extension which tab to perform the action on .

Right now the content is trying to tell the extension something, you have to build a listener in your background script so you can do something with the information. The next thing you need to do is add another block of code to your BACKGROUND.JS:

chrome.extension.onMessage.addListener(
//tells the extension to listen to messages sent by content scripts
    function(request,sender, sendResponse){
    //anonymous function that is being called, several parameter are passed, from which the first 'request', is the most interesting.
        insert_field_value(request.type,request.name,request.value,request.tab_id);
        //the function 'insert_field_value' will be executed and the parameters from the json will be passed. (You can also pass  the whole var 'request'.
    }
);

Now you have to create the function insert_field_value by yourself. In this function you can execute a script the same way we did before in the background page. However. It is preferable that you only send a piece of code, like this:

chrome.tabs.executeScript(tab_id, {code:"changeValue(tab_id = '" + tab_id + "'")});
//Make sure tab_id is the value passed by the content script

Think about it! There is already a javascript file inserted called 'codeToInsert.js'. You can build another function in here. Al you have to do now is call it as I showed you above. This way you won't have to insert the functions everytime. Passing all the variables can be a little tricky at first, but im sure you'll figure it out ;).

If you paste all the info on here together, and take a look at: https://developer.chrome./extensions/getstarted. You will figure it out. Good luck!

ps.. the background script can make AJAX requests, so if you need to get the values you want to insert, you can create an AJAX request to retrieve that value.

I think the best way to do an autofill is to use content scripts. Content scripts are javascript files that are added into a page with a predefined url. If the button and browser extension is a must then I would look into adding a content script with an autofill function into the page when its loaded and then trying to call it using the browser extension.