<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Chrome扩展 &#8211; 李辉 / Grey Li</title>
	<atom:link href="https://greyli.com/tag/chrome%E6%89%A9%E5%B1%95/feed/" rel="self" type="application/rss+xml" />
	<link>https://greyli.com</link>
	<description>一个编程和写作爱好者的在线记事本</description>
	<lastBuildDate>Sun, 23 Nov 2025 15:01:33 +0000</lastBuildDate>
	<language>zh-CN</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=4.9.26</generator>

<image>
	<url>https://greyli.com/wp-content/uploads/2025/03/avatar-500-compressed-144x144.jpg</url>
	<title>Chrome扩展 &#8211; 李辉 / Grey Li</title>
	<link>https://greyli.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>我的第一个Chrome扩展：GhostPage（网页X光）</title>
		<link>https://greyli.com/my-chrome-extension-ghostpage/</link>
		<comments>https://greyli.com/my-chrome-extension-ghostpage/#respond</comments>
		<pubDate>Fri, 22 Sep 2017 01:12:09 +0000</pubDate>
		<dc:creator><![CDATA[李辉]]></dc:creator>
				<category><![CDATA[计算机与编程]]></category>
		<category><![CDATA[Chrome扩展]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[GhostPage]]></category>

		<guid isPermaLink="false">http://greyli.com/?p=1417</guid>
		<description><![CDATA[没有接触过Chrome扩展的时候，觉得它一定很复杂。crx的后缀也让我猜不出是用什么语言编写的，现在才发现不过 [&#8230;]]]></description>
				<content:encoded><![CDATA[<p>没有接触过Chrome扩展的时候，觉得它一定很复杂。crx的后缀也让我猜不出是用什么语言编写的，现在才发现不过就是HTML+CSS+JavaScript……</p>
<div id="attachment_1418" style="width: 1213px" class="wp-caption aligncenter"><img class="wp-image-1418 size-full" src="http://greyli.com/wp-content/uploads/2017/09/sp170922_085047.png" alt="GhostPage in Chrome" width="1203" height="931" srcset="https://greyli.com/wp-content/uploads/2017/09/sp170922_085047.png 1203w, https://greyli.com/wp-content/uploads/2017/09/sp170922_085047-150x116.png 150w, https://greyli.com/wp-content/uploads/2017/09/sp170922_085047-300x232.png 300w, https://greyli.com/wp-content/uploads/2017/09/sp170922_085047-1024x792.png 1024w, https://greyli.com/wp-content/uploads/2017/09/sp170922_085047-624x483.png 624w" sizes="(max-width: 1203px) 100vw, 1203px" /><p class="wp-caption-text"><a href="https://chrome.google.com/webstore/detail/ghostpage/hegpcollkgldlimbhkimijhhhoaicipp" target="_blank" rel="noopener">扩展GhostPage的Chrome商店页面</a></p></div>
<p>这个扩展本身很简单，实际只有一行代码。Google提供了一个非常好的<a href="https://developer.chrome.com/extensions/getstarted" target="_blank" rel="noopener">入门指导</a>，过一遍基本上就可以编写简单的扩展了。这个扩展作用也就是通过去掉页面样式来检查页面结构（参考<a href="http://greyli.com/white-space-appears-on-the-right-side-of-the-page-try-this-css-debugger/" target="_blank" rel="noopener">这篇文章</a>），可以用来解决下面的问题：</p>
<ul>
<li>元素超出边线，挤出的空白导致多余的平行滚动</li>
<li>元素不对齐</li>
</ul>
<p>使用这个扩展配合Chrome的检查工具可以快速的定位到出问题的元素。</p>
<p>Chrome商店的地址：<a href="http://greyli.com/wp-content/uploads/2017/09/sp170922_085047.png" rel="attachment wp-att-1418"><br />
</a><a href="https://chrome.google.com/webstore/detail/ghostpage/hegpcollkgldlimbhkimijhhhoaicipp" target="_blank" rel="noopener">https://chrome.google.com/webstore/detail/ghostpage/hegpcollkgldlimbhkimijhhhoaicipp</a></p>
<p>crx文件下载（备用）：<a href="https://chrome-extension-downloader.com/77577d1b5c39e945e597a9981f6e0ee6/hegpcollkgldlimbhkimijhhhoaicipp/GhostPage_v1.0.crx" target="_blank" rel="noopener">https://chrome-extension-downloader.com/77577d1b5c39e945e597a9981f6e0ee6/hegpcollkgldlimbhkimijhhhoaicipp/GhostPage_v1.0.crx</a></p>
<p>附注：虽然扩展编写很简单，但为了交5美元的开发者认证费用却花了我一天时间。尝试了下面几种方式均失败了：</p>
<ul>
<li>全球付</li>
<li>Google Play礼品卡</li>
<li>其他几个虚拟信用卡服务</li>
</ul>
<p>最后花了两倍多的价格在淘宝上买了一个虚拟信用卡，第二天中午扣款成功了。</p>
]]></content:encoded>
			<wfw:commentRss>https://greyli.com/my-chrome-extension-ghostpage/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
