7

I find Georgia taxing, as it's become all the rage on too many websites in the last year or so. I've got custom stylesheets set up in Chrome to tweak a number of sites I like, but it becomes prohibitive to make a custom stylesheet for every site, and I really only want to do a replacement where they've used Georgia. Equally annoying is popping up the inspector whenever I change a page to set the fonts again. Anyone know how to do this? Alas, there doesn't seem to be a plugin that has this—either they replace all the fonts on a page, or are too narrow in focus.

If there's nothing out there, I may consider writing a bookmarklet to do just this, and perhaps eventually expand that to plugin(s) for the various browsers, but I'd rather not duplicate work someone else has already done.

1 Answer 1

7

Create a Chrome extension that examines the tags listed in the array types into any page you open, if process found a node with the style attribute font-family equal to fontin it will be replaced that with fontout.

  • Create a new folder named, for example, myplugin

  • In the folder, create a new file named manifest.json and add this code inside:


{
  "name": "Font change",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Font change.",  
  "content_scripts": [ {
      "all_frames": true,
      "exclude_globs": [  ],
      "include_globs": [ "*" ],  
      "js": [ "script.js" ],
      "matches": [ "http://*/", "https://*/", "https://*/*", "http://*/*" ],
      "run_at": "document_end"
   } ],
  "permissions": [ "tabs", "http://*/", "https://*/", "https://*/*", "http://*/*", "contextMenus" ]      
}
  • In that folder create a new file named script.js and add this code inside:


var types = new Array("textarea","input","div","h1","h2","h3","span","p");
var fontin ="Verdana";
var fontout = "\'Courier New\'";

(function(){    
    chrome.extension.sendRequest({
        set:"font"
    },function(response){
        for(var i=0;i<types.length;i++){        
            var node = document.getElementsByTagName(types[i]);
                for(var y=0;y<node.length;y++){                             
                    if(node[y].style.fontFamily==fontin){
                       node[y].style.fontFamily = fontout;
                }
           }
        }
  });
})();
  • Go to Chrome menu » Settings » Extensions.

  • Now we click on the button "Load unpacked extensions".

  • Finally we mark our folder and click on the open button.

You can see that the system is very simple, and you can customize the file script.js with your own control code. In the future you may add other scripts, CSS, configuration pages, etc.

Remember that every time you make changes in the file script.js you should reload the plugin with
Ctrl+R.

Also you can get a more detailed guide about how to create Chrome extensions.

4
  • Do you mind updating the above code snippets? I tried it, and it doesn't work. Unfortunately, I don't know javascript. I can make my modifications once I get my hands on working code.
    – prash
    Jan 16, 2013 at 21:03
  • Almost certainly your code snippet is wrapped in a container other than those listed in the variable types, you should locate your tags and add nodes name in the array types. If you pass me a link with code snippet, I could locate the problem and modify the code for you.
    – RTOSkit
    Jan 17, 2013 at 4:28
  • No. I used the code verbatim to start with. I think the issue is that chrome has changed some API calls. For example, sendRequest seems to be no longer valid. I tested it on this page, that I created specifically for testing the plugin.
    – prash
    Jan 17, 2013 at 12:12
  • The APIs is fine, I tested the link, simply should replace "document_start" with "document_end" in the file manifest.json
    – RTOSkit
    Jan 17, 2013 at 18:33

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .