用js写谷歌浏览器插件

左手的ㄟ右手 2023-01-17 09:16 184阅读 0赞

## 需求 ##

在工作中，如果我们需要修改别人网页的内容，因为我们没有别人的代码，所以我们不能靠修改源代码的方式解决。但是谷歌浏览器提供了插件功能，我们可以自己编写插件实现浏览指定网页，修改网页的内容。

## 步骤 ##

1.  在桌面创建一个文件夹，命名demo
2.  在demo文件夹下创建一个文件夹，命名content
3.  然后再content文件夹下创建一个js文件夹和一个manifest.json文件。
4.  最后在js文件夹下创建一个index.js文件，最终目录格式如下  
    ![在这里插入图片描述][20210428154604128.png_pic_center]

## 示例 ##

举例修改百度首页中，“百度热榜”四个字的颜色，如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMwMTYwNzI3_size_16_color_FFFFFF_t_70_pic_center]

1.  manifest.json文件配置插件适用的网页，也就是指定域名。

{ 
        "manifest_version": 2,
        "name": "anything",
        "version": "1.0",
        "description": "anything",
        "content_scripts": [
            { 
                "matches": ["*://baidu.com/*"],
                "js": ["js/index.js"]
            }
        ]
    }

matches：指定插件在哪些域名下生效。  
js:引入index.js

1.  在index.js中操作DOM元素，修改百度热门颜色。

var content = document.getElementsByClassName("title-text");
    	content[0].style.color='blue';

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMwMTYwNzI3_size_16_color_FFFFFF_t_70_pic_center 1]  
3. 安装插件

打开谷歌浏览器，找到更多工具->扩展程序  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMwMTYwNzI3_size_16_color_FFFFFF_t_70_pic_center 2]  
然后，点击“打包扩展程序”按钮  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMwMTYwNzI3_size_16_color_FFFFFF_t_70_pic_center 3]  
选择content文件夹，点击打包开始  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMwMTYwNzI3_size_16_color_FFFFFF_t_70_pic_center 4]  
此时在demo文件夹下生成两个文件。如果需要重新打包，则需要先删除这两个文件。  
![在这里插入图片描述][20210428163107499.png_pic_center]  
最后，安装打包的插件  
选择“加载已解压的扩展程序”  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMwMTYwNzI3_size_16_color_FFFFFF_t_70_pic_center 5]  
选择content文件夹，插件就安装成功了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMwMTYwNzI3_size_16_color_FFFFFF_t_70_pic_center 6]

## 验证 ##

打开百度首页可看到文字颜色变成蓝色。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMwMTYwNzI3_size_16_color_FFFFFF_t_70_pic_center 7]

[20210428154604128.png_pic_center]: /images/20221021/59a5a54b4805466c9054540e98e66461.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMwMTYwNzI3_size_16_color_FFFFFF_t_70_pic_center]: /images/20221021/d07ef3bb27b54a98b4016744f7598526.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMwMTYwNzI3_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221021/9a5e643b0467432fa0781ae52cf5f629.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMwMTYwNzI3_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221021/df38a272a9c34ef8bbd9ae123a2095ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMwMTYwNzI3_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221021/679b947ace814061817b11b97014a2c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMwMTYwNzI3_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221021/749fc047738e48629a1ff9e8edc8970e.png
[20210428163107499.png_pic_center]: /images/20221021/0f107fcd3f4d4f9cb9a8d6f458fcf9a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMwMTYwNzI3_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221021/498614c9752e46f1958762a9bcb0451b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMwMTYwNzI3_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221021/4915f0b5ae7b4f1eb446c6aa519238a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMwMTYwNzI3_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221021/d6dc73f2376c4073a095c31e2ac52593.png