2023-10-03_chrome插件实战03-静态脚本注入

前言

• 通过脚本注入功能，可以注入js和css。用来对浏览的网页进行注入。用来和访问的web进行交互。比如操作这个网页的dom，操作外观样式等。可以简单的把注入的脚本当做网页的一部分。
• 注入的js是在隔离环境运行的，和原网页的js环境是分开的，意味着可以有相同名称的变量等。
• 可以针对不同的网站进行不同的js注入

1. 注入权限申请

"permissions": ["scripting"]

2. 静态注入

• 在manifest.json中声明。

"content_scripts": [
    {
        "matches": [],
        "js": [],
        "css": [],
        "run_at":    
    }
]

image.png

3. 静态注册实例：简化百度网站

• 正常的百度首页和搜索页有很多提示什么的，这个插件可以把这些不需要的元素都过滤掉，使得界面干爽。
• 事实上是利用了css注入，把不需要的元素的css样式改为display: none
• 需要用chrome开发工具查找百度网页的html元素，确定出需要过滤的元素的id或class。

开启插件前：

image.png

开启插件后：

image.png

• manifest.json文件

{
    "manifest_version" : 3,
    "name" : "single",
    "description" : "single baidu",
    "version" : "1.0",

    "permissions" : [
        "scripting"
    ],

    "content_scripts": [
        {
            "matches": ["http://www.baidu.com/*", "https://www.baidu.com/*"],
            "js": [],
            "css": ["baidu.css"]
        }
    ]
}

• baidu.css文件

#s-top-left, .s-top-right, .water-container, #s_wrap, .FYB_RD{
    display: none;
}