Files

553 lines
22 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222"><meta name="generator" content="Hexo 6.3.0">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
<link rel="mask-icon" href="/images/logo.svg" color="#222">
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css" integrity="sha256-VHqXKFhhMxcpubYf9xiWdCiojEbY9NexQ4jh8AxbvcM=" crossorigin="anonymous">
<script class="next-config" data-name="main" type="application/json">{"hostname":"toozhao.com","root":"/","images":"/images","scheme":"Muse","darkmode":false,"version":"8.28.0","exturl":false,"sidebar":{"position":"left","width_expanded":320,"width_dual_column":240,"display":"post","padding":18,"offset":12,"b2t":true,"scrollpercent":true},"hljswrap":true,"codeblock":{"theme":{"light":"default","dark":"stackoverflow-dark"},"prism":{"light":"prism","dark":"prism-dark"},"copy_button":{"enable":true,"style":"mac"},"fold":{"enable":false,"height":500},"language":false},"bookmark":{"enable":true,"color":"#222","save":"auto"},"mediumzoom":true,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":false,"async":false,"duration":200,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果:${query}","hits_time":"找到 ${hits} 个搜索结果(用时 ${time} 毫秒)","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"top_n_per_article":5,"unescape":false,"preload":false,"trigger":"auto"}}</script><script src="/js/config.js" defer></script>
<meta name="description" content="笔者作为google的忠实追随者已经使用google浏览器一年多了,chrome一直是我的默认浏览器,可以说也算见证了它的成长。我也在博客里面多次分享了和chrome相关的东西,大家可以在文末的相关文章里面看到。今天给大家分享的是如果快速制作一款谷歌浏览器 chrome主题,而且还需要几乎是傻瓜式的。当然你可以可以精雕细琢做出一款艺术品。 在线制作打开http:&#x2F;&#x2F;www.chromethem">
<meta property="og:type" content="article">
<meta property="og:title" content="快速高效制作一款属于你的chrome主题(在线&#x2F;本地)">
<meta property="og:url" content="https://toozhao.com/2011/02/16/make-your-own-theme/">
<meta property="og:site_name" content="大染志">
<meta property="og:description" content="笔者作为google的忠实追随者已经使用google浏览器一年多了,chrome一直是我的默认浏览器,可以说也算见证了它的成长。我也在博客里面多次分享了和chrome相关的东西,大家可以在文末的相关文章里面看到。今天给大家分享的是如果快速制作一款谷歌浏览器 chrome主题,而且还需要几乎是傻瓜式的。当然你可以可以精雕细琢做出一款艺术品。 在线制作打开http:&#x2F;&#x2F;www.chromethem">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://toozhao.com/images/2011/02/2-17-1.png">
<meta property="article:published_time" content="2011-02-16T13:00:00.000Z">
<meta property="article:modified_time" content="2026-08-04T10:47:21.903Z">
<meta property="article:author" content="Junv">
<meta property="article:tag" content="chrome">
<meta property="article:tag" content="主题">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://toozhao.com/images/2011/02/2-17-1.png">
<link rel="canonical" href="https://toozhao.com/2011/02/16/make-your-own-theme/">
<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"https://toozhao.com/2011/02/16/make-your-own-theme/","path":"2011/02/16/make-your-own-theme/","title":"快速高效制作一款属于你的chrome主题(在线/本地)"}</script>
<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>快速高效制作一款属于你的chrome主题(在线/本地) | 大染志</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/medium-zoom/1.1.0/medium-zoom.min.js" integrity="sha256-ZgMyDAIYDYGxbcpJcfUnYwNevG/xi9OHKaR/8GK+jWc=" crossorigin="anonymous" defer></script>
<script src="/js/utils.js" defer></script><script src="/js/sidebar.js" defer></script><script src="/js/next-boot.js" defer></script><script src="/js/bookmark.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hexo-generator-searchdb/1.5.0/search.js" integrity="sha256-xFC6PJ82SL9b3WkGjFavNiA9gm5z6UBxWPiu4CYjptg=" crossorigin="anonymous" defer></script>
<script src="/js/third-party/search/local-search.js" defer></script>
<style>
/* =========================================================
Toozhao blog custom styles (injected via head.njk)
阅读体验优化 — 微信读书风格
========================================================= */
html { scroll-behavior: smooth; }
/* 主内容阅读宽度 */
.post-block, .posts-expand .post-block {
max-width: 760px;
}
.post-title {
font-size: 1.7em;
font-weight: 700;
letter-spacing: 0.01em;
}
.post-meta { color: #999; font-size: 0.9em; }
.post-body {
font-size: 1.05em;
line-height: 1.9;
letter-spacing: 0.02em;
color: #333;
}
.post-body p {
margin: 1.1em 0;
text-align: justify;
text-justify: inter-ideograph;
}
.post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 {
line-height: 1.4;
margin-top: 1.6em;
margin-bottom: 0.8em;
font-weight: 600;
color: #222;
}
.post-body h2::before, .post-body h3::before, .post-body h4::before {
content: '';
display: inline-block;
width: 4px;
height: 0.9em;
background: #4a90d9;
border-radius: 2px;
margin-right: 10px;
vertical-align: -0.08em;
}
.post-body img {
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
margin: 0.6em auto;
display: block;
max-width: 100%;
}
.post-body blockquote {
border-left: 4px solid #4a90d9;
background: rgba(74, 144, 217, 0.06);
margin: 1.4em 0;
padding: 0.8em 1.2em;
border-radius: 0 8px 8px 0;
color: #555;
}
.post-body blockquote p { margin: 0.4em 0; }
.post-body a {
color: #2d6cdf;
border-bottom: 1px solid rgba(45, 108, 223, 0.3);
transition: color 0.2s, border-color 0.2s;
}
.post-body a:hover { color: #1a4fae; border-bottom-color: #1a4fae; }
.post-body code {
background: rgba(0, 0, 0, 0.05);
border-radius: 4px;
padding: 2px 6px;
font-size: 0.9em;
color: #c7254e;
}
.post-body table {
border-collapse: collapse;
margin: 1.2em auto;
font-size: 0.95em;
}
.post-body table th, .post-body table td {
border: 1px solid #ddd;
padding: 8px 14px;
}
.post-body table th { background: #f5f7fa; font-weight: 600; }
.post-body table tr:nth-child(even) { background: #fafbfc; }
.post-body ul, .post-body ol { padding-left: 1.6em; margin: 0.8em 0; }
.post-body ul li, .post-body ol li { margin: 0.35em 0; }
.post-body hr {
border: none;
border-top: 1px dashed #ccc;
margin: 2em auto;
width: 60%;
}
/* 暗色模式(跟随系统,不依赖 NexT darkmode class */
@media (prefers-color-scheme: dark) {
body { background: #1b1f24; color: #c8cdd3; }
.post-body { color: #c8cdd3; }
.post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 { color: #e8eaed; }
.post-body blockquote { background: rgba(74, 144, 217, 0.1); color: #9aa5b1; }
.post-body code { background: rgba(255, 255, 255, 0.1); color: #e88388; }
.post-body table th, .post-body table td { border-color: #3a3f45; }
.post-body table th { background: #2d3238; }
.post-body table tr:nth-child(even) { background: #262a2f; }
.post-meta { color: #777; }
}
::selection { background: rgba(74, 144, 217, 0.25); }
/* 字体调节按钮 */
.font-size-control {
position: fixed;
right: 18px;
bottom: 90px;
z-index: 1000;
background: rgba(0, 0, 0, 0.65);
color: #fff;
border-radius: 20px;
padding: 6px 4px;
display: flex;
flex-direction: column;
gap: 2px;
user-select: none;
}
.font-size-control button {
background: none;
border: none;
color: #fff;
font-size: 13px;
cursor: pointer;
padding: 3px 8px;
opacity: 0.85;
}
.font-size-control button:hover { opacity: 1; }
</style>
<noscript>
<link rel="stylesheet" href="/css/noscript.css">
</noscript>
</head>
<body itemscope itemtype="http://schema.org/WebPage">
<div class="headband"></div>
<main class="main">
<div class="column">
<header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="site-brand-container">
<div class="site-nav-toggle">
<div class="toggle" aria-label="切换导航栏" role="button">
<span class="toggle-line"></span>
<span class="toggle-line"></span>
<span class="toggle-line"></span>
</div>
</div>
<div class="site-meta">
<a href="/" class="brand" rel="start">
<i class="logo-line"></i>
<p class="site-title">大染志</p>
<i class="logo-line"></i>
</a>
<p class="site-subtitle" itemprop="description">Junv's blog</p>
</div>
<div class="site-nav-right">
<div class="toggle popup-trigger" aria-label="搜索" role="button">
<i class="fa fa-search fa-fw fa-lg"></i>
</div>
</div>
</div>
<nav class="site-nav">
<ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a></li>
<li class="menu-item menu-item-search">
<a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
</a>
</li>
</ul>
</nav>
<div class="search-pop-overlay">
<div class="popup search-popup">
<div class="search-header">
<span class="search-icon">
<i class="fa fa-search"></i>
</span>
<div class="search-input-container">
<input autocomplete="off" autocapitalize="off" maxlength="80"
placeholder="搜索..." spellcheck="false"
type="search" class="search-input">
</div>
<span class="popup-btn-close" role="button">
<i class="fa fa-times-circle"></i>
</span>
</div>
<div class="search-result-container">
<div class="search-result-icon">
<i class="fa fa-spinner fa-pulse fa-5x"></i>
</div>
</div>
</div>
</div>
</header>
<aside class="sidebar">
<div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
<ul class="sidebar-nav">
<li class="sidebar-nav-toc">
文章目录
</li>
<li class="sidebar-nav-overview">
站点概览
</li>
</ul>
<div class="sidebar-panel-container">
<!--noindex-->
<div class="post-toc-wrap sidebar-panel">
<div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link"><span class="nav-text"></span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9C%A8%E7%BA%BF%E5%88%B6%E4%BD%9C"><span class="nav-text">在线制作</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9C%AC%E5%9C%B0%E5%88%B6%E4%BD%9C"><span class="nav-text">本地制作</span></a></li></ol></div>
</div>
<!--/noindex-->
<div class="site-overview-wrap sidebar-panel">
<div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
<img class="site-author-image" itemprop="image" alt="Junv"
src="/images/avatar.gif">
<p class="site-author-name" itemprop="name">Junv</p>
<div class="site-description" itemprop="description">分享编程、运维、生活与思考</div>
</div>
<div class="site-state-wrap animated">
<nav class="site-state">
<div class="site-state-item site-state-posts">
<a href="/archives/">
<span class="site-state-item-count">310</span>
<span class="site-state-item-name">日志</span>
</a>
</div>
<div class="site-state-item site-state-tags">
<a href="/tags/">
<span class="site-state-item-count">249</span>
<span class="site-state-item-name">标签</span></a>
</div>
</nav>
</div>
<div class="links-of-author animated">
<span class="links-of-author-item">
<a href="https://github.com/wahyd4" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;wahyd4" rel="noopener me" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
</span>
</div>
<div class="cc-license animated" itemprop="license">
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" class="cc-opacity" rel="noopener" target="_blank"><img src="https://cdnjs.cloudflare.com/ajax/libs/creativecommons-vocabulary/2020.11.3/assets/license_badges/small/by_nc_sa.svg" alt="Creative Commons"></a>
</div>
</div>
</div>
</div>
</aside>
</div>
<div class="main-inner post posts-expand">
<div class="post-block">
<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
<link itemprop="mainEntityOfPage" href="https://toozhao.com/2011/02/16/make-your-own-theme/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="Junv">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="大染志">
<meta itemprop="description" content="分享编程、运维、生活与思考">
</span>
<span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
<meta itemprop="name" content="快速高效制作一款属于你的chrome主题(在线&#x2F;本地) | 大染志">
<meta itemprop="description" content="">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
快速高效制作一款属于你的chrome主题(在线/本地)
</h1>
<div class="post-meta-container">
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建时间:2011-02-17 00:00:00" itemprop="dateCreated datePublished" datetime="2011-02-17T00:00:00+11:00">2011-02-17</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar-check"></i>
</span>
<span class="post-meta-item-text">更新于</span>
<time title="修改时间:2026-08-04 20:47:21" itemprop="dateModified" datetime="2026-08-04T20:47:21+10:00">2026-08-04</time>
</span>
</div>
</div>
</header>
<div class="post-body" itemprop="articleBody"><blockquote>
<p>笔者作为google的忠实追随者已经使用google浏览器一年多了,chrome一直是我的默认浏览器,可以说也算见证了它的成长。我也在博客里面多次分享了和chrome相关的东西,大家可以在文末的相关文章里面看到。今天给大家分享的是如果快速制作一款谷歌浏览器 chrome主题,而且还需要几乎是傻瓜式的。当然你可以可以精雕细琢做出一款艺术品。</p>
</blockquote>
<h2 id=""><a href="#" class="headerlink" title=""></a></h2><h2 id="在线制作"><a href="#在线制作" class="headerlink" title="在线制作"></a>在线制作</h2><p>打开<a target="_blank" rel="noopener" href="http://www.chrometheme.net/">http://www.chrometheme.net/</a>,在页面底部点击<a target="_blank" rel="noopener" href="http://www.chrometheme.net/chrome-theme-creator-online.html">create chrome theme online</a> 这个按钮即可进入制作主题。</p>
<p>主题制作分为几个部分:</p>
<p>start是填写主题的名字和主题的相关介绍。</p>
<p>&#x2F;images,&#x2F;images 2主要是设置主题相关的图片。</p>
<p>colors:设置主题的重要位置的颜色,不如一些按钮和文字的颜色</p>
<p>tints:这里是设置主题相关模块的布局。</p>
<p>pack:制作并生产主题crx文件,可以直接下载文件,也可以下载zip源文件。</p>
<p><strong>下面是制作主题的截图:</strong></p>
<p><strong>设置界面图片:</strong></p>
<p><strong><a href="/images/2011/02/2-17-1.png"><img src="/images/2011/02/2-17-1.png" title="2-17-1"></a>(1)frame:</strong></p>
<p><strong>(2)toolbar:</strong></p>
<hr>
<h2 id="本地制作"><a href="#本地制作" class="headerlink" title="本地制作"></a>本地制作</h2><p>和在线制作差不多,离线制作是一个windows程序,和在线制作缺少的就只是没有对照图片,不过你有了我们的博客也还是可以轻而易举了。</p>
<blockquote>
<p>这里提供离线制作主题的程序:</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">crxtheme-v1.0.rar</span><br><span class="line"></span><br><span class="line">另附上一个我自己简单做的主题,这里提供下载:junv</span><br></pre></td></tr></table></figure>
<p>大家快去试试吧!</p>
</div>
<footer class="post-footer">
<div class="post-copyright">
<ul>
<li class="post-copyright-author">
<strong>本文作者: </strong>Junv
</li>
<li class="post-copyright-link">
<strong>本文链接:</strong>
<a href="https://toozhao.com/2011/02/16/make-your-own-theme/" title="快速高效制作一款属于你的chrome主题(在线&#x2F;本地)">https://toozhao.com/2011/02/16/make-your-own-theme/</a>
</li>
<li class="post-copyright-license">
<strong>版权声明: </strong>本博客所有文章除特别声明外,均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="noopener" target="_blank"><i class="fab fa-fw fa-creative-commons"></i>BY-NC-SA</a> 许可协议。转载请注明出处!
</li>
</ul>
</div>
<div class="post-tags">
<a href="/tags/chrome/" rel="tag"># chrome</a>
<a href="/tags/%E4%B8%BB%E9%A2%98/" rel="tag"># 主题</a>
</div>
<div class="post-nav">
<div class="post-nav-item">
<a href="/2011/02/14/good-photos/" rel="prev" title="高清壁纸免费下">
<i class="fa fa-angle-left"></i> 高清壁纸免费下
</a>
</div>
<div class="post-nav-item">
<a href="/2011/02/22/tv-radios/" rel="next" title="全球电视、广播电台免费在线收看、收听(免下载、安装)">
全球电视、广播电台免费在线收看、收听(免下载、安装) <i class="fa fa-angle-right"></i>
</a>
</div>
</div>
</footer>
</article>
</div>
</div>
</main>
<footer class="footer">
<div class="footer-inner">
<div class="copyright">
&copy; 2012
<span itemprop="copyrightYear">2026</span>
<span class="with-love">
<i class="fa fa-heart"></i>
</span>
<span class="author" itemprop="copyrightHolder">Junv</span>
</div>
<div class="powered-by"><a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/muse/" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
</div>
</div>
</footer>
<div class="toggle sidebar-toggle" role="button">
<span class="toggle-line"></span>
<span class="toggle-line"></span>
<span class="toggle-line"></span>
</div>
<div class="sidebar-dimmer"></div>
<div class="back-to-top" role="button" aria-label="返回顶部">
<i class="fa fa-arrow-up fa-lg"></i>
<span>0%</span>
</div>
<div class="reading-progress-bar"></div>
<a role="button" class="book-mark-link book-mark-link-fixed"></a>
<noscript>
<div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>
<script>
/* 字号调节 A- / A / A+(阅读体验) */
(function () {
'use strict';
function initFontSize() {
var postBody = document.querySelector('.post-body');
if (!postBody || document.getElementById('font-size-control')) return;
var bar = document.createElement('div');
bar.id = 'font-size-control';
bar.className = 'font-size-control';
var labels = [['A-', -1], ['A', 0], ['A+', 1]];
var current = 1.0;
labels.forEach(function (item) {
var btn = document.createElement('button');
btn.textContent = item[0];
btn.title = item[0] === 'A-' ? '减小字号' : item[0] === 'A+' ? '增大字号' : '恢复默认';
btn.addEventListener('click', function () {
if (item[1] === 0) current = 1.0;
else current = Math.min(1.4, Math.max(0.8, current + item[1] * 0.1));
postBody.style.fontSize = current + 'em';
});
bar.appendChild(btn);
});
document.body.appendChild(bar);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initFontSize);
} else {
initFontSize();
}
})();
</script>
</body>
</html>