Customizing the Chrome Frame Image

It is possible to put background text on the frame of Chrome by creating a custom extension. Generally, I’m pretty conservative about browser themes, because too much noise makes it difficult to scan a page. The web is noisy enough as it is. I have a need to constantly look up some information that id difficult to remember as I’m browsing, and it made sense to use the space on the frame of Chrome. I’m doing this on Ubuntu 12.04, but this should work on other systems. Do know that the geometry and your existing themes or settings will mean that this might not work, or you need to tweak some settings. Still, this article should be helpful if you try to get the details down. First off, create a directory to work in. We are going to use FrameImageMinimalistic. Create a subdirectory of images, and a mainifest.json file:

user@computer:~/FrameImageMinimalistic$ mkdir images
user@computer:~/FrameImageMinimalistic$ vi manifest.json

For the manifest.json file, just set up the name, a theme, and set the frame image:

{
  "version": "1.0",
  "name": "FrameImageMinimalistic",
  "theme": {
    "images" : {
      "theme_frame" : "images/frame.png"
        }

  }
}

That is all you need. We also need to create a background image that has the text we want. For this example, I’m setting the text as the three Taoist treasures. I chose the colors so that I knew that it wasn’t text I was reading, but was still visible. There might be a way to cause this to not wrap, but just choosing a large size worked fine for me. It is a small image, regardless, if you generate it directly. Use convert from ImageMagick:

user@computer:~/FrameImageMinimalistic$ convert -size 2000x1500 -background lightgray 
-fill darkorange4 -density 164 -pointsize 7 -border 1 -bordercolor lightgray  label:"Compassion 
| Simplicity | Humility" images/frame.png
user@computer:~/FrameImageMinimalistic$ 

To see how this looks, go to settings/extensions in Chrome:

frameback1

Click the Developer mode checkbox and “Load unpacked extension”. The text should show up in the top, the Chrome frame. If all looks good, click “Pack extension”:

frameback2

Browse to the root of the directory you created and then click Pack Extension:

frameback3

You don’t need the key file unless you want to modify the extension. Chrome will notify you where the package is (.crx file) and the key file. Click OK.

frameback4

Now you can just drag the .crx file to your Chrome browser or navigate to it on the web, and it will prompt to install:

frameback5

After installation, it will notify you it is installed and give you a chance to uninstall:

frameback6