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.