saber酱的抱枕

转卖“saber.我爱你”域名和“lovesaber.com”域名

@saber1月前

04/8
15:27
学习

使用a标签的download属性让浏览器下载文件

html5对a标签新增了download属性用于下载文件,简单的理解是a标签如果添加了download属性,那么点击它的时候就不会跳转,而是会触发浏览器下载文件。如:

 a chrome download firefox html html5 兼容性 浏览器

浏览器兼容性

 a chrome download firefox html html5 兼容性 浏览器

但firefox有点麻烦,它有同源限制,如果herf里的url和当前页面的url不是同源就不能下载。

 a chrome download firefox html html5 兼容性 浏览器

其他几大浏览器都没这限制(Edge、Chrome、Opera)。

另外firefox在由download属性触发下载时,可能会提示处理方式:

 a chrome download firefox html html5 兼容性 浏览器

这好像是firefox下载文件时特有的提示,chrome没这个提示。

实际上firefox麻烦事还挺多,参见本文结尾的dwmo。


其他资料:

MDN文档

测试demo

使用a标签的download属性让浏览器下载文件

@saber2月前

04/6
08:00
学习

开发chrome扩展的一些参考资料

1.google官方文档
API目录页

2.谷歌开发文档的非官方中文版

3.360极速浏览器的官方开发文档
翻译成了中文,挺不错,但是很久没更新,显得落伍了。

4书籍《Chrome扩展及应用开发》,我们可以在图灵社区免费阅读。这本书很不错。
这本书还有第二版,修订和增加了一些内容,不过不提供全部免费阅读。图灵社区页面

开发chrome扩展的一些参考资料

@saber3月前

02/23
08:00
软件

chorme中如何单独删除地址栏下拉框的提示

当我们在chrome的地址栏中输入内容的时候,chrome会在历史记录、书签里寻找匹配的内容并加以提示。

chorme中如何单独删除地址栏下拉框的提示

如上图,我只输入了“saber”,chrome便显示出了我访问过的一系列网址,如“www.saber.我爱你”、“www.saber.love”等。

但是我博客域名现在只用“saber.love”了,如何去掉这些已经不再需要的提示呢?其实这是有快捷键的,首先用键盘的方向键选中要删除的记录,然后按下快捷键来删除这条记录:

Windows:按 Shift + Delete
Mac:按 Shift + fn + Delete
Chromebook:按 Alt + Shift + Backspace

注意,下拉提示里的书签(前面显示为五角星图标)是不能这样删除的,还是去书签管理器中删除吧。

官方文档:《移除特定的联想查询》

chorme中如何单独删除地址栏下拉框的提示

@saber3月前

02/16
16:25
软件

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

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

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

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

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

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

@saber4月前

01/19
18:21
软件

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

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

这是我制作的获取bilibili视频封面大图的chrome扩展,chrome浏览器及多数chromium内核的浏览器都可以使用。


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


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

如图:

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

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

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

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

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

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

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

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

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

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

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


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

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

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


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

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

@saber4月前

01/8
08:00
软件

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

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

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

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

下载最新版本

官方网站

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

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

@saber5月前

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手机上的网页

@saber12月前

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对日期表单的支持

@saber1年前

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改进办法

@saber1年前

05/3
11:11
学习

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

16.5.19更新:

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


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

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

使用步骤如下:

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

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

chrome bookmarks 删除重复书签
Read More →

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