【chrome extensions course】7.页面自动

前端在开发页面的时候，很多时候为了看效果，需要改完以后刷新页面。今天的案例是实现页面的自动刷新。

今天的主角就是content_scripts。它能给特定的网站页面附加样式css和脚本js，可以修改页面的dom结构，可以给extensions发消息。

先看一个简单的例子

这个扩展能给所有的页面头部增加一个div，并且修改页面body的背景颜色，见github

1. manifest.json

{
    "manifest_version":2,
    "name":"contentScripts",
    "version":"1",
    "description": "this is a contentScripts extensions",
    "icons": {
        "16": "images/icon16.png",
        "32": "images/icon32.png",
        "48": "images/icon48.png",
        "128": "images/icon128.png"
    },
    "content_scripts":[
        {
            "matches":["<all_urls>"],//匹配所有网站
            "css":["content.css"],//引入css
            "js":["jquery.min.js","content.js"]//引入jquery和js
        }   
    ]
}

2. content.css

body{
    background-color: green!important
}

3. content.js

$(function () {
    $("body").prepend('<div>增加的内容</div>')
})

自动刷新的案例

1. manifest.json

{
    "manifest_version":2,
    "name":"autoFresh",
    "version":"1",
    "description": "this is a autoFresh extensions",
    "icons": {
        "16": "images/icon16.png",
        "32": "images/icon32.png",
        "48": "images/icon48.png",
        "128": "images/icon128.png"
    },
    "content_scripts":[
        {
            "matches":["*://localhost/*"],//匹配以localhost开头的网站，本地项目
            "js":["autoFresh.js"]//引入js
        }   
    ]
}

2. autoFresh.js

setTimeout(function(){
    location.reload()
},2000)