自定义chrome新标签页,随机显示本地图片
 doctorrm      2019-01-13 16:26:50      30      0      

我们知道,目前Chrome可以在新标签页自定义图片,但无法随机,且只能有一张。如果要随机,一些已有的插件也只能提供云端的链接(HTTP格式),也就是不支持本地。

因此要实现这个本地图片随机显示的功能,需要两个东西:
Super Evil New Tab:用于随机出现图片
该插件允许你以HTML,CSS和JS自己写标签页面。在本例子中,我们只需要设置图片背景即可,因此只需要使用JS,我的JS如下:

const randomInt = function(min, max) {
    return Math.floor(min + Math.random() * (max+1 - min));
}
const imgArray = [
    "http://127.0.0.1:88/chrome-newtab-imgs/test1.png",
    "http://127.0.0.1:88/chrome-newtab-imgs/test2.png"

];
const getRandomCssString = function() {
    let len = imgArray.length;
    return 'url("' + imgArray[randomInt(0, len-1)] + '")';
};
document.body.style.backgroundImage = getRandomCssString();

注意如果你的图片地址在本地,是不能用比如F:\…这样类似的文件夹地址的,浏览器F12后可以看到报了Not Supported的错,因为chrome的插件开发还不支持访问本地文件,只能用HTTP地址方式,因此我们需要Apache或Nginx,一遍将本地目录暴露出来,这样我们才可以用HTTP的方式访问我们的本地文件。

Apache或Nginx:用于开放端口,将本地图片地址用127.0.0.0/…/的方式提供。

本例我使用Apache,安装好后将资源文件放在根目录的htdocs下面,就可以用类似http://127.0.0.1:端口号/你的图片 来访问到你的图片。

完成上面的两个步骤后,你的new tab标签页面就会每次随机显示你本地的图片了。具体用什么图片就取决于你了。

去打赏

您的支持将鼓励我们继续创作!

[微信] 扫描二维码打赏

[支付宝] 扫描二维码打赏

正在跳转到PayPal...

发表评论