Chrome Extension - edit a text field

Question

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?

Answer 1

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.

Answer 2

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();