获取背景图片的链接的思路

在开发者工具 > Network 选项卡中，选择 Img 过滤器，找到背景图片的链接：

接着，在开发者工具 > Elements 选项卡中，根据背景图片的链接，查找哪一个元素使用了这个链接：

找到这个元素之后，就可以使用 JavaScript 获取背景图片的链接。

谷歌浏览器插件的代码实现

思路

根据 title 判断当前页面是否为必应搜索引擎的首页；
创建一个按键，并按键注册一个点击事件，当用户点击之后，弹出保存背景图片的对话框；
将按键添加到必应搜索引擎的首页的 body 中。

实现

新建一个项目：

manifest.json 文件：

{"name": "Microsoft Bing","version": "1.0.0","description": "Microsoft Bing - 保存背景图片","content_scripts": [{"matches": [ "https://cn.bing.com/*" ],"js": ["content-script.js"]}],"manifest_version": 2
}

content-script.js 文件：

// https://developer.chrome.com/docs/extensions/mv2/content_scripts/window.onload = (event) => {console.log(event)// console.log(`The ID of the extension is ${chrome.runtime.id}.`)main()
}function main() {console.dir(location);// 根据 title 判断当前页面是否为必应搜索引擎的首页if((location.origin === "https://cn.bing.com") && (document.title !== "必应")) {return;}// 创建一个按键const button = document.createElement("button");button.innerText = "保存背景图片";button.style.setProperty("background", "rgba(34, 34, 34, 0.8)");button.style.setProperty("border", "1px solid rgba(34, 34, 34, 1)");button.style.setProperty("border-radius", "6px");button.style.setProperty("color", "rgba(255, 255, 255, 1)");button.style.setProperty("cursor", "pointer");button.style.setProperty("height", "40px");button.style.setProperty("letter-spacing", "1px");button.style.setProperty("line-height", "38px");button.style.setProperty("outline", "none");button.style.setProperty("padding", "0px 10px 0px 10px");button.style.setProperty("z-index", "20211206");button.style.setProperty("position", "fixed");button.style.setProperty("right", "8px");button.style.setProperty("bottom", "43px");// 为按键注册一个点击事件，当用户点击之后，弹出保存背景图片的对话框button.onclick = (event) => {const imageContainer = document.querySelector(".img_cont");if(imageContainer) {const backgroundImageValue = imageContainer.style.getPropertyValue("background-image");console.log(backgroundImageValue);let url;if(backgroundImageValue && backgroundImageValue.startsWith("url")) {url = new URL(location.origin + backgroundImageValue.slice(5, -2)); // 背景图片的链接}console.log(url);const anchor = document.createElement("a");anchor.href = url.toString();anchor.download = url.searchParams.get("id"); // 文件名称anchor.click();}}// 将按键添加到必应搜索引擎的首页的 body 中document.body.appendChild(button);
}

测试

在谷歌浏览器的扩展程序页面中，加载已解压的扩展程序，并启用：

接着，打开一个新的必应搜索引擎的首页（如果已经打开，则需要刷新页面，使扩展程序生效），效果如下：

谷歌浏览器插件 - 为 Microsoft Bing 搜索引擎首页添加一个【保存背景图片】的按钮（版本 1）相关推荐

wordpress 背景_如何在WordPress中添加全屏背景图片
wordpress 背景 Full screen background image seems to be a new design trend that is becoming fashionabl ...
[个性化] Vnote 添加预览背景图片以及修改字体等
[个性化] Vnote 添加预览背景图片以及修改字体等 1.0 前言 2.0 下载安装 3.0 默认界面 4.0 个性化设置 4.1 设置主题和字体 4.2 修改背景图片 5.0 修改代码块背景半透明 ...
CSS添加多个背景图片
CSS添加多个背景图片如果给页面添加多个背景,但是,在CSS中一个标记只能用一次background属性. 因此,只有给多个标记添加不同背景来实现,比如,在body标记设置了背景图片的基础上,可以再 ...
win7任务栏计算机怎么显示桌面,在win7任务栏添加一个显示桌面的图标按钮的方法...
如何在win7任务栏添加一个显示桌面的图标按钮?一般情况下,win7系统桌面任务栏没有显示桌面图标按钮的,至少我用过的win7系统都没有此图标.win7任务没有这个图标按钮,主要是为了美化桌面.这时候 ...
怎么同时给多个视频添加背景音乐、背景图片
怎么同时剪辑多个视频?像添加背景音乐.背景图片等效果,该如何在电脑上实现呢?今天小编给大家分享一款剪辑软件--视频剪辑高手,下面一起用它来试试叭. 批量导入视频素材首先,打开视频剪辑高手并登录进入 ...
php 首页加背景图片,如何在页首添加一张背景图片
Navy主题如何在页首添加一张图片可以http://www.ikk.me/这样子顶部添加背景图片他的代码是[点击查看] 回复内容: Navy主题如何在页首添加一张图片可以http://www.ikk ...
html怎么给框格加背景图,怎么给word 2013表格添加漂亮的背景图片
很多人知道word中可以插入背景图片,但他们不知道表格中也是可以插入背景图片.而且方法还很多.今天我们就和大家分享一下怎么给word 2013表格添加合适漂亮的背景图片. 1.插入图片.选中word表 ...
同时采集抖音里多个视频，并批量添加相同的背景图片
如何在电脑上同时采集抖音上的多个视频,然后批量添加背景图片呢?下面随小编一起来试试. 一.采集抖音视频将需要下载的抖音视频链接一行一个的复制到视频下载高手上确定选择好设置,单击立即下载滚动完成, ...
MFC添加界面的背景图片方法总结
VC++中如何给对话框加背景图片方法一: 1.声明成员变量CBrush m_brush; 2.在InitDialog中添加代码: CBitmap bmp; bmp.LoadBitmap(IDB_BI ...
java中的图形界面如何在JFrame中添加背景色及背景图片
Java窗口是指JFrame或者Frame 其次,窗口背景颜色是指直接调用JFrame或者Frame的setBackground(Color color)方法设置后显示出来的颜色.其实,JFrame的 ...

谷歌浏览器插件 - 为 Microsoft Bing 搜索引擎首页添加一个【保存背景图片】的按钮（版本 1）

文章目录

获取背景图片的链接的思路

谷歌浏览器插件的代码实现

思路

实现

测试

谷歌浏览器插件 - 为 Microsoft Bing 搜索引擎首页添加一个【保存背景图片】的按钮（版本 1）相关推荐

最新文章

热门文章