☰

将自定义样式应用于 Chrome 内部页面

tag-icon • tag-icon google-chrome themes
将自定义样式应用于 Chrome 内部页面

我想将自定义样式应用于 chrome 使用的内部页面。（例如新标签页。）

我曾经按照这里所说的去做：

破解 Chrome 以黑色背景显示其内部页面

但它不再起作用，因为 Chrome 32 不再支持 Custom.css。

有没有办法在 Chrome 33+ 中设置内部 Chrome 页面的样式？

答案1

好吧，我搜索了一下，发现你能custom.css使用扩展进行模拟。

操作方法如下：

  1. 创建一个目录并将我们将在本指南中创建的文件放入其中。
  2. 去chrome://extensions
  3. 选择“开发者模式”
  4. 点击“加载已解压的扩展程序”
  5. 选择刚刚创建的目录。

现在，打开刚刚创建的目录并创建这些文件：

清单.json

{
   "content_scripts": [{
      "js": [ "inst.js" ],
      "matches": [ "<all_urls>" ]
   }], 
   "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC4r/pUHVPYQTn7vu3YHT52I0SKM15OBOTi0Jii4q5Koxd3Gdc/WXdqC2YgMA25J5PRiSubu/nHFf12Ubp3OZyNqB3j45ZscQ+tH1bwcV+cqdvv/Ik6VQaS6/qLmenLdFPKOCg/g1L1iKZu6Jjny6GlovpBj+7gjWQZBIoGBd70HQIDAQAB",
   "manifest_version": 2,
   "name": "Emulate Custom.css",
   "version": "1.0",
   "web_accessible_resources": [ "Custom.css" ]
}

安装.js

if (location.protocol === 'chrome:') (function() {
    'use strict';
    var l = document.createElement('link');
    l.rel = 'stylesheet';
    l.href = chrome.runtime.getURL('Custom.css');
    document.head.appendChild(l);
})();

自定义.css

/* whatever you had in your Custom.css */

这将仅将 CSS 插入 Chrome 内部页面，因为它们都有chrome:协议。您在此处添加的每条规则Custom.css都将插入 Chrome 的内部页面。

请注意，新标签页是不是Chrome 的内部页面。它是从 的缓存中加载的https://www.google.com/_/chrome/newtab?espv=210&ie=UTF-8。此 URL 在非 Chromium 浏览器中会中断，并重定向到 Chromium 浏览器（Google Chrome 32+ 除外）上的主页。

编辑：我找到了一个可以在页面chrome://flags上启用扩展的设置chrome://。可在此处找到：chrome://flags/#extensions-on-chrome-urls。但同样，在这种情况下，您必须指定特定的 chrome 内部页面，而不是<all_urls>，manifest.json例如：chrome://newtab，等等。

答案2

复制相同内容这里..

如果您想自定义 devtools 样式，则必须使用 chrome.devtools.panels.applyStyleSheet。此功能目前隐藏在一个标志（--enable-devtools-experiments，需要重新启动 Chrome）和一个复选框（启用该标志后，打开 devtools，单击齿轮图标，转到实验并选中“允许 UI 主题”）。

清单.json

{
"name": "<name> DevTools Theme",
"version": "1",
"devtools_page": "devtools.html",
"manifest_version": 2
}

开发者工具.html

<script src="devtools.js"></script>

devtools.js

var x = new XMLHttpRequest();
x.open('GET', 'Custom.css');
x.onload = function() {
chrome.devtools.panels.applyStyleSheet(x.responseText);
};
x.send();

自定义.css

/* whatever you had in your Custom.css */

相关内容