初尝谷歌浏览器插件开发

manifest

新建一个文件夹作为项目，创建一个manifest.json文件作为基础配置。

{
    "manifest_version": 2,
    "name": "这是一个插件",
    "version": "1.0",
    "description": "描述",
    "icons": 
	{
		"16": "/images/sun.png",
		"48": "/images/sun.png",
		"128": "/images/sun.png"
    }
}

这时一个初始状态的插件就创建完成了。但这个时候它是没什么功能的。

content_scripts

content_scripts是配置需要直接注入页面的js或css，我们在引入的js中console点东西，并且在引入的css中对页面样式做下修改，样式由于是全局的加的时候要留意下与原本的样式的优先级关系。增加该配置后重新加载插件

  "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "./src/js/index.js"
            ],
            "css": [
                "./src/css/index.css"
            ],
            // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
            "run_at": "document_start"
        }
    ]

如果我们将run_at改为document_end，会发现插件输出的位置变了，这是因为代码注入的时间变成DOM构建结束之再注入，而先前的document_start是在DOM构建之前注入，默认不添加这个配置的话其值是document_idle，表示页面空闲时间注入

这时候我们就可以通过对content_scripts配置的js，css做一些修改实现自己的一些效果了