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下载(国内)

  1. chrome插件网

  2. chrome插件

扩展推荐

  1. 鼠标手势CrxMouse

  2. 标签背景图 Momentum

  3. Octotree 码农必备

  4. 广告屏蔽 adsafe

参考

  1. chrome中文翻译(需翻墙)

  2. chrome 扩展官方(需翻墙)

  3. chrome App官方(需翻墙)

  4. 360扩展

PreviousVue实现富文本插入EmojiNextes5新特性

Last updated

Was this helpful?