☰

更改 Chrome NTP 的背景图片

tag-icon • tag-icon google-chrome
更改 Chrome NTP 的背景图片

有没有办法设置或更改 Chrome 新标签页的背景没有安装主题？

答案1

新标签页不是生成的，它是 Chrome 内置的资源，在运行时加载和处理。当然，使用扩展程序修改新标签页会更容易，但您可以编辑它以使更改永久生效（即内置，即使在禁用所有插件和扩展程序的最低限度模式下运行），但是您必须在每次更新后再次执行此操作（尽管可以通过各种方式使其更容易）。如果您想走这条路，您可以在文件中找到新标签页CHROME.DLL。


首先关闭 Chrome/Chromium 的所有实例（确保chrome.exe任务管理器中不存在任何实例），然后制作备份副本chrome.dll（ResHacker 会自动执行此操作，但为了以防万一，您还是需要一份备用副本）。

现在chrome.dll打开资源编辑器例如资料黑客。该页面位于二进制文件中（宾达) 部分，在资源 523 下 - 数字可能会发生变化，但请搜索字符串bookmarkbarattached:bookmarkbarattached;。 （由于某种原因，页面中没有<title>New Page</title>元素，它是在运行时添加的，即使它是一个静态字符串并且没有动态内容。）

此时，您可以进行任何您想要的更改。您可以添加元素、脚本、样式等。

除了显而易见的（编辑编译的二进制文件，并且需要在更新后重新编辑）之外，还有一个需要注意的事项，即您无法链接到本地​​文件（这是有道理的，因为浏览器不是 Web 服务器）。新标签页“位于” URL 处chrome://newtab/，因此任何相对 URI 都将相对于该 URL）。当然，您可以使用绝对 URI，例如http://foobar.org/images/blah.jpg或chrome://theme/css/newtab.css。

完成后，编译脚本（如果资源编辑器有这样的按钮）并保存。现在运行 Chrome，您的新标签页应该会焕然一新。


下面，我编辑了新标签页，并在右下角添加了一张图片，单击该图片时，它会在两个图形文件之间切换（它原本是指向我主页的简单链接，但我“将其美化”以显示您可以对新标签页进行重大更改）。我还将元素的样式设置body为我网站上的图形文件，这样我就可以通过更改文件轻松更改它，而不必重新编辑 DLL 文件。当然，更简单的方法是简单地向页面添加外部样式表，这样就可以对文本文件进行任何更改，而无需重新编辑 DLL 文件。


编辑 Chromium 新标签页

答案2

不是直接的，你可以自定义使用快速拨号

如果您不满足于仅更改 Speed Dial 的颜色，您可以设置背景图像来真正改变外观。任何图像都可以，但目前需要在线托管。开发人员指出，他们很快将添加对本地背景图像的支持，因此请留意未来的更新。

来源

答案3

我本来打算用这个完全不同的新答案来替换我的旧答案，但显然旧答案对于较新版本的 Chrome 仍然有效，所以我想我会将其添加为单独的答案。

几个版本之前，Chrome 进行了更改，以便一切浏览器中的是一个网页。一旦他们实现了用户样式表，就可以更改浏览器中的几乎所有内容，包括其自己的 chrome。

您确实可以更改新标签页背景，无需任何主题，而且也很容易。事实上，您可以自定义大部分新标签页以及 Chrome 的其他部分。唯一的限制是您必须使用CSS去做（你不能）替换内容此时）。

自定义 Chrome 的一般步骤很简单：

  1. 打开你的用户数据目录
  2. 打开User StyleSheets文件夹
  3. Custom.css在文本编辑器中打开文件
  4. 输入您的 CSS
  5. 保存文件
  6. 观察结果

如果您想更改新标签页的背景，您可以使用以下命令：

/*Change NTP background*/ html[themegravity] {background:url(http://upload.wikimedia.org/wikipedia/commons/2/2c/IntP_Brick.png) !important;}

这是一条简单的线，但它有几个重要的方面：

  • 它以一条注释开始（这样做总是好的，特别是当文件随着您的所有自定义而开始增长时）。
  • html它为具有属性的元素创建 CSS 规则themegravity。我之所以选择这个，是因为在我使用的版本中，这是将 CSS 规则缩小到 NTP 背景的最佳方法。不幸的是，这可能会因版本而异，因此您可能需要尝试使用开发工具 ( F12) 来找到一个好的CSS 选择器这样可行。
  • 该规则将背景图像设置为 WikiMedia 商店中的平铺纹理。
  • 它使用!important修饰符来确保规则被使用并且不会被 Chrome 自己的内部样式表覆盖。

您可以使用任何有效的图像作为背景（任何可以在常规网页上使用的图像）。这为您提供了极大的灵活性，因为有效的选项包括：

  • 外部托管的图像
  • 系统硬盘上的本地图像
  • Chrome 中的内置资源
  • Base64 编码的图像数据流

显然，您需要谨慎使用外部托管的图像，以避免恶意软件以及出于性能原因（您必须下载它），但外部图像的好处是您可以在图像动态更改的主机上分配图像。例如，如果有一个每天都会更改的 URL http://coolpics.com/dailypic.jpg，那么设置它将为您提供每天都有新背景！ʘ◡ʘ而且你只需要使用一行代码，而且这行代码永远不会改变。很酷吧？

就像我之前说的，背景并不是唯一可以改变的东西，你可以改变几乎所有的东西。你需要做的就是选择正确的 CSS 选择器，使其足够狭窄，以定位元素而不影响其他网页。这可能有点棘手，但肯定是可行的，特别是因为 Chrome 支持 CSS3。最好的部分是，更改是瞬间当你保存样式表时，这样你就不必费心安装任何事物，这使得测试变得轻而易举。（不要忘记使用修饰符!important。）

例如你可以将其变为：

NTP 默认外观的屏幕截图

变成这个怪物：

自定义NTP的截图

这个例子可能不太好看，但它展示了只用一点 CSS 就能做什么。下面是我用来制作这个丑陋示例的 CSS；它包括各种技巧和调整，展示了您可以使用的不同类型的选择器和图像。我选择的选择器适用于我目前使用的 Chrome 版本，而不会影响我访问过的其他网页。

/*Customize the Chrome New Tab Page*/
/*Change background to tiling texture*/                          html[themegravity] {background:url(http://upload.wikimedia.org/wikipedia/commons/2/2c/IntP_Brick.png) !important;}
/*Set the webstore icon to an emoji and change text to red*/     span#chrome-web-store-title {background:url(chrome://theme/IDR_PROFILE_AVATAR_14) no-repeat bottom right !important; color:#f00;}
/*Change the Chrome logo to the built-in conflicts icon*/        div#logo-img {margin-left:-70px !important; padding-left:20px !important; width:20px; height:63px; background:url(data:image/png;base64,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) !important;}
/*Hide normal Chrome logo*/                                      div#logo-img img {display: none !important;}
/*Change bar at bottom to reddish fade*/                         html[themegravity] div#footer {background-image:-webkit-linear-gradient( rgba(255, 192, 192, 1.0), rgba(200, 255, 200, 0.5)) !important;}
/*Change color of most-visited items to yellow and make bold*/   a.most-visited span.title {color:#ff8 !important; font-weight:bold !important;}
/*Give thumbnails a thick, dotted, green border*/                span.thumbnail-wrapper {border:dotted #0f0 5px !important;}

可能性是无限的（好吧，不是字面意思，但仍然相当广泛）。

相关内容