资源下载

链接地址:https://pan.baidu.com/s/18_e3gyiR3U_T-qX8HFAASg
提取码:chqt

使用方法

1:解压

2:打开

3:添加扩展插件

谷歌浏览器版本信息：版本 94.0.4606.81（正式版本） （64 位）

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

在开发者工具 > 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);
}

测试

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

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

搜索引擎快捷导航

使用方法 ：下载crx扩展名文件，拖入chrome应用管理界面即可

github地址：https://github.com/mouday/chrome-search-tool

编写一个简单的chrome插件（教程）

1. 实现效果：
   

2. 简单理解：chrome扩展程序就是一个web应用，小型网站，只不过是在chrome上多了个快捷方式

3. 必备知识(初级即可)：

html
css
javascript

4. 必备工具: chrome浏览器（本次使用的版本是 69）

第一步：初始化项目

项目文件说明：

chrome-search-tool/
    ├── manifest.json       # 配置文件
    ├── popup.html          # 弹出窗口
    ├── icon.png            # 扩展图标
    └── images              # 静态资源文件(如images、css、js等)

第二步：编写配置文件

manifest.json

{  
  "name": "searchTool",  
  "manifest_version":2,
  "version": "0.0.1",  
  "description": "便于搜索的chrome插件",
  "browser_action": {  
    "default_icon": "icon.png" ,
    "default_title": "搜索集合工具",
    "default_popup": "popup.html"
  }  
}

参数说明:

1. name 插件名称
2. version 插件的版本号
3. manifest_version 指定清单文件格式的版本, 2就OK了
4. description 插件描述
5. icons 插件图标，PNG格式， 需准备三个图标文件:
   16x16（扩展信息栏）
   48x48（扩展管理页面）
   128x128（用在安装过程中）
6. default_locale 国际化支持，支持何种语言的浏览器，虽然官方推荐，不过我没用

第三步：编写popup页面

popup.html

<meta charset="utf8">
<base target="_blank" />
<style>
    .main{
        width: 100px;
        height: 200px;
        font-size: 18px;
        text-align: center;
    }
    a{
        text-decoration: none;
    }
    .title{
        width: 100%;
        font-size: 20px;
        background-color: #E8E8E8;
    }
    img{
        width: 18px;
        height: 18px;
    }
    .links{
        margin-top: 5px; 
    }
    .links a{
        width: 100%;
        display: block;
        margin: 4px 0;
        
        color: black;
        line-height: 25px;

    }
    .links a:hover{
        background-color: red;
        color: white;
    }
    .links img{
        line-height: 25px;
    }
    .footer a{
        font-size: 12px;
        color: grey;
    }
</style>  

<div class="main">
    <div class="title">搜索导航</div>

    <div class="links">
        <a href="https://www.baidu.com/"><img src="images/baidu.ico" alt="">百度</a>
        <a href="https://www.google.com.hk/"><img src="images/google.ico" alt="">谷歌</a>
        <a href="https://cn.bing.com/"><img src="images/bing.ico" alt="">必应</a>
        <a href="https://www.sogou.com/"><img src="images/sogou.ico" alt="">搜狗</a>
        <a href="https://www.so.com/"><img src="images/so.ico" alt="">360</a>
    </div> 
    <div class="footer">
        <a href="https://www.pengshiyu.com/message.html">问题反馈</a>
    </div>

</div>

其实就是html + css + javascript

备注：如果出现中文乱码，记得在文件顶部加入<meta charset="utf8">，此方法和html编码是一样的，没有什么特别之处

第四步：配置图标

icon.png

可以百度图片上找一张方块图片，最好找png格式的

对于简单的尺寸大小的裁剪，可以到这个网址处理：http://www.gaitubao.com/

第五步：打包安装扩展程序

打开Chrome –> 更多工具 –> 扩展程序 -> 打开“开发者模式”

有两个方法：

1. 加载已解压的扩展程序 -> 将文件夹chrome-search-tool 拖入就行（多用于调试，修改文件后刷新即可）
2. 打包扩展程序 -> 选择打包扩展程序文件夹的路径 -> 生成crx扩展名的文件 -> 拖入chrome

学会编写简单插件之后，剩下的就是自己动手扩展，实现自己的小功能了

参考文章:
编写一个简单的chrome插件