chrome扩展入门

说明

一个最简单的插件应该包含几个类型的文件，第一个是 manifest.json ，这个是对整个插件的说明，一个 icon.png 是插件图标，一个 popup.html 用来显示插件，一般来说还需要一个 popup.js 和一个 popup.css ,这就是最最基本的文件组成了。 ::: warning 注意简单说明一下，"manifest_version":2 这是说明版本，这是固定格式, "name" 用来说明插件的名称, "description" 是对插件的描述, "version" 是插件的发行版本, "browser_action" 是对插件具体的说明。 :::

::: code-group

{
    "manifest_version": 2,
    "name": "一个简单的时钟效果",
    "description": "一个简单的时钟效果",
    "version": "0.0.1",
    "browser_action": {
        "default_icon": "icon.png",
        "default_title": "我的个人时钟",
        "default_popup": "popup.html"
    }
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>我的时钟</title>
        <link rel="stylesheet" type="text/css" href="myClock.css" />
    </head>
    <body>
        <div id="clockDemo"></div>
        <script src="myClock.js"></script>
    </body>
</html>

*{margin: 0; padding: 0;}
body{width:200px;height:100px;}
div{line-height: 100px;font-size:40px;text-align: center;}

function myClock (e) {
    var today = new Date()
    var h = today.getHours()
    var m = today.getMinutes()
    var s = today.getSeconds()
    m = addZero(m)
    s = addZero(s)
    e.innerHTML = h + ':' + m + ':' + s
    setTimeout(function () {
        myClock(e)
    }, 1000)
}
function addZero (num) {
    return num >=10 ? num : '0' + num
}
var clockDemo = document.getElementById('clockDemo')
myClock(clockDemo)

:::

chrome下载(国内)

扩展推荐

参考

PreviousVue实现富文本插入Emoji Nextes5新特性

Last updated 9 months ago

Was this helpful?