How to create DOM on runtime in a Chrome Extension

I am testing a chrome extension in which i am creating a div at in the open tab at run time and applying some css to it. When i test it on my system it works fine but when i test it on other system (same chrome version) it works on some pages but not work on others.

My code for div creation is as below:

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(null, {file: "content_script.js"});
});

content_script.js:

//<LINK>
var link = document.createElement('link');
link.href = 'http://mydomain.com/getfeedback-dialog.css';
link.rel  = 'stylesheet';
link.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(link);

//OVERLAY
var getfeedback_overlay = document.createElement('div');
getfeedback_overlay.setAttribute('id', 'getfeedbackoverlay');
document.body.appendChild(getfeedback_overlay);

//DIALOG
var getfeedback_dialog = document.createElement('div');
getfe开发者_开发技巧edback_dialog.setAttribute('id','getfeedbackdialog');

//CONTAINER
var getfeedback_container = document.createElement('div');
getfeedback_container.appendChild(getfeedback_dialog);

//<IMG>
getfeedback_dialog_image = document.createElement('img');
getfeedback_dialog_image.setAttribute('src','http://mydomain.com/icon.jpg');
getfeedback_dialog.appendChild(getfeedback_dialog_image);

//<A>
getfeedback_dialog_a = document.createElement('a');
getfeedback_dialog_a.setAttribute('href','http://mydomain.com');
getfeedback_dialog_a.setAttribute('id','textlogo');
getfeedback_dialog_a.setAttribute('target','_blank');
getfeedback_dialog_a.innerHTML = 'Extension by Me';
getfeedback_dialog.appendChild(getfeedback_dialog_a);

getfeedback_container.setAttribute('id','getfeedbackcontainer');
document.body.appendChild(getfeedback_container);

I want to use the same approach as the 'Stylish' extension which modifies the CSS of a page when it is loaded. How do they manage it?