Javascript, chrome

Question

In Google Chrome, I figured out how to temporarily edit the page, such as the padding and margin for elements, now I am curious of the easiest way to get or write the javascript for my extension to always do that. Please share your methods is you already know! No necessity to read on.

For example, in my chrome extension Sweet Search, after removing the left navigation tools, I need to make the left margin on the center column 0 to close that space; in chrome, I can right click the center column, inspect element, find the center_col node, edit the margin on the right to 0px, and then the center column of search results shifts to the left; now what's the easiest way to get or write the javascript for such an action?

When you hover over the html for an element, it highlights on the page and shows a small cream colored box with it's element name and dimension, how can I use that element name/dom location to edit that piece?

Answer 1

I think I understand you. In the "cream colored box". You probably see something like for example:

div#column2 [730x865]

right?

Well that # is the prefix to an ID of the element in the DOM. You can access that element through javascript like so:

var column2 = document.getElementById('column2');
column2.style.marginRight = 0;

As Ken already hinted at. Understanding the DOM and knowing some JavaScript probably does not hurt when developing a Chrome extension.

Answer 2

You should learn the DOM and JavaScript, then.