插件网/我的作品/搜索引擎首页随机壁纸插件开发实例

搜索引擎首页随机壁纸插件开发实例

发布时间:2019-10-06    所属栏目:我的作品    阅读数:

今天给大家展示一下小邱做的一个能改变搜索引擎首页背景图片的小插件,它的功能就是你每次刷新搜索引擎首页,它就会更换一张美美的图片,给人一种赏心悦目的感觉。
这个插件主要有以下几个文件,小邱在这分享一下代码:
一,manifest.json文件

{
    "manifest_version": 2,
    "name": "蓝天夜搜索引擎首页壁纸",
    "version": "1.0",
    "description": "能将Bing每日一图设置为自定义网站的背景图",
    "icons": {
        "48": "logo.png"
    },
    "browser_action": {
        "default_icon": "logo.png",
        "default_title": "蓝天夜搜索引擎首页壁纸",
        "default_popup": "lantianye3.html"
    },
    "content_scripts": [{
        "css": ["lantianye3.css"],
        "js": ["jquery-3.2.1.min.js", "lantianye3.js"],
        "matches": ["https://www.baidu.com/"]
    }],
    "permissions": ["tabs", "http://*/*", "https://*/*"]
}
matches项您可以自定义您的网址
二,logo图标
这个图标是展示在浏览器插件栏的那个插件图标
三,lantianye3.css
.lantianye3{
    background-image: url(https://open.saintic.com/api/bingPic/);
    background-size: cover;
}
这个url里面的地址是bing首页的图片API,是每天更新的。在网上还找到一个是每刷新一次都会变化的 http://lorempixel.com/1920/1080/,这个根据大家的需求写吧。
四,jquery
jquery-3.2.1.min.js大家只需要下载jquery文件就可以了
五,lantianye3.js
$("body").addClass("lantianye3");
这个body是网页中写了背景图片的那个元素,不一定是body,根据实际情况来看
六,lantianye3.html
<p style="width: 200px;text-align: center;" > ©2019 蓝天夜 </p>
这个我就写一写版权吧,因为就这个插件来说没什么要写的,哈哈哈。
小邱说:这个插件代码还不是很成熟,但基本的功能是可以实现的,就算是抛砖引玉吧,期待大家写出更好的浏览器插件!这里附上一张成功后的图片。
更换搜索引擎首页背景图片
 

上一篇:返回列表

下一篇:返回列表

相关文章

搜索引擎首页随机壁纸插件开发实例