I'm trying to write my first Chrome extension. It would, when clicked, automatically fill the fields of an ID and password for my University's login page (which has its form's auto-fill disabled). It's a very specific page.

I have a few problem. I've searched Google and SO but couldn't find an explanation on how to change the value of a text field through Chrome. I know how to do this in HTML and JavaScript, however I couldn't get the proper input to modify its text.

I've also tried using jQuery using a few examples I've found, but no luck. I have an HTML page (popup.html) which calls a JavaScript file. I've also tried placing the JS in a content script

Here's the manifest.json:

{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
      "tabs", "http://*/*"
    ],
    "content_scripts": [
      {
        "matches": ["http://*/*"],
        "js": ["jquery-1.7.2.min.js","content.js"]
      }
  ]
}

One of my attempt of popup.js (which gets called from popup.html) is:

chrome.tabs.getSelected(null, function(tab) {
    console.log(document)
});

I've also tried placing this code inside the content.js. same result, It prints to console, however it prints the popup.html content..

I've also tried directly (and from the above method) to access an element directly by document.getElementById() but still no luck..

So, Can anyone tell me what I'm doing wrong?

I'm trying to write my first Chrome extension. It would, when clicked, automatically fill the fields of an ID and password for my University's login page (which has its form's auto-fill disabled). It's a very specific page.

I have a few problem. I've searched Google and SO but couldn't find an explanation on how to change the value of a text field through Chrome. I know how to do this in HTML and JavaScript, however I couldn't get the proper input to modify its text.

I've also tried using jQuery using a few examples I've found, but no luck. I have an HTML page (popup.html) which calls a JavaScript file. I've also tried placing the JS in a content script

Here's the manifest.json:

{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
      "tabs", "http://*/*"
    ],
    "content_scripts": [
      {
        "matches": ["http://*/*"],
        "js": ["jquery-1.7.2.min.js","content.js"]
      }
  ]
}

One of my attempt of popup.js (which gets called from popup.html) is:

chrome.tabs.getSelected(null, function(tab) {
    console.log(document)
});

I've also tried placing this code inside the content.js. same result, It prints to console, however it prints the popup.html content..

I've also tried directly (and from the above method) to access an element directly by document.getElementById() but still no luck..

So, Can anyone tell me what I'm doing wrong?

• javascript
• google-chrome-extension

• would it be easier to simply force autofill on? – Wug Commented Aug 7, 2012 at 19:16
• I don't know. :) When I look at the source, it says in the form autoplete="OFF" can it be changed so it would allow autoplete and remember what I entered? I dunno. also, I'd like to know how to do this anyway. – La bla bla Commented Aug 7, 2012 at 19:18
• chances are your extension could just search for forms with autofill disabled and enable them. – Wug Commented Aug 7, 2012 at 19:19

3 Answers 3

You need to inject a JavaScript file to the page using the "web_accessible_resources" attribute. See here:

manifest.json

{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "permissions": [
      "tabs", "http://*/*"
    ],
    "content_scripts": [
      {
        "matches": ["http://*/*"],
        "js": ["jquery-1.7.2.min.js","content.js"],
        "run_at": "document_start"
      }
  ],
  "web_accessible_resources": ["inject.js"]
}

inject.js

(function () {
    console.log('test');
}());

content.js

(function (chrome) {
    var js = document.createElement('script');
    js.type = 'text/javascript';
    js.src = chrome.extension.getURL('inject.js');
    document.getElementsByTagName('head')[0].appendChild(js);
}(chrome));

Then just put the JavaScript code you want to use in inject.js to manipulate the page. Be sure to change matches to only match your University's login page.

The reason this is the case is because Chrome extensions can run and operate on their own regardless of which website you're on. And they can continue to process as you switch pages. They're in their own sandboxed environment.

I think you should use a simple content script that is executed on the login page. You don't even need any browser action or popup for that.

Here's a manifest:

{
    "name": "Fill my password",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Fills my password on University login page",
    "content_scripts": [
        {
            "matches": ["http://www.myuniversity.edu/login.html"],
            "js": ["content.js"]
        }
    ]
}

And here's a content script:

// define your username and password
var myUsername = '...';
var myPassword = '...';

// find the fiends in your login form
var loginField = document.getElementById('...');
var passwordField = document.getElementById('...');

// fill in your username and password
loginField.value = myUsername;
passwordField.value = myPassword;

// if you want, you can even automaticaly submit the login form
var loginForm = document.getElementById('...');
loginForm.submit();

Possible workaround(chrome extension): Autoplete = on, but it could not work with some forms.