如何编写保护视力的chrome浏览器插件

配置manifest.json文件

{
    "name": "EyeProtection",
    "version": "1.0",
    "description": "保护视力的chrome插件",
    "content_scripts": [
        {
            "matches": ["https://*.com/*","https://*.net/*", "https://*.cn/*", "https://*.dev/*", "https://*.io/*", "http://*.com/*"],
            "css": ["main.css"]
        }
    ],
    "icons": {
		"16": "eye.png",
		"48": "eye.png",
		"128": "eye.png"
	},
    "browser_action": {
        "default_icon": "eye.png",
        "default_title": "Protect Eye"
    },
    "manifest_version": 2
}

配置参数说明：

1. browser_action配置了之后，在浏览器安装该插件后，会显示eye.png，鼠标移上去显示Protect Eye
   

2. icons为插件安装图标，效果如下所示：
   

3. content_scripts里配置匹配网站规则，启用本地样式

main.css

body {
    background: #CCE8CF !important;
}
body > * {
    background: #CCE8CF !important;
}

完整代码地址

码云保护视力