Thursday, February 21, 2013

Fixing Chrome Extension Screen Capture (by Google)

The Screen Capture (by Google) extension used to be great. I found it very useful.

Ever since version 5.0.5, the application breaks. The menu tool got covered by the screenshot and make it impossible to select the tools to annotate the capture image.


This issue was reported multiple times in the code hosting site, but it did not catch enough attention to the developers. However this problem is easy to fix, it just requires some editing and html knowledge. It is open source, that's the good thing about it. If the owner does not fix the problem, you can do it yourself. 
  1. Go to your extension profile.
    It is usually locates at C:\Users\[username]\AppData\Local\Google\Chrome\User Data\[default] or [profileX]\Extensions\cpngackimfmofbokmjmljamhdncknpmg\[version]
  2. Edit the file "showimage.css"
  3. Locate the .toolbar 
  4. Add z-index:200; like below:
    .toolbar {  position:fixed;  height: 30px;  margin-left: 10px;  padding-top: 6px;  z-index: 200;}
  5. Problem solved.   

But why stop here. You can also modify the application to what you like. 

For example, I do copy and paste of screenshot a lot. This application somehow decided to put it under menu. 


In order to make it suitable to me, I edit the file call showimage.html and move the copy function out of the drop down menu. 

from:
  <div class="toolbar" id="okBtn" style="position:fixed; right:30px; top:0px;">
    <ul>
      <li id="btnSave">
        <img src="images/icon_save.png" alt="">
        <span id="tSave"></span>
      </li>
      <li id="btnUpload">
        <img src="images/upload.png" alt="">
        <span id="tUpload"></span>
      </li>
      <li id="btnClose">
        <img src="images/icon_close.png" alt="">
        <span id="tClose">Close</span>
      </li>
      <li id="btnMore">
        <img src="images/down_arrow.png" alt="arrow">
        <div id="more-tools">
          <ul>
            <li id="btnCopy">
              <img src="images/copy.png" alt="">
              <span id="tCopy"></span>
            </li>
            <li id="btnPrint">
              <img src="images/print.png" alt="">
              <span id="tPrint"></span>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>

to:
<div class="toolbar" id="okBtn" style="position:fixed; right:30px; top:0px;">
    <ul>
      <li id="btnSave">
        <img src="images/icon_save.png" alt="">
        <span id="tSave"></span>
      </li>
      <li id="btnCopy">
        <img src="images/copy.png" alt="">
        <span id="tCopy"></span>
      </li>
      
      <li id="btnClose">
        <img src="images/icon_close.png" alt="">
        <span id="tClose">Close</span>
      </li>
      <li id="btnMore">
        <img src="images/down_arrow.png" alt="arrow">
        <div id="more-tools">
          <ul>
          <li id="btnUpload">
       <img src="images/upload.png" alt="">
       <span id="tUpload"></span>
     </li>

            <li id="btnPrint">
              <img src="images/print.png" alt="">
              <span id="tPrint"></span>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>



Now I am very happy.

So, this is what you can do with open source application. You can make changes to the program to the way you like... as long as you know how to. :)

No comments:

Post a Comment