Remove readonly attribute for all inputs on the page using javascript. Chrome extension

Question

I am new to javascript and would appreciate a lot if someone will help me.

Summary: Create Chrome extension. On button click in extension popup - remove the readonly attribute for all inputs on the current page.

I've created a sample code which works fine if I run it as a usual script for the page, but if I try to execute it from "popup.js" nothing happens.

Here is the code:

document.addEventListener('DOMContentLoaded', function(){

var inputs = document.querySelectorAll('input');
var mainButton = document.getElementById('mainButton');
console.log(inputs);

mainButton.addEventListener('click', activateInput);

function activateInput() {
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].readOnly = false;
    }
}
console.log('DOM Content Loaded'); }, false);

And the "manifest":

{
"manifest_version": 2,

"name": "Edit readonly",
"description": "This extension ....",
"version": "1.0",

"browser_action": {
    "default_icon": "office-material.png",
    "default_popup": "popup.html"
},
"permissions": [
    "tabs",
    "activeTab"
]
}

Thanks for your time.