saber酱的抱枕

Here We Are Again (《喜剧之王》插曲)

@saber4天前

02/16
16:25
软件

我又感受到了谷人希的魅力

刚才修改一个网站,原本的网页编码是gb2312的,我使用一个编码转换器转换成utf-8时出了点问题,编码变成了这样:

<meta http-equiv="Content-Type" content="text/html"; charset=utf-8"gb2312" />

我直到修改完都没发现问题,后来同事的360浏览器上和搜狗浏览器上网页都是乱码,我才发现了这个问题。

看来chrome的容错能力也是非常强大啊。

我又感受到了谷人希的魅力

@saber1月前

01/19
18:21
软件

【chrome扩展】获取哔哩哔哩视频的封面大图

chrome 扩展 哔哩哔哩 bilibili b站 封面图 效率

前两天我做了个获取bilibili视频封面大图的chrome扩展,chrome浏览器及多数chromium内核的浏览器都可以使用。

安装本扩展后,在bilibili页面上,chrome的右键菜单里会多出本扩展的菜单。

如图:

chrome 扩展 哔哩哔哩 bilibili b站 封面图 效率

您可在哔哩哔哩(bilibili)中的视频播放页面及视频播放列表上,打开右键菜单并点击本扩展的菜单项,以此来获取封面大图。

本扩展可以在各种视频列表/直播列表/番剧目录/排行榜列表等【任意视频的封面图】上右键获取封面图;也可在视频播放页面的任意位置右键获取。①

支持各种常见的列表,除了上图那样的列表,还有下面这些类型的列表(未全部列出):

chrome 扩展 哔哩哔哩 bilibili b站 封面图 效率

chrome 扩展 哔哩哔哩 bilibili b站 封面图 效率

chrome 扩展 哔哩哔哩 bilibili b站 封面图 效率

chrome 扩展 哔哩哔哩 bilibili b站 封面图 效率

在番剧目录页面(上图),在目录列表上(第几话)右键也可获取该话的封面。在其他外置会获取到番剧封面图(上面的大图)。

如果偶尔功能失效,刷新页面即可恢复正常。

由于是初版,可能存在一些纰漏,欢迎大家多提意见~


chrome 扩展 哔哩哔哩 bilibili b站 封面图 效率

扩展作者:雪见仙尊
扩展图标用的是loading画师某抱枕的图=。=
(saber酱真是太可爱啦~

chrome应用商店地址:
https://chrome.google.com/webstore/detail/egodkcidolldembjebmiepoibpahmllh

chrome 扩展 哔哩哔哩 bilibili b站 封面图 效率

对于非chrome浏览器,可是尝试使用crx文件安装,下载地址:
http://7xk7g2.com1.z0.glb.clouddn.com/bilibili%20cover%20image.crx


ps:获取的大图也是b站上的,如果封面图原本是很大的,但up上传时裁剪成了小尺寸,那我也无能为力。

如果本扩展获取到的封面图尺寸还是不够大,建议搭配一个以图搜图的扩展,在封面图上右键,即可以图搜图:

chrome 扩展 哔哩哔哩 bilibili b站 封面图 效率


①由bilibili官方发布的番剧(区别于up主上传的番剧),其播放页面不能获取封面图。如有需要可到该番剧的列表页获取封面图。up主上传的视频都可以在播放页面获取封面图。

【chrome扩展】获取哔哩哔哩视频的封面大图

@saber1月前

01/8
08:00
软件

chrome浏览器缓存查看器——ChromeCacheView

chrome浏览器缓存查看器——ChromeCacheView

ChromeCacheView是一款chrome浏览器缓存查看工具,启动之后它就会自动读取chrome的缓存,并列出所有已缓存的文件。使用它可以方便的对缓存内容进行排序、查找、导出等操作,非常好用。在软件内可以随时右键刷新,不用重新打开软件即可读取最新的缓存内容。

导出文件的话是点工具栏第三个按钮,然后选择保存目录并导出。支持一次导出多个文件。

下载最新版本

官方网站

在官网里,我们可以看到这个公司还开发了IE、opera、firefox浏览器的缓存查看器,简直惊了

chrome浏览器缓存查看器——ChromeCacheView

@saber2月前

01/1
08:00
软件

使用Chrome浏览器调试Android手机上的网页

调试移动设备上的网页很麻烦,因为手机上基本没什么调试工具。我们最常用的办法应该是在pc上模拟网页在手机里的运行效果,但如果遇到用模拟不能解决的问题,就又要发愁了。

倒闭公司谷人希家的chrome浏览器可以使用USB数据线调试Android手机上的网页,很好用,最近我找了些教程试了试,把步骤记录一下。

首先手机要是Android的,需要打开开发者模式并开启USB调试。

然后用手机上的浏览器(不知是否所有浏览器都可以,推荐用手机版chrome)打开要调试的网页,并使用USB数据线把手机连接到电脑上(如果有模式选择,可以选择传文件模式,不要选择仅充电)。电脑上需要有这个手机的驱动,如果没有驱动得自己去装(现在多数手机插上就会自动装驱动了吧)。

之后在电脑上chrome地址栏里打开chrome://inspect/#devices,会自动扫描通过USB连接的设备。

这个阶段可能在手机上会弹出USB调试的确认框,点同意。这样,chrome中就会显示出手机以及手机上打开的网页了。

使用Chrome浏览器调试Android手机上的网页

要调试某个网页的话,点击它下面的“inspect”就可以了。chrome会打开一个新的窗口来显示这个页面,之后我们就可以用开发者工具来调试了:

使用Chrome浏览器调试Android手机上的网页

如果操作步骤和设备都符合要求却不能显示/调试设备,那么可以尝试翻墙。

相关资料:《移动端Web开发调试之Chrome远程调试》

使用Chrome浏览器调试Android手机上的网页

@saber9月前

05/25
17:48
学习

chrome对日期表单的支持

最近发现的,如果把表单input控件的type设置为date,chrome就会自动应用选择日期功能了。

<input type="date" name="">

首先输入框上会显示“年/月/日”的字样。

chrome对日期表单的支持 date input

你可以点击这三项中的任意一个输入数字。

鼠标放上input之后,最右侧会显示一些操作按钮。点击最右侧的三角形,就会打开一个日期选择面板:

chrome对日期表单的支持 date input

点击即可把选择的日期输进去。

chrome对日期表单的支持 date input

这样在chrome上大部分时候都可以对各种日期输入插件说拜拜啦~来,跟我念:

谷人希谷人希谷人希谷人希谷人希谷人希谷人希谷人希谷人希谷人希谷人希谷人希……

试一试:

chrome对日期表单的支持

@saber9月前

05/19
16:14
学习 软件

chrome查找重复书签之Bookmark Checker改进办法

如果chrome浏览器中有了重复书签,我们可以使用Bookmark Checker这个扩展来检查。但是Bookmark Checker的检查结果没有把重复书签放到一起,如果重复书签较多的话,找起来就非常费事。所以我写了一段JavaScript代码来重新组织Bookmark Checker的结果页面,以提高去重的效率。

首先安装Bookmark Checker,之后在浏览器的工具栏上点击它以打开操作界面。

Bookmark Checker chrome检查重复书签 扩展 改进 JavaScript

在下拉框选择“duplicate”,然后点击下方的“check”按钮,即可开始检查重复的书签。

等它检查完毕并且显示了结果页面后,请打开控制台,粘贴执行位于本文末尾的代码。
Read More →

chrome查找重复书签之Bookmark Checker改进办法

@saber10月前

05/3
11:11
学习

使用JavaScript检查chrome中的重复书签

16.5.19更新:

推荐配合Bookmark Checker扩展来去除重复书签。方法见此


因为种种原因,chrome中可能会存在一些重复的书签。我前天同步浏览器数据时就被坑了,有两百个书签重复了。

我先是找到了“Bookmark Checker”这个扩展,它可以检查重复书签,但显示结果时没有把重复项放一起,只能靠眼睛去找。而且它页面上的文字还无法复制,这导致我们无法使用ctrl+F来查找匹配项。最后我只好自己写一个。

使用步骤如下:

首先在书签管理器中导出书签为html文件,这个步骤不截图了,不会的可以百度。

导出之后,打开该html文件,如图:

chrome bookmarks 删除重复书签
Read More →

使用JavaScript检查chrome中的重复书签

@saber11月前

04/9
13:57
学习

修改chrome的滚动条样式

如果你使用chrome访问本网站,你应该能看到本站的滚动条样式是自定义的。那我们要如何做呢?

其实chrome内置了一些伪类,使用它们可以控制滚动条的外观。本站现在使用的样式如下:

::-webkit-scrollbar-track-piece{background-color:#222;}//滚动条主体部分
::-webkit-scrollbar{width:10px;}//滚动条整体部分
::-webkit-scrollbar-thumb{background:#666;} //滚动句柄

更多参考

修改chrome的滚动条样式

@saber1年前

12/18
11:24
学习

js自定义鼠标双击事件以及对其的一些思考

昨天在做图的痛苦煎熬中,忽然脑子一抽想到了鼠标双击事件(看啊,我不得不思考代码以减轻做图的痛苦了。可见做图是多么惨无人道的事情)。于是鼓捣了两个玩意出来。

第一个代码是自定义鼠标双击事件。我们知道,JavaScript的鼠标双击事件(ondblclick)的判定时间是有阈值的。如果我们想自己定义,例如必须间隔在200毫秒以内才算双击,又比如想把时间间隔延长到1000毫秒。这时候可以自己设置时间阈值,满足条件就执行事件代码:

var click0=null;//第一次点击的时间戳
var clickTimeOut=500;//自定义允许的时间间隔
document.onclick=function  () {
	var d=new Date();
	if(click0==null){
		click0=d.getTime();
	}else{
		if(d.getTime()-click0>clickTimeOut){
			//console.log("不是双击");
			click0=d.getTime();
		}else{
			console.log("一次双击");
			click0=null;//初始化
		}
	}
}

这个和浏览器的判定应该是一样的了(至少从结果来看)。这也是数次修改之后的结果,改进的地方有(完全可以不看):

1.把相邻两次单击进行判断。例如鼠标点击了3次,第1次和第2次的间隔超时,第2次和第3次间隔在规定时间内。可以把第2和第3次点击识别为双击,而不是必须1、2判断一次,3、4再判断一次。

2.但是当一次双击事件触发之后,必须再进行至少两次单击才可以触发双击判定。例如3次单击间隔都在规定范围内,在把第1次和第2次识别为双击之后,不会把第3次和第2次连起来,认为又是一次双击。
Read More →

js自定义鼠标双击事件以及对其的一些思考

@saber1年前

12/2
14:55
学习

隐藏百度贴吧帖子列表的摘要内容

虽然也没什么卵用就是了。使用chrome的Tampermonkey扩展,新建脚本,作用域为“http://tieba.baidu.com/*”,首先在头部注释里引用keymaster.js:

// @require http://saber-img.qiniudn.com/keymaster.js

然后添加如下js代码:

key('alt+a', function(){
	var _allList=document.getElementsByClassName("threadlist_detail");
	if(_allList[0].style.display!="none"){
		for (var i = 0; i < _allList.length; i++) {
			_allList[i].style.display="none";
		};
	}else{
		for (var i = 0; i < _allList.length; i++) {
			_allList[i].style.display="block";
		};
	}
	return false;
});

在页面中按快捷键alt+a(这个可以自己修改),可以隐藏/显示帖子摘要内容。

没什么技术含量的东西,不过一开始没想到用Tampermonkey来做,费了不少事,走了两次弯路←_←

隐藏百度贴吧帖子列表的摘要内容