How can I keep a change in webpage's source each time I visit it?

Question

I use a crappy web-mail service (paid) which has a troubling interface. The area for reading emails is quite small and I have to scroll both ways to read each mail's content. Since I have no knowledge about web programming and markup syntax, I tried my best to go through the page-source and found a line that could potentially solve my issue:

<div class="main" style="width: 849px; height: 309px;">
<div class="left" data-unread="0" style="width: 211px"></div>
<div class="right" style="margin-left: 211px"></div>

Changing the first line's 849px to something like 1200px makes it better (no more horizontal scrolling). I was wondering if there was a way to make it stay this way every time I load the web site. I am using Firefox 33.0 on Ubuntu.

Answer 1

Drag & drop the link in this JSBin snippet to your browser's bookmark bar. Every time you have to change the width of the div on the desired page, click on the bookmarklet

The following is the bookmarklet code:

javascript:(function(){document.getElementsByClassName('main')[0].style.width='1200px';})()