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做一些修改实现自己的一些效果了