Getting data from user page in chrome extension - google-chrome

Question

I am creating a chrome extension which extracts the inner text of h2> from the page in which the user is browsing. Although I learned about content scripts and have used it but it is not working I don't know where is the problem. If anyone could help me that would be greatly appreciated.
This is the js code:
document.addEventListener('DOMContentLoaded', function() {
var link = document.getElementById('button');
link.addEventListener('click', function() {
updateresult();
});
});
function updateresult() {
var i;
var x =document.getElementsByTagName("h2");
for(i=0; i< x.length ; i++)
{
document.getElementById("result").innerHTML = (x[i].innerHTML + "\n");
}}
This is the manifest file which I am using:
{
"manifest_version": 2,
"name": "Header Extractor",
"description": "Extension to search header",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"16": "icon.png",
"48": "icon.png",
"128": "icon.png",
"default_popup":"popup.html",
"default_title": "Open And Search headers"
},
"permissions": [
"storage",
"activeTab" ,"tabs"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": [ "popup.js"],
"run_at": "document_end"
}
]
}

Answer 1

Have you already created a result div to paste your results in?
Also your current function only returns one h2 value. Let's use concat to output them all together.
function updateresult() {
var i;
var x = document.getElementsByTagName("h2");
var string = "";
for(i=0; i<x.length; i++)
{
string.concat(x[i].innerText + "\n");
}
document.getElementById("result").innerText = string;
}
As a side note, we use innerText instead.