☰

在 Chrome 中仅替换指定的字体

tag-icon • tag-icon google-chrome browser-plugin typography
在 Chrome 中仅替换指定的字体

我觉得 Georgia 很费劲，因为在过去一年左右的时间里，它在太多网站上风靡一时。我在 Chrome 中设置了自定义样式表来调整我喜欢的一些网站，但为它们制作自定义样式表却变得难以承受每一个网站，我真的只想在他们使用 Georgia 的地方进行替换。同样烦人的是，每当我更改页面以再次设置字体时，检查器都会弹出。有人知道怎么做吗？唉，似乎没有一个插件有这个功能——要么他们替换全部页面上的字体，或者焦点太窄。

如果没有的话，我可能会考虑编写一个书签小程序来执行此操作，并最终将其扩展为适用于各种浏览器的插件，但我不想重复别人已经完成的工作。

答案1

创建一个 Chrome 扩展程序，检查您打开的任何页面中数组列出的标签，如果进程发现具有与其样式属性相同的types节点，则会将其替换为。font-familyfontinfontout

  • 创建一个名为的新文件夹，例如，我的插件

  • 在文件夹中，创建一个名为清单.json并在里面添加以下代码：


{
  "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" ]      
}
  • 在该文件夹中创建一个名为脚本.js并在里面添加以下代码：


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;
                }
           }
        }
  });
})();

  • 转到 Chrome 菜单»设置»扩展程序。

  • 现在我们点击“加载已解压的扩展”按钮。

  • 最后，我们标记我们的文件夹并点击打开按钮。

可以看到系统很简单，可以自定义文件脚本.js使用您自己的控制代码。将来您可以添加其他脚本、CSS、配置页面等。

请记住，每次修改文件时脚本.js
Ctrl您应该使用+重新加载插件R。

您还可以获得有关如何创建 Chrome 扩展程序的更详细指南。

相关内容